東京都小金井市にあるWEB制作会社の備忘録

CSSのコーディング時に同じ色、同じフォント、同じ文字サイズなど、何度も同じ値を使用する際に個別にクラスを用意してマークアップを行っていくのでも良いのだけれど、THTMLへの追記なくCSSファイルのみで完結できる「カスタムプロパティ（変数）」が非常に便利だったのでメモ。 CSSのカスタムプロパティ（変数）とは CSSのカスタムプロパティは、CSSの値を事前に変数として登録しておくとこで、各セレクターでの指定時に再利用できる値のこと。具体的にはルートセレクター（:root）に設定することで全てに適応することが可能となります。 CSS :root { --maincolor: #4790bb; --accentcolor: #2a5772; --subcolor: #b0d7d5 --bigsize: 1.8rem; --middlesize: 1.4rem; --enfont: "Jost", serif; } .common__label { color: var(--accentcolor); font-family: var(--enfont); font-size: var(--bigsize); font-weight: 700; } .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize); } 設定時に「--○○○○」の形式で登録、実行時に「var(--○○○○)」の形式で記載。変更する際も「:root」の値を変更するだけで一括で変更できるほか、誤って「:root」の値を削除してしまった時のために「フォールバック値（代替値）」の設定も可能です。 CSS .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize, 20px); } 「var」の第二引数（カンマの後の値）に記載されたものが「フォールバック値」。カスタムプロパティが空の場合に代わりに適応されます。

以前、画像を使用したループスライダを紹介していましたが、今回は見出し等の表記文字をCSSで無限ループさせる場合の実装方法をメモ。 HTML <div class="loop__wrap"> <div class="loop__text"><span>CSSを使って無限ループさせる文字を記載</span></div> </div> CSS @keyframes textscroll { from { transform: translateX(0%); } to { transform: translateX(-100%); } } .loop__wrap { overflow: hidden; } .loop__text { display: flex; } .loop__text span { white-space: nowrap; animation: textscroll 10s infinite linear both; } jQuery if($('.loop__text').length){ var looptxtSize = $('.loop__text span').width() + 〇px; $('.loop__text span').css({'width':looptxtSize + 'px'}); $('.loop__text').css({'width':looptxtSize * 2 +'px'}); $('.loop__text').find('span').clone().appendTo('.loop__text'); } CSSセレクター「.loop__text span」の箇所で幅を直に設定することでもループスライダーの実装可能ですが、文字数や文字サイズが変わった場合でもそのまま使えることと、同じテキストを複数回記載する必要もなくなるようjQueryを使用しています。

画像を使用する際に、曲線等の特殊な形で実装したい時があります。マスク済みの画像を用意する方法もありますが、動的に呼び出すコンテンツ等の場合は都度作成が難しい場合もあるため、CSSでマスキングする方法をメモ。 マスク用の画像を用意する マスクしたい形の画像（マスク用画像）をPNG形式やSVG形式で用意します。この時、画像を残したい（有効にしたい）方に色を付け、削る方を透明にします。 コードの実装 HTML <figure> <img src="画像のurl" class="image__mask"> </figure> CSS .image__mask { -webkit-mask-image: url(マスク用画像のURL); mask-image: url(マスク用画像のURL); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } サンプル .image__mask { -webkit-mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } CSS マスキング mask-image の使い方

サイト内で見かけるパスのアニメーション。あまり使う機会がないのだけれど、必要の際に思い出せるようにCSSとSVGを使用して実装方法をメモ。 HTML <div class="path__wrap"> <svg xmlns="http://www.w3.org/2000/svg" width="79.82" height="33.09" viewBox="0 0 79.82 33.09"> <path d="M953.39-90.53c-19.23,6.84-17.13,12.21-12.87,15.74,10.57,8.76-18.56,19.12-21,16-3.21-4.07,35.73-29.34,38.74-21.15.3.83,0,1.88-2.21,5.62-2.46,4.19,8.68,3.25,14.57-5.57,0,0-14,18.49-16.47,19.57-3.08,1.34-3.12-1.88.73-3.47,2.65-1.09,19.22-9.88,26.36-16.1,0,0-8.48,6.77-4.09,7.86s12.82-7.08,13.6-7.37c0,0-5.92,8.05,2.17,3.78a17.61,17.61,0,0,0,5.48-4.61" transform="translate(-918.88 90.92)" /> </svg> </div> CSS .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; /* パスの全長を設定 */ stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 「stroke-dasharray」を使用して線が全て埋まるまでの数値（パスの全長）を指定。次に「stroke-dashoffset」を使用して上記パスの開始位置が0になるまでオフセット（パスの全長と同じ値を指定）。こうすることで初期状態ではパスが全く描かれていない状態になります。この状態から「animation」プロパティを使用してオフセットを0まで変化させることでパスが描かれていくようなアニメーションになります。 プロパティ公開strokeパスの色を指定するstroke-widthパスの太さを指定するfillパスで囲まれた面の色を指定する。パスアニメーションの場合は無色にする場合が多いstroke-dasharrayパスの間隔を指定する（破線にする）stroke-dashoffset破線のオフセット（打消し量）を後ろから指定する サンプル .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 尚、パスのアニメーションの方向が反対になった場合の対処法と、書き出したSVGの形式がポリライン（polyline）だった場合の対処法は下記になります。それぞれイラストレーターでの「パスの方向反転」、「複合パス作成」で解決可能です。 MacのSafariとスマホだけSVGのpathアニメーションが逆再生されるときの原因と解決方法 たったこれだけ！SVGのpolylineをpathに変換する方法

背景画像のぼかし処理や、モーダルウィンドウの背景などを実装する際に、画像処理や、透過画像等で対応していた部分をCSSのみで解決できる方法があったのでメモ。 CSS .bg__image { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } ぼかし以外にも色変化のようなグラフィック効果を適用することもできます。指定した要素の背後にあるすべてに適用されます。 関数名効果値blurぼかし0px 〜 10pxbrightness明るさ0%～contrastコントラスト0%～drop-shadow影grayscaleモノクロ0% ～ 100%hue-rotate色相回転0deg ～ 360deginvert階調0% ～ 100%opacity透過0%～sepiaセピア0% ～ 100%saturate彩度0%～ backdrop-filterの使い方解説！CSSでグラスモーフィズムを実装！

背景等で斜線や格子柄を実装する際に、以前は画像を作成して処理していたのですが、CSSのみで実装できる方法があったのでメモ。 CSS //斜線 background: repeating-linear-gradient(135deg, #f00, #f00 6px, #fff 6px, #fff 18px); 「repeating-linear-gradient」は反復処理を行ってくれるので、パターンを指定することで斜線や格子が実装できます。 上記の斜線は角度135度、1色目（#f00）を0から6px、2色目（#fff）を6pxから18pxの間隔で繰り返します。角度を0度、90度にすることで罫線（横線・縦線）の実装も可能です。二重指定も可能なので、組み合わせることで格子状にもできます。 CSS //格子状 background: repeating-linear-gradient(90deg, #000 , #000 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #000 , #000 1px, #fff 1px, #fff 32px); 格子状の際には上位レイヤーの2色目に使用する色に透明色（transparent）を指定。こちらを使用しない場合は下位レイヤーのパターンが塗りつぶされます。

スライドアニメーションの使用等で画面全体をマスクしたい時に、「overflow-x」を使用するのですが、スマートフォンではうまく行かなったので対処方法をメモ。 HTML <body> <main class="overflow "> … </main> </body> CSS .overflow { overflow-x: hidden; } スマートフォンではパソコンと異なり「body」タグには「overflow-x」が適応できません。そのため直下に別のタグ（例はmainタグ）を作成して、そちらにクラスを設定しています。

ブログなどの記事を一覧ページにも表示する場合、一行だと短すぎるけど全部出すのは長すぎる。以前はPHPの「mb_strimwidth」を使用して文字数を制限して三点リーダーを実装していましたが、パソコンとモバイルとでは1行分の文字数が異なることや、半角英数字が加わると末尾の長さが微妙にずれたりしていたので、今回はCSSを使用した実装方法をメモ。 HTML <p class="psot__item__description">数多くのホームページをご依頼いただいている中で、実際に株式会社衆が制作に携わった案件の中で使用している手法や、基礎知識に関しての備忘録を掲載。自社でホームページの制作やシステム開発を行われる際の参考例として、またはホームページをご依頼される際の予備知識としてお役にたてれば嬉しいです。</p> CSS .psot__item__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 50%; } 「-webkit-line-clamp」の数字で行数を指定（例は3行で三点リーダー）。widthで設定された幅いっぱいに3行分で三点リーダーが表示されます。 実装例 .psot__item__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 50%; } 数多くのホームページをご依頼いただいている中で、実際に株式会社衆が制作に携わった案件の中で使用している手法や、基礎知識に関しての備忘録を掲載。自社でホームページの制作やシステム開発を行われる際の参考例として、またはホームページをご依頼される際の予備知識としてお役にたてれば嬉しいです。

iphoneでフォーム項目を調整する際に、セレクトボックス（select要素）に関しては初期設定をリセットしないとうまく調整ができないため、対応方法をメモ。 HTML <div class="select__wrap"> <select name="select01"> <option value="">選択してください</option> <option value="○○○○">○○○○</option> <option value="○○○○">○○○○</option> <option value="○○○○">○○○○</option> <option value="○○○○">○○○○</option> </select> </div> CSS @import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css'); select { -webkit-appearance: none; //初期設定のリセット appearance: none; //初期設定のリセット width: 100%; padding: 1rem; border: #ddd solid 1px; border-radius: 5px; font-size: 16px; background: #fff; color: #1a1a1a; } .select__wrap { position: relative; } .select__wrap::after { font-family: "Font Awesome 5 Free"; content: "\f078"; font-size: 10px; font-weight: 900; height: 10px; margin: auto; line-height: 10px; position: absolute; top: 0; right: 1rem; bottom: 0; pointer-events: none; } 「appearance: none;」を使用すると矢印も表示されなくなるため、「Font Awesome」のアイコンを疑似要素に設定。この時に「select」に直接疑似要素を設定しても表示されないため、親要素「select__wrap」を作成して、そちらに設定。最後の行の「pointer-events: none;」は疑似要素をクリック要素として認識できないようにしています。

ホームページで表を実装する際に、項目が多すぎて一度に全体を見渡せない時があります。スクロールすれば確認できますが、見出し項目を固定することで使いやすくなるため、実装方法をメモ。 HTML <table> <tr> <th>項目名1</th> <th>項目名2</th> <th>項目名3</th> </tr> <tr> <td>データ1-1</td> <td>データ2-1</td> <td>データ3-1</td> </tr> <tr> <td>データ1-2</td> <td>データ2-2</td> <td>データ3-2</td> </tr> <tr> <td>データ1-3</td> <td>データ2-3</td> <td>データ3-3</td> </tr> <tr> <td>データ1-4</td> <td>データ2-4</td> <td>データ3-4</td> </tr> <tr> <td>データ1-5</td> <td>データ2-5</td> <td>データ3-5</td> </tr> <tr> <td>データ1-6</td> <td>データ2-6</td> <td>データ3-6</td> </tr> <tr> <td>データ1-7</td> <td>データ2-7</td> <td>データ3-7</td> </tr> <tr> <td>データ1-8</td> <td>データ2-8</td> <td>データ3-8</td> </tr> <tr> <td>データ1-9</td> <td>データ2-9</td> <td>データ3-9</td> </tr> </table> CSS tabel th { position: sticky; top: 0; } 固定したい項目に「position: sticky」を設定し、固定位置をtop（right、bottom、left）で記載。上記に場合は枠の上段に固定される。 CSSで見出し固定＋レスポンシブ対応の表を作成

一般的になってきたスクロールアニメーション。以前はモーションを一つづつ作成していましたが、複雑な動きで無ければ簡単に実装できる「animate.css」を見つけたので実装方法をメモ。 「animate.css」を使ったスクロールアニメーションの実装方法 animate.cssを読み込む まずは、Animate.cssのサイトからCDNで提供されている「animate.css」を読み込む CSS @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'); Animate.css 「animate__animated」クラスを追加 アニメーションを行いたいHTMLタグに「animate__animated」クラスを追加します。 HTML <section class="animate__animated"> コンテンツ01 </section> <section class="animate__animated"> コンテンツ02 </section> <section class="animate__animated"> コンテンツ03 </section> <section class="animate__animated"> コンテンツ04 </section> <section class="animate__animated"> コンテンツ05 </section> <section class="animate__animated"> コンテンツ06 </section> 使いたいアニメーションを探して、「クラス名」をコピー。 サイトの右側のリストからアニメーションが確認できるので、動きを確認したら、すぐ横のアイコンから「クラス名」をコピー。今回は「animate__fadeInUp」を使用します。 jsファイルを作成してアニメーションを設定。 使用するアニメーションが決定したら、jsファイルを作成して「クラス名」を設定。今回はスクロールアニメーションのソース内に記載します。 jQuery //スクロールアニメーション $(window).scroll(function(){ let sH = window.innerHeight * 7 / 10; //トリガー位置の設定 let offsetTop = $(window).scrollTop(); if($('.animate__animated').length){ for (var j = 0; j < $('.animate__animated').length; j++){ if(offsetTop > $('.animate__animated').eq(j).offset().top - sH){ if(!$('.animate__animated').eq(j).hasClass('animate__fadeInUp')){ $('.animate__animated').eq(j).addClass('animate__fadeInUp'); } } } } }); 「sH」の部分でスクロール量を設置。「animate__animate」のついているタグを自動でカウントし、スクロール量に達した時点で「animate__fadeInUp」の無いものにクラスに追加（アニメーション発動）しています。 今回のモーションは非表示の状態から表示されるパターンのものなので、CSSも調整する。 CSS .animate__animated { opacity: 0; } 簡単にアニメーションを実装できるAnimate.cssの使い方

ホームページに画像を配置する際に、四角形や円形、角丸を用いることが多いのだけれど、変化をつけて別の形（多角形）に切り欠きたい場合に、画像を作り直すのは大変。そんな時に便利な方法があったのでメモ。 HTML <figure class="clip__image"> <img src="○○.jpg"> </figure> CSS .clip__image { width: 20vw; height: 20vw; } .clip__image img { clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%); } 「polygon」の部分が多角形を意味し、座標（左上を基準に、右下に向けて100%になるよう、X軸、Y軸の順）を打ち込むことで親要素（自身に幅、高さを設定した場合はその値）の範囲内で変化する。 値はパーセンテージ（％）の他にピクセル（px）やビューポート（vw、vh）にも対応。レスポンシブの時も比率を変えることなく表現が可能。 サンプル .clip__image{ width: 20vw; height: 20vw; margin: 0 auto; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1)); } .clip__image img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%); } サンプルは「filter」を使ってドロップシャドウも適応させてますが、切り欠きした形に対応して影をつけることも可能。 CSS .clip__image { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1)); } CSS clip-path の使い方

youtube動画をホームページに掲載する機会も増えてきました。動画サイズを固定するのであれば、埋め込みタグの幅（width）と高さ（height）を適切に変更すればよいのですが、レスポンシブ対応したい場合は自動的に取得する仕組みが必要。そこでCSSのみで実装可能な方法をメモ。 HTML youtubeの埋め込みより取得したコードの「幅（width）と高さ（height）」を指定する部分を削除して設置。 <div class="movie__youtube"> <div class="movie__youtube__frame"> <iframe src="https://www.youtube.com/embed/○○○○" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> CSS .movie__youtube { width: 1200px; margin: 0 auto; } .movie__youtube__frame { position: relative; width: 100%; height: 0px; padding-top: 56.25%;　//縦横比が16：9の場合 } .movie__youtube__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 「.movie__youtube__frame」で設定している「padding-top: 56.25%;」の部分で自動取得が行わる。※「padding-top」や「padding-bottom」の%指定は親ブロックの幅が基準になる。 新生テクノス株式会社採用ページ

画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど、「img」タグに一行追加するだけで縦横比を変えずに簡単に実装できる方法があったのでメモ。 CSS img { width: 100%; height: 100%; object-fit: cover; } 上記の「object-fit」プロパティーを指定の「img」に追加するだけ。幅と高さは親要素で設定していない場合は指定する。 「object-fit」プロパティーで使える値 値説明fill（初期値）表示枠内を満たすように縦横比を変えながらリサイズ。cover縦横比を保持して表示枠いっぱいにリサイズ。縦横のうち小さい方を基準にして自動的にリサイズし、表示枠からはみ出した部分はトリミングされる。contain縦横比を保持し、表示枠に収まるようにリサイズ。幅と高さのうち大きい方のサイズに合わせて比率を保持して表示枠にフィット。（不足部分は余白が発生）noneリサイズせず、そのまま表示。scale-downnone と contain のうち、小さい方のサイズに合わせて表示。 上記の設定の場合の場合、画像はデフォルトで中央に配置されます。画像の中でフォーカスしたいポイントが中央にある場合にはよいですが、そうでない場合は「object-position」を使用します。初期値は、object-position: 50% 50% でセンター配置。 0% 0%は左上、0% 100%は左下、100% 0%は右下、100% 100%は右下配置となります。 CSS object-position: 左位置 上位置; img { width: 100%; height: 100%; object-fit: contain; object-position: 0px 0px; } 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックスobject-position－CSS3リファレンス IEにobject-fitを対応させる方法 便利な「object-fit」ですが、IEには対応していません。既に公式でのサポートもなくなり、対応が不要なところも多い中、一部の企業では対応が求められることもあるので、対応方法を記載。 ofi.min.jsの読み込み GitHubで公開されている「object-fit-images」をダウンロードし、HTMLのhead内に「ofi.min.js」を読み込みます。ダウンロードが面倒な場合はCDNの用意もあります。 GitHub object-fit-images HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script> スクリプトの実行を行う object-fitを使いたいページで関数を呼び出し、実行します。 jOuery $(function(){ objectFitImages(); }); IE用のCSSを追記 CSSファイルで、object-fitを使用したいセレクターに「font-family: ‘object-fit: 属性値;’; 」を追記する。 CSS object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ object-fit: contain; font-family: 'object-fit: contain;'; /*IE対策*/ CSSプロパティ【object-fit】をIEに対応させる方法IE･Edgeをobject-fitに対応させる（WordPress編）

HTMLコーディングをしているとｎ番目の要素から間隔を空けたり、交互に彩色したりということが多いので、ｎ番目の要素（タグ）を取得できる便利なCSSの疑似クラスをメモ。 ｎ番目系の疑似クラス n番目系の疑似クラスは大きく分けて「-child」と「-of-type」の2種類の系統に分類できる。「i」の部分に整数値、odd（奇数）、even（偶数）、式（例：2n＋1）を指定可能。数値は親要素からの値になる。 種類-child-of-type最初:first-child:first-of-type最後:last-child:last-of-typei番目:nth-child(i):nth-of-type(i)後ろからi番目:nth-last-child(i):nth-last-of-type(i)１個だけ:only-child:only-of-typei番目以降:nth-child(n+i):nth-of-type(n+i)i番目以前:nth-child(-n+i):nth-of-type(-n+i)最後からi個:nth-last-child(-n+i):nth-last-of-type(-n+i)最後からi番目以前:nth-last-child(n+i):nth-last-of-type(n+i) 「-child」と「-of-type」の違い 「-child」と「-of-type」の違いはカウントの対象となる子要素の違い。「-child」は全部の子要素が対象になるのに対して、「-of-type」は子要素の中でも指定した要素のみがカウントの対象となる。 <div class="parents"> <div>兄</div> <div>自分</div> <p>1番目の弟</p> <p>2番目の弟</p> <p>3番目の弟</p> <div> <style> /*1番目の弟が指定される*/ p:nth-child(3) { color: #f00; } /*3番目の弟が指定される*/ p:nth-of-type(3) { color: #00f; } </style> その他のセレクタ 種類例隣の要素h3+p[class]や[href][src]など指定した属性p[class]属性内容の“一部”が一致p[class*="○○○○"]属性内容の“始め”が一致p[class^="○○○○"]属性内容の“最後”が一致p[class$="○○○○"]文章の一行目p::first-line要素が空の時ul:empty CSSのnth-childとnth-of-typeについて基本から学ぼう何番目系の便利なCSSまとめ

表示する画面幅に合わせて可変するデザインを制作する際に「display:flex」を使ってレイアウトすることが多いが、配置した要素に余白を確保したい場合など必要以上にHTMLタグの生成が必要となる場合がある。ここで「calc」を使うとを前述のHTMLタグの生成を抑えることができる場合もあるため使い方をメモ。flexの使い方が知りたい方はページ下部 「関連ページ」を参照 CSS .sample { width : -webkit-calc(100% - 30px) ; width : calc(100% - 30px) ; } 使用できる計算式 計算式説明使用例+加算calc(100% + 30px)-減算calc(100% - 30px)*乗算（引数の1つは数量にする）calc(100% * 3)/除算（右の引数は数量にする）calc(100% / 3) 複数の計算式を兼用することも可能。計算式内に括弧（）を使うことで一般的な数式と同様に計算することが可能。「px」「%」以外に「vw（vh）」、「em（rem）」にも使える。 .sample { width : -webkit-calc(((100% - 40px) / 3 ) * 0.5 + 5px); width : calc(((100% - 40px) / 3 ) * 0.5 + 5px); } CSSで計算式を可能にするcalc()ファンクション 関連ページ CSS「display:flex」で「clearfix」を使わずに要素を並べる。

創業時（2010年頃）にお世話なっていた「clearfix」。当時は要素を横に並べると言えば定番だったが、今はより簡単な「display:flex」の使い方をメモ。 HTML <ul> <li>要素01</li> <li>要素02</li> <li>要素03</li> </ul> CSS ul { display: -webkit-flex; display: flex; } 上記の初期設定では左揃え、上揃え、要素が増えても改行はなく、幅は内包する要素の幅（テキスト量・画像サイズ）によって変化する。余白はなし。配置や並びを変更する際は下記プロパティを同セレクターに追加。 プロパティ説明値効果 flex-direction並び順を指定row左から右へ配置 row-reverse右から左へ配置 column上から下へ配置 column-reverse下から上へ配置 flex-wrap改行を指定nowrap改行させずに一列に配置 wrap改行して上から下へと配置 wrap-reverse改行して下から上へと配置 justify-content水平方向の配置を指定 flex-start左揃え flex-end右揃え center左右中央揃え space-between両端の余白を空けずに等間隔で配置 space-around全て等間隔で配置 align-items垂直方向の配置を指定stretchデフォルト flex-start上揃え flex-end下揃え center上下中央揃え baselineベースライン また、子セレクターに指定することで効果のあるものもある。 プロパティ説明値order並び順を指定-1、0、1、2flex-grow伸び率を指定1、2、3flex-shrink縮み率を指定1、2、3flex-basisベースの幅を指定10％、20％flex均等幅1 参考までに以前の方法（clearfix版）が知りたい方は下記 HTML <ul class="clearfix"> <li>要素01</li> <li>要素02</li> <li>要素03</li> </ul> CSS（clearfix版） .clearfix { zoom: 100%; min-hight: 0px; } .clearfix::after { content: ""; display: block; clear: both; } CSSフレックスボックス(display:flex)の使い方 もう迷わない！CSS Flexboxの使い方を徹底解説

CSSでのグラデーション。2色程度の簡単なものは、使っていたけど調べてみると奥が深そうだったので、詳しい使い方をメモ。 基本的な使い方 background: -moz-linear-gradient(開始位置, 開始色, 終了色); background: -webkit-linear-gradient(開始位置, 開始色, 終了色); background: linear-gradient(to 方向, 開始色, 終了色); 上記が横向き（左から右向き）にグラデーションをつける場合の一般的な書き方。応用編を下記に記載。 //縦（上から下）にグラデーションをつける場合 background: -moz-linear-gradient(top, 開始色, 終了色); background: -webkit-linear-gradient(top, 開始色, 終了色); background: linear-gradient(to bottom, 開始色, 終了色); //色が変わる位置を変える background: -moz-linear-gradient(left, 開始色 20%, 終了色); background: -webkit-linear-gradient(left, 開始色 20%, 終了色); background: linear-gradient(to right, 開始色 20%, 終了色); //3色以上にする background: -moz-linear-gradient(left, 開始色, 中間色 30%, 終了色); background: -webkit-linear-gradient(left, 開始色, 中間色 30%, 終了色); background: linear-gradient(to right, 開始色, 中間色 30%, 終了色); //片側を透明にする（例は終了色が透明） background: -moz-linear-gradient(left, 開始色, transparent); background: -webkit-linear-gradient(left, 開始色, transparent); background: linear-gradient(to right, 開始色, transparent); //片側を半透明にする background: -moz-linear-gradient(left, 開始色, rgba(255, 0, 0, 0.1)); background: -webkit-linear-gradient(left, 開始色, rgba(255, 0, 0, 0.1)); background: linear-gradient(to right, 開始色, rgba(255, 0, 0, 0.1)); //写真にグラデーションを重ねる background: -moz-linear-gradient(left, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL); background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL); background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL); 上記を組み合わせると、いろいろと複雑なものも表現が可能。 円形にグラデーションをつける 場合によっては円形にグラデーションをかける必要があるので円形グラデーションの方法もメモ。 //基本的な使い方 background: -moz-radial-gradient(中央の色, 外側の色); background: -webkit-radial-gradient(中央の色, 外側の色); background: radial-gradient(中央の色, 外側の色); //色が変わる位置を変える background: -moz-radial-gradient(中央の色 20%, 外側の色); background: -webkit-radial-gradient(中央の色 20%, 外側の色); background: radial-gradient(中央の色 20%, 外側の色); //複数色の円形グラデーションをかける background: -moz-radial-gradient(中央の色, 中間色 40%, 外側の色); background: -webkit-radial-gradient(中央の色, 中間色 40%, 外側の色); background: radial-gradient(中央の色, 中間色 40%, 外側の色); CSSのグラデーション（linear-gradient）の使い方を総まとめ！ 子供用靴下の販促サイト制作での使用例 SOCKSTAR（ソックスター）

不動産関連の採用サイトの改修に携わった際に使用した背景画像へのリンクの実装方法をメモ。背景画像を一枚絵で設定している箇所に部分的にリンクを貼りたいとの要望があったのでCSS「position」プロパティで対応。 HTML <section id="chart"> <figure> <div class="pc_img"><img src="画像リンク" alt=""></div> <div class="sp_img"><img src="画像リンク" alt=""></div> <ul class="links"> <li><a href="リンク先URL" target="_blank" title="リンク先1"></a></li> <li><a href="リンク先URL" target="_blank" title="リンク先2"></a></li> <li><a href="リンク先URL" target="_blank" title="リンク先3"></a></li> </ul> </figure> </section> CSS #chart figure{ background: #f2eeeb; padding: 120px 0; text-align: center; position: relative; } #chart figure .pc_img{ width: 1080px; margin: 0 auto; } #chart figure .pc_img img{ width: 100%; } #chart figure .sp_img{ display: none; } #chart figure .links{ position: absolute; width: 1080px; top: 1120px; left: 0; right: 0; margin: auto; } #chart figure .links li a{ width: 530px; height: 50px; display: block; margin: 0 0 20px 550px; } /* 以下はスマホ */ #chart{ padding: 0 0 70px; } #chart figure{ background: #f2eeeb; padding: 60px 5%; position: relative; } #chart figure .pc_img{ display: none; } #chart figure img{ width: 100%; } #chart figure .links{ width: 90vw; position: absolute; top: -webkit-calc((90vw * 0.15 * 44) + 60px); top: calc((90vw * 0.15 * 44) + 60px); left: 5vw; } #chart figure .links li a{ width: 13.6vw; width: 15%; height: -webkit-calc(90vw * 0.15 * 9); height: calc(90vw * 0.15 * 9); display: block; } #chart figure .links li:nth-of-type(1) a{ position: absolute; right: 0; } #chart figure .links li:nth-of-type(2) a{ position: absolute; right: 19.1vw; right: 17%; } #chart figure .links li:nth-of-type(3) a{ position: absolute; right: 38.2vw; right: 34%; } 株式会社ジェクトワン - 組織図 - 会社紹介 -

グローバルメニューにマウスを乗せた際の動きもバリエーションが増え、サイトによって様々。このサイトでも使用しているグローバルメニューのマウスオーバーアクションの方法をメモ。 HTML <nav id="gnav"> <ul> <li><a href="/price/">制作料金</a></li> <li><a href="/about/">会社案内</a></li> <li><a href="/blog/">WEB制作の備忘録</a></li> </ul> </nav> CSS #gnav ul{ display:-webkit-flex; display:flex; } #gnav ul li{ margin-right: 40px; } #gnav ul li a{ color: #fff; line-height: 35px; display: block; text-shadow: 0 0 5px #000; position: relative; } #gnav ul li a:after{ background: #fff; content: ""; width: 0; height: 1px; display: block; position: absolute; bottom: 0; left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out; } #gnav ul li a:hover:after{ width: 100%; } 東京都小金井市のホームページ制作会社｜株式会社衆

オンマウス時などにCSSのみで簡易的なアニメーション効果を実装する方法をメモ @keyframes sampleanime{ 50% { opacity: 1; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } .sample{ opacity: 0.1; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .sample:hover { animation: sampleanime .5s ease forwards; } フォーマット @keyframes 任意の名前 { 0% { CSSプロパティ:値; } 100% { CSSプロパティ:値; } } セレクタ名 { animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値; } 「@keyframes」でアニメーションの流れを設定して、実行したいクラスに「animation」を設定して実行。使用できる「animation」に設定できるプロパティは下記参照 プロパティ一覧 プロパティ説明animation-nameアニメーションの名前animation-durationアニメーションが始まって終わるまでの時間を指定例）3s、750msanimation-timing-functionアニメーションの進行の度合いを指定ease：既定値。アニメーションの中央に向けて変化量が増加し、最後に向けて減少。linear：等しい速度でアニメーションします。ease-in：アニメーションの変化の速度はゆっくり始まり、終了まで加速。ease-out：アニメーションは速く始まり、速度を落としながら続きます。ease-in-out：アニメーションはゆっくり変化し、速度を上げ、また速度を落とします。cubic-bezier(p1, p2, p3, p4)：ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。steps(n, )：遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。animation-delayアニメーションが始まる時間を指定例）1s、500msanimation-iteration-countアニメーションの繰り返し回数を指定例）5、10、infiniteanimation-directionアニメーションの再生方向を指定normal：アニメーションを毎回順方向に再生。reverse：アニメーションを毎回逆方向に再生。alternate：アニメーションを順方向、逆方向の順で再生。alternate-reverse：アニメーションを逆方向、順方向の順で再生。animation-fill-modeアニメーションの開始前、終了後のスタイルを指定none：スタイルを指定しない。再生後は、元のスタイルを適用。backwards：再生後は、最初のキーフレーム（0%）を適用。animation-delayを指定している場合、再生までの時間は最初のキーフレーム（0%）を適用。forwards：再生後は、最後のキーフレーム（100%）を適用both：再生後は、最後のキーフレーム（100%）を適用。animation-delayを指定している場合、再生までの時間は最初のキーフレーム（0%）を適用。animation-play-stateアニメーションの再生・停止を指定 animation 上記、8つのプロパティを一括で指定できる、ショートハンドプロパティ。 サンプル サンプルはオンマウス時に、Y軸方向に半回転しながら、一時拡大して表示。 .list li a{ width: 30vw; height: 30vw; margin: 0 auto 2rem; display: block; } .list li a .front{ text-align: center; line-height: 30vw; font-size: 5rem; width: 30vw; height: 30vw; background: #0099d9; color: #fff; } @keyframes sampleanime{ 50% { opacity: 1; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } .sample{ opacity: 0.1; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .sample:hover { animation: sampleanime .5s ease forwards; } 衆 【CSS3】@keyframes と animation 関連のまとめ CSSアニメーション 入門

webサイトを作る上で、文字の大きさを考慮することは非常に大切。一文字ずつ「px」で設定しても良いのですが、全体のサイズ変更が発生した場合や、端末ごとでの文字を一括調整する時に便利な「rem」による設定方法をメモ。 html{ font-size: 15px; } h1{ font-size: 1.6rem; // 15pxの1.6倍の24px } h2{ font-size: 1.2rem; // 15pxの1.2倍の18px } small{ font-size: 0.8rem; // 15pxの0.8倍の12px } CSSで「html」タグに基準となるフォントサイズを設定、その他のタグはこの数値を基準にした倍率を「rem」で行っていく。この方法であれば、仮に全体的にサイズを大きくしてほしいという要望があった場合でも基準値の「15px」を変更するだけで比率を変えることなく、全体サイズの変更が可能。 また、「rem」は「margin」や「padding」にも使えるので、枠の中に文字を入れた場合の余白調整や、改行幅の調整にも使える。

以前求人サイトを手掛けた時に使用した、マウスオーバーの時に3D回転（反転）をする方法をメモ 。使用時は表面に「スタッフのプロフィール写真」、裏面に「働いている様子の写真」として利用。 HTML <ul class="list"> <li> <a href=""> <div class="block"> <figure class="front">衆</figure> <figure class="back">SYU</figure> </div> </a> </li> </ul> CSS .list li a{ width: auto; height: 300px; display: block; overflow: hidden; } .list li a .block{ position: relative; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; } .list li a:hover .block{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a:not(:hover) .block{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a .block .front, .list li a .block .back{ width: 300px; height: 300px; position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .list li a .block .front{ z-index:1; } .list li a .block .back{ -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); transform: rotateY(-179deg); } .list li a:hover .block .front{ z-index:0; } 「perspective」で奥行を設定し、「transform」で縦軸（Y軸）を支点に回転。回転速度は「transition」で設定。「:not(:hover)」を使うと戻り（mouseout）の動きもスマートにできる。 サンプル .list li a{ width: 30vw; margin: 0 auto; } .list li a{ width: 30vw; height: 30vw; display: block; overflow: hidden; } .list li a .block{ position: relative; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; } .list li a:hover .block{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a:not(:hover) .block{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a .block .front, .list li a .block .back{ text-align: center; line-height: 30vw; font-size: 5rem; width: 30vw; height: 30vw; position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .list li a .block .front{ background: #0099d9; color: #fff; z-index:1; } .list li a .block .back{ background: #eee; color: #111; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); transform: rotateY(-179deg); } .list li a:hover .block .front{ z-index:0; } 衆 SYU

ポイント等を表現する時にナンバリングをしていますが、項目増えたり、並び替えた際に番号の振り直し忘れの無いよう、自動でナンバリングが行えるようにする方法をメモ HTML <ul class="pointlist"> <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> ・ ・ ・ <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> </ul> CSS .pointlist{ counter-reset: number 0; /* number というカウンタ名で 0 をセット */ } .pointlist li::before{ counter-increment: number 1; /* number の値を 1 づつ増加 */ content: counter(number); } 「countercounter-reset」はカウントする値をリセットするプロパティ。ナンバリングをしたい要素の親要素に設定しカウンタ名(例：number)と初期値(例：0)を設定。ナンバリング値は「counter」で出力。カウントの増加数は「counter-increment」で設定。 欅BodyTherapistSchool

ホームページを制作する中でアイキャッチ等のポイントとして使われているアイコン。以前は画像を作成して設置していましたが、スタンダードなものであればWEBアイコンフォント「Font Awesome」を使って表現が可能なので、使い方をメモ。 「Font Awesome」を使ったWebアイコンの実装の方法 「Font Awesome」のサイト内に用意されているタグを設置するだけでもWEBアイコンの実装は可能ですが、空タグになるのは好ましくないので、CSSの疑似要素（before）使った方法で実装。 サイトに登録して外部読込用タグを取得 「Font Awesome」のサイトで登録(無料)を済ませた後に表示される「kit code」をコピー、使用するサイトの「head」タグ内にコードを記載。SSL化に影響がないよう、プロトコル部分を削除。 <script src="//kit.fontawesome.com/○○○○○○○○○○.js" crossorigin="anonymous"></script> Font Awesome 使いたいアイコンを検索して、アイコンのコードと種類を確認。 サイト内の検索フォームから利用したいアイコンを検索。 アイコンの詳細ページで「種類」と「ユニコード」を確認。 HTMLとCSSを編集してアップロード 前の工程で確認した「ユニコード」をCSSの「content」の部分に頭に「\」(円マーク)を付けて記載。使用するアイコンの種類により「font-family」と「font-weight」も変更。 ※下記の参考例は「icon-mail」というクラスの疑似要素(before)を使用。 HTML <ul> <li class="contact"><a href="/contact/" class="icon-mail">お問い合せ</a></li> </ul> CSS .icon-mail::before { font-family: "Font Awesome 5 Pro"; content: "\f0e0"; font-weight: 900; } 「font-family」と「font-weight」の対応表 種類font-familyBrandsFont Awesome 5 Brandsその他Font Awesome 5 Pro 種類font-weightSolid900Regular or Brands400Light300

コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かった見出しやキャッチコピー。「Google Web Font」を使うと、簡単に豊かなフォント表現が可能。日本語フォントも増えてきたので使い方をメモ。 「Google Web Font」を使った文字の実装方法 「Google Web Font」のサイト内に用意されているCSSファイルにリンク方法でも実装は可能ですが、追加の度に全てのHTMLファイルを変更するのは大変なので、インポート（@iｍport）を使った方法で実装。 使いたいフォントを検索して、フォントのソースを確認。 サイト内の検索フォームからイメージに近い文字を検索。希望フォントの詳細ページで「SELECT THIS FONT」をクリック。 下部に表示された「Family Selected」を開き「EMBED」を「@IMPORT」に切り替えて「ソースコード」を確認。 Google Fonts CSSを編集してアップロード 文字を変更したいクラスに、前の工程で確認した「ソースコード」を記載。 ※下記の参考例は「 Noto Sans JP 」というフォントを使用。 CSS @import url('https://fonts.googleapis.com/cssfamily=Noto+Sans+JP&display=swap'); .jpn-font{ font-family: 'Noto Sans JP'; }