年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…

cgworks.jp 要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。 ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。 自分のス…

jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。 まとめて処理されるパターン <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script> $(function(){ alert($('li').text()); }); </script> jQuery.each() の使い方 複数あるli要素に対して…

2023.stateofcss.com ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。 ただ、新しいプロパティはブラウザごと…

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…

speakerdeck.com

GithubのCI/CDツールを使ってWordPressの面倒な更新作業を自動化します。 通常のWordPressの更新作業のフロー ローカル（xampp）でwpのデータを修正・更新作業を進める 修正・更新箇所を社内のテスト用サーバーにアップロード 上長が修正・更新箇所を確認 問…

プラグインを使ってデプロイさせます。デプロイとは「実行ファイルを実際のWebサーバー上に配置して、利用できる状態にすること」を指します。 ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決し…

www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com Facebookが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートT…

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 undraw.co www.openpeeps.com illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawin…

Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…

今回はコーポレートサイトをWordPressで作成します。 ページ構成 トップページ 実績紹介 採用情報 お問い合わせ ブログページ ブログ個別記事ページ サイトポリシー トップページの内容 タグライン（後ろにパーティクル） メインビジュアルとリード文 おしら…

「.htaccessファイル」を使った動的配信モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル | ドキュメント | Google for Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス…

ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

デフォルトでは「ウジェット機能」はoffになっているので、まずはfunctions.phpに「ウジェット機能」を有効にする記述をします。 //ウジェットエリアを有効にする function custom_widget_register(){ register_sidebar(array( 'name' => 'サイドバーウィジ…

コンテンツのインポート まずはサンプルデータをダウンロードしましょう。 www.shoeisha.co.jp ダウンロードしたサンプルデータをダッシュボードからインポートします。 「ツール」→「インポート」→「WordPress」 ダウンロードした「posts.xml」ファイルを選…

See the Pen css-gridでレイアウト by yachin29 (@yachin29) on CodePen. CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもよ…

これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-sizeをpxで指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォントサイズ」の項目です。 emを使った…

remを使う時の注意点 remで起こる問題を解決するにはSCSSであれば自作関数を使う事で解決出来ます。 scssでのfunction関数の設定 @function 関数名(引数) { @return }@function rem($px) { @return ($px / 16) * 1rem; } h1 { font-size: rem(36); /* font-s…

Sassの公式サイトで今後はDartSassを使うことが推奨とされると発表がありました。それに伴ってSassの初期の方から実装されていた@importが廃止予定になりました。とても便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわか…

プルリクエストとは？ みなさんの会社やチームではコードレビューしていますか？コードレビューする文化は根付いていますか？コードレビューする文化を根付かせる、タスク化するにはどうしたらいいでしょうか。”本番適用するソースコードは必ずレビューする”…

Webサイトを開いてFV（ファーストビュー）を見ただけでそのサイトから離脱してしまう確率は、LP（ランディングページ）で平均70％以上、コーポレートサイトで平均40％～60％と言われています。 つまり、第一印象でユーザーの興味を引くことができなければペ…

GitHub Actionsを使って、最近話題のCI/CD化を進めましょう CI/CD Continuous IntegrasionおよびContinuous Deliveryの略称です。どちらもContinuous（=継続的）とあるように、開発からリリースまでの流れをフェーズごとに分断するのではなく、つねに継続的…

UNIXタイムスタンプとは UNIXタイムスタンプとは、コンピューターのシステム時刻の一種で、協定世界時（UTC）での1970年1月1日（午前0時0分0秒）からの経過時間を指します。 time関数 現在のタイムスタンプを取得 strtotime関数 指定した…

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列） ２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…

ホームページを作る際にヘッダーやフッターなど各ページで共通のパーツを使う事が多々あります。各ページごとに記述してしまうと、万が一修正が発生した場合、全てのページに影響が及んでしまいます。 そうならない様に「外部ファイル化」しテンプレート化す…

コラージュとは？ コラージュとは絵画の技法の1つで、フランス語の「糊付け」を意味する言葉である。 通常の描画法によってではなく、ありとあらゆる性質とロジックのばらばらの素材を組み合わせることで、例えば壁画のような造形作品を構成する芸術的な創作…

img要素の表示方法は3通り １.「max-width:100%」を使ったフルードイメージ 設定は一番簡単、幅と同じ比率で高さも低くなる２.「object-fit」幅も高さも自由に指定、img要素の親要素に表示させたい幅と高さを指定、img要素には「object-fit:cover」と幅と高…

See the Pen スマホ時にスクロールスナップ by yachin29 (@yachin29) on CodePen. www.nike.com 以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます…