safariの14.1から、flexboxでgapプロパティが使えるようになった。 これで、メインのモダンブラウザ全てでflexboxのgapに対応したことになる。 gap property for Flexbox | Can I use... それで、Bootstrapのグリッドレイアウトの間隔の定義をなんとかできないかと思った。 Bootstrapは便利だけれど、グリッドレイアウトの列間をmarginとpaddingで作っているので、 colのdivにmargin,paddingを直接指定してもうまくいかない。 以下例。 だからcolの内側にさらにdivを置くことになり、divの階層が深くなってしまう。 デザインが複雑になってくると「Bootstrap使わない方が楽なんじゃ…」となってしまう。 Bootstrapのグリッドがgapで作られていれば、marginとpaddingが空くので汎用性が上がる。 npmでbootstrapをインストールして、sassからコンパイルしてみる。 参考： Customize (カスタマイズ) · Bootstrap v5.0 node_modules/bootstrap/scss/bootstrap.scss を assets/css/bootstrap.scss にコピー node_modules/bootstrap/scss/mixins/_grid.scss を assets/css/mixins/_grid.scss にコピー assets/css/bootstrap.scss の mixin を読み込んでいる下で import して上書きする assets/css/mixins/_grid.scss を修正する。 直したコードはgithubに上げました。 kanemu/bootstrap-custom-grid-example 修正はこんな感じ。 https://github.com/kanemu/bootstrap-custom-grid-example/commit/e6c8a0e796e3310ac7180409ec47b1d27096dbeb# /// Grid system // // Generate semantic grid columns with these mixins. - @mixin make-row($gutter: $grid-gutter-width) { --#{$variable-prefix}gutter-x: #{$gutter}; --#{$variable-prefix}gutter-y: 0; display: flex; flex-wrap: wrap; - margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list - margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list - margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list + column-gap: var(--#{$variable-prefix}gutter-x); + row-gap: var(--#{$variable-prefix}gutter-y); } @mixin make-col-ready($gutter: $grid-gutter-width) { @@ -21,15 +19,12 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list - margin-top: var(--#{$variable-prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; - width: percentage($size / $columns); + width: calc((100% + var(--#{$variable-prefix}gutter-x)) * #{$size / $columns} - var(--#{$variable-prefix}gutter-x)); } @else { flex: 1 1 0; max-width: 100%; 見てみると、divの両端がきちんとテキストの両端に揃う 左右にpaddingを入れても、列間がきっちり揃う。 いい感じになった。

safariの14.1から、flexboxでgapプロパティが使えるようになった。 これで、メインのモダンブラウザ全てでflexboxのgapに対応したことになる。 gap property for Flexbox | Can I use... それで、Bootstrapのグリッドレイアウトの間隔の定義をなんとかできないかと思った。 Bootstrapは便利だけれど、グリッドレイアウトの列間をmarginとpaddingで作っているので、 colのdivにmargin,paddingを直接指定してもうまくいかない。 以下例。 だからcolの内側にさらにdivを置くことになり、divの階層が深くなってしまう。 デザインが複雑になってくると「Bootstrap使わない方が楽なんじゃ…」となってしまう。 Bootstrapのグリッドがgapで作られていれば、marginとpaddingが空くので汎用性が上がる。 npmでbootstrapをインストールして、sassからコンパイルしてみる。 参考： Customize (カスタマイズ) · Bootstrap v5.0 node_modules/bootstrap/scss/bootstrap.scss を assets/css/bootstrap.scss にコピー node_modules/bootstrap/scss/mixins/_grid.scss を assets/css/mixins/_grid.scss にコピー assets/css/bootstrap.scss の mixin を読み込んでいる下で import して上書きする assets/css/mixins/_grid.scss を修正する。 直したコードはgithubに上げました。 kanemu/bootstrap-custom-grid-example 修正はこんな感じ。 https://github.com/kanemu/bootstrap-custom-grid-example/commit/e6c8a0e796e3310ac7180409ec47b1d27096dbeb# /// Grid system // // Generate semantic grid columns with these mixins. - @mixin make-row($gutter: $grid-gutter-width) { --#{$variable-prefix}gutter-x: #{$gutter}; --#{$variable-prefix}gutter-y: 0; display: flex; flex-wrap: wrap; - margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list - margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list - margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list + column-gap: var(--#{$variable-prefix}gutter-x); + row-gap: var(--#{$variable-prefix}gutter-y); } @mixin make-col-ready($gutter: $grid-gutter-width) { @@ -21,15 +19,12 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list - margin-top: var(--#{$variable-prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; - width: percentage($size / $columns); + width: calc((100% + var(--#{$variable-prefix}gutter-x)) * #{$size / $columns} - var(--#{$variable-prefix}gutter-x)); } @else { flex: 1 1 0; max-width: 100%; 見てみると、divの両端がきちんとテキストの両端に揃う 左右にpaddingを入れても、列間がきっちり揃う。 いい感じになった。 2021/05/19 追記 .offset-* クラスも対応しました。 Fix .offset- classes · kanemu/bootstrap-custom-grid-example@f0b7bfa

どうも7noteです。画像をテキストや文字に重ねたいときに使える3つの方法を解説 ①背景画像にする 背景画像を指定してしまえば、画像の上に文字や別の画像を設置できます。 ただし、背景画像を前面に持ってくることはできません。 index.html <div class="box"><img src="sample01.jpg" alt=""></div> style.css .box { background: url(sample02.jpg); /* 背景画像に緑の画像を指定 */ width: 800px; /* 画像にあわせて適当な幅を指定 */ padding: 20px; /* 適当な余白を指定 */ } ②position指定で重ねる position指定を使うことで自由にコンテンツの位置や前後の重なり順を指定することができます。 ただしその分コンテンツの高さが無くなるので乱用しすぎるとレイアウト崩れの原因にもなります。 index.html <div class="box"> <img src="sample01.jpg" alt="" class="img_01"> <img src="sample02.jpg" alt="" class="img_02"> </div> style.css .box { width: 500px; /* 適当な幅を指定 */ height: 300px; /* 適当な高さを指定 */ position: relative; /* 基準位置とする */ } /* 共通するCSS */ .box img { width: 300px; /* 適当な幅を指定 */ position: absolute; /* 相対位置に指定 */ } .box .img_01 { /* 左上に固定 */ top: 0; left: 0; } .box .img_02 { /* 右下に固定 */ bottom: 0; right: 0; } ③ネガティブマージンで重ねる この方法では無理やりマイナスの値のmarginを指定することで、ほかの要素の上に画像やテキストを重ねる事ができます。 ガッツリ重ねるというよりは、一部が被る程度の時に使えます。 index.html <div class="img_01"><img src="sample01.jpg" alt=""></div> <div class="img_02"><img src="sample02.jpg" alt=""></div> style.css img { width: 300px; /* 適当な幅を指定。※解説用なのでなくてもOK */ } .img_02 { margin-top: -100px; /* 上方向にネガティブマージンを取る */ opacity: .5; /* ※解説用にかぶっているところをわかりやすくしているだけ */ } まとめ いかがでしょうか？ 画像の重ね方とかで調べると、どの記事もposition指定の方法しか書かれていなかったりしますが、個人的には初心者にposition指定だけ教えてしまうと何でもかんでもposition指定してレイアウト崩れを起こしたり、配置の修正が難しくなってしまう場合が多いなと感じています。 しっかりとその場面に合わた方法がある事を伝えたいと思い記事にしました。 状況に合わせて使ってください。お役にたてれば嬉しいです。 【フロントエンド強化月間に参加中↓↓】 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

はじめに CSSのプロパティであるpositionの値による配置の変化をまとめました。 static, ralative, absoluteの組合せによってどのような変化があるかを見ることで、各値の性質について考えていきます。 各値の定義については下記リンクをご覧ください。ここでは、実装上の変化に焦点を当てて説明します。 公式ドキュメント：https://developer.mozilla.org/ja/docs/Web/CSS/position 【CSS】positionプロパティを使いこなす！relative・abosolute・fixedの使い方： https://creive.me/archives/13521/ 理解すべきポイント 要素自体のpositionの値だけでなく、他要素の値に影響を受けて配置が変化することがポイントです。 positionの値の組合せから、何故その配置になっているのかを説明できるようになれば、理解したことになると思います。 実行環境 Google Chrome 90.0.4430.85 ソースコード 今後の説明ではコードの変更部分のみで話を進めていきます。 親子要素両方ともposition: static;の場合（デフォルト値）となります。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html> style.css body { margin: 60px; height: 500px; } .parent { position: static; /*デフォルト値*/ margin-top: 0; margin-left: 0; width: 100px; height: 100px; background-color: aqua; } .child { position: static; /*デフォルト値*/ margin-top: 0; margin-left: 0; width: 50px; height: 50px; background-color: rgb(156, 189, 65); } 実行結果 水色が親要素(parent)、抹茶色が子要素(child)です。 staticは、親要素等に依存した現在の位置となります。bodyにmarginがあるので、60px*60pxのところに親子ともに位置している状況です。 positionの値の組合せ 親要素：relative, 子要素：absolute positionの値について、.parentをrelative、.childをabsoluteに変更しました。positionが使われる代表例ですね。 .parent { position: relative; } /*...*/ .child { position: absolute; top:10px; left:10px; } まずは、何故下図の配置になっているか考えてみてください。 では、理由を解説します。 relativeは、現在の位置を起点に要素の位置が動きます。.parentの現在の位置とは、body要素の左上です。したがって、.parentはbody内部の左上を起点とします。 absoluteは、最も近い「relative」(親や先祖の要素)を起点に要素の位置が動きます。.childから最も近いrelativeは.parentです。したがって、.childは.parent内部の左上を起点とします。 absoluteを「絶対位置」とだけ覚えていた私は、この説明ができませんでした。祖先要素におけるrelativeの有無で起点が変わることに注意したいですね。 親要素：absolute, 子要素：relative 次は親子のrelativeとabsoluteを入れ替えました。 body { margin: 60px; border: 1px solid; } .parent { position: absolute; top:10px; left:10px; } .child { position: relative; } 見やすさのためにbodyに枠線を入れました。何故.parentと.childはページ左上に移動したのでしょうか？ では、解説していきます。 .parentがabsoluteになったことにより、祖先要素にrelativeがなくなりました。すると、ページ全体が起点となるので、body要素を無視してページ左上に位置しています。 .childがrelativeになったことにより、.childは現在の位置が起点となります。この場合の「現在の位置」は、親要素である.parent内部の左上です。そのため、.parentと一緒に移動する形となります。 relativeの「現在の位置」とは何かと思うかもしれません。今回の場合は、「現在の位置」＝直接の親要素の領域とする解釈でいいと思います。 公式ドキュメントでは「文書の通常のフローに従って配置されます。」と説明されています。 文章の通常のフローとは？と思ったのですが、今回はそこまで深く知らなくても理解できるので割愛します。 relativeのstaticとの違い relativeはstaticと同じ起点になります。 staticとの違いは２点です。 top,bottomなどを利用して起点からの位置移動が可能なこと。 absoluteが子孫要素に存在する場合、absoluteの位置に影響を及ぼす。 親子両方absolute ここまでの内容が分かっていれば予想できると思うので割愛します。親子ともに全部ページの左上が起点となります。 親子両方relative 基本的にデフォルトの親子両方staticと同じになりますが、staticとの違いは起点からの位置指定ができることです。 その他 他にstaticも絡めて以下の項目も紹介したかったのですが、書くモチベが途絶えたので省略します。 是非自分の環境でいじってみて理解を深めてください！ 親要素：static, 子要素：absolute 親要素：static, 子要素：relative まとめ staticは、親要素等に依存した現在の位置（文書の通常のフローの配置）となる。 absoluteは、基本ページの左上の位置が起点 しかし、祖先要素にrelativeが存在する場合、起点がrelativeに依存 relativeは、デフォルトのstaticと基本同じ（現在の位置が起点）。しかし、違いが２点ある。 relativeは起点からの位置変更が可能 子孫要素にabsoluteが存在する場合、absoluteの起点に影響を及ぼす。 （番外）親子両方absolute。だけど親要素で位置指定なし .parent { position: absolute; } .child { position: absolute; top:10px; left:10px; } これについては、何故ページの左上ではなく、bodyの左上に配置されるのか分かりませんでした。 .childの親要素にrelativeがなくなったので、ページ全体が起点になると推測していました。 しかし、.parentがrelativeのときと同じ表示になりました。 .parentを位置指定するともちろん両方ともページ全体が起点となります。 もし分かる方がいましたらご教授いただけると幸いです。 終わりに 最後まで読んでいただきありがとうございました！ 自分で触ってみることが一番なので、是非自身の環境で実行してみてください。 疑問点等ありましたらご質問ください。 余談 最後に、今回久々にcssをいじっていて気付いたことがあるので共有します。 CSSとかHTMLのコメントアウトって付けるの面倒臭いですよね。 そんなときに便利なショートカットがあります。 「Ctrl + / 」（行コメント） 「Shift + Alt + a 」（ブロックコメント） 何を今更と思う方が大半かと思いますが、HTMLやCSSでも適用できるのは盲点でした。。前後に記号をつけるコメントアウトの記法では効果抜群です。

要素を横に並べるときのwidthの調整のしかた 方程式：100% / 要素の数 - 余白の幅 * 余白の数 / 要素の数 例↓ style.scss width: calc(33.3% - 24px * 2 / 3);

概要 最近はVueやReactといった便利なライブラリを使い、フロントのHTMLやJSファイルを部品として分割するコンポーネント化の技術の発展がめざましいですね。しかしそれらの技術は便利な反面、環境への依存度が高かったり、学習コストが高いのも課題の一つです。 この記事では技術の発展にあえて逆行し、HTML&CSSおよびjQueryだけで簡単にビューの部品をコンポーネント化する方法を提案します。LP製作やコーポレートサイト制作程度のフロントエンド業務であれば、この記事で解説する簡単な実装でも十分実務で活用できる場合もあるかと思うので、こんな簡単な方法もあるのだなと、記憶の片隅にでも入れてもらえればと思います。 この記事の想定読者 Web系エンジニア初心者 HTML&CSS, jQueryは理解している Vue.jsやReact.jsが分からない/ 学習中だが躓いている それでもDRY(Don't Repeat Yourself)したい この記事の想定読了時間 20分程度 完成図 実装コード index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Kiita</title> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Goldman&amp;display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> </head> <body> <myHeader></myHeader> <myBody></myBody> <!-- コンポーネント --> <script src="components/js/myHeader.js"></script> <script src="components/js/myBody.js"></script> <script src="components/js/sidebarContent.js"></script> <script src="components/js/topContentArticle.js"></script> <style> * { margin: 0; } a { text-decoration: none; color: inherit; } body { background-color: #F0F0F0; } </style> </body> </html> ほか8ファイル(js, css) 解説 まず大前提として、HTMLでは<div></div>といったタグを用いることができますが、これらのタグは自作(自前で定義)することもできます。さらに、そのタグをjQueryから取得することが可能です。 例えば以下に示すindex.htmlのbodyタグ内には<myHeader></myHeader>というタグがあります。このタグはjQuery上から$('myHeader')として取得することが可能です。 index.html <body> <myHeader></myHeader> ←これ <myBody></myBody> <!-- コンポーネント --> <script src="components/js/myHeader.js"></script> <script src="components/js/myBody.js"></script> <script src="components/js/sidebarContent.js"></script> <script src="components/js/topContentArticle.js"></script> <style> * { margin: 0; } a { text-decoration: none; color: inherit; } body { background-color: #F0F0F0; } </style> </body> jQuery上から要素にアクセスできるということは、 $('myHeader').html('hoge') と書くとHTMLを <myHeader>hoge</myHeader> という状態にできるワケです。つまりhogeの部分がヘッダーの中身になっていればいいワケですから、 <script src="components/js/myHeader.js"></script> っていうスクリプトタグを書いてから、その中身に components/js/myHeader.js $('myHeader').html(` <header> <div id="header"> <p id="header-logo">Kiita</p> </div> </header> <link rel="stylesheet" href="components/css/myHeader.css"> `) って書けばヘッダーがコンポーネント化できるワケです。ここにCSSをあてたければ、単にlinkタグを追加すればいいだけなので、 components/js/myHeader.js $('myHeader').html(` <header> <div id="header"> <p id="header-logo">Kiita</p> </div> </header> <link rel="stylesheet" href="components/css/myHeader.css"> `) ってすればCSSが適用できます。あとは<script src="components/js/myHeader.js"></script>を各ページに追加すればヘッダーが共通部品になる、即ちコンポーネント化されるので、DRYが達成できています。やったZE！ しかし、コンポーネント化の真髄はここからです。例えば画面左側のサイドバーの『ホーム』『タイムライン』などが書いてある部分に注目してください。 この部分もコンポーネントが使用されています。<sidebarContent></sidebarContent>です。 myBody.js <div id="top-sidebar-article"> <p class="sidebar-title">記事フィード</p> <sidebarContent href="" icon="fa fa-home" title="ホーム"></sidebarContent> <sidebarContent href="" icon="far fa-clock" title="タイムライン"></sidebarContent> <sidebarContent href="" icon="fa fa-chart-line" title="トレンド"></sidebarContent> </div> 一般的なHTMLタグのようにhrefなどの属性を与えることも可能です。このように与えられた属性は$('sidebarContent').attr('href')などとして取得できます。 よって、コンポーネントにパラメータを与えて動的に表示内容を変更したい場合は、以下のような処理になります。 sidebarContent.js $('sidebarContent').html(` <a href="${$('sidebarContent').attr('href')}" class="sidebar-content"> <i class="${$('sidebarContent').attr('icon')}"></i> <span>${$('sidebarContent').attr('title')}</span> </a> `) これでパラメータを与えることができますが、まだ一つ問題があります。このコードのままこの処理を走らせると、sidebarContentタグが複数ある場合に全てのコンポーネントが最初に与えたパラメータの値に置き換わってしまいます。 なぜこうなるかというと、$('sidebarContent')が何回目に呼び出されたパラメータを参照すればいいか記述できていないためです。こうした場合は$('sidebarContent')の処理にfilter関数を適用してあげることで解決できます。 sidebarContent.js $('sidebarContent').filter((i, dom) => { $(dom).html(` <a href="${$(dom).attr('href')}" class="sidebar-content"> <i class="${$(dom).attr('icon')}"></i> <span>${$(dom).attr('title')}</span> </a> `) }) これでパラメータを無事個別に受け取ることが可能になります！これでコンポーネント化がバッチリ完了です。しかしまだ細かい修正を行うべき部分が存在するので、あと2箇所ほど修正を加えます。 まず$('タグ名')のように指定している部分ですが、この'タグ名'の部分はファイル名を取得してあげれば毎回書き直す必要がなくなるので、以下のようにファイル名を取得して適用する処理を加えます。CSSファイルも同じ名前なので、こちらもファイル名をタグ名にリンクさせます。 sidebarContent.js tagName = document.currentScript.src.split('/').pop(0).split('.')[0] $(tagName).parent().append(`<link rel="stylesheet" href="components/css/${tagName}.css">`) $(tagName).filter((i, dom) => { $(dom).html(` <a href="${$(dom).attr('href')}" class="sidebar-content"> <i class="${$(dom).attr('icon')}"></i> <span>${$(dom).attr('title')}</span> </a> `) }) また、<sidebarContent></sidebarContent>のような自分で命名したタグはコンポーネントの呼び出し後には削除しても良いので、これを削除する処理を追加します。削除の処理は以下のような記述で可能です。 $(dom).children().unwrap() よってこれらの修正が全て完了すると、以下のようなJavaScriptテンプレートを使用してコンポーネントの追加が可能になります。 リスナテンプレート tagName = document.currentScript.src.split('/').pop(0).split('.')[0] $(tagName).parent().append(`<link rel="stylesheet" href="components/css/${tagName}.css">`) $(tagName).filter((i, dom) => { $(dom).html(`任意のHTML`).children().unwrap() }) このスクリプトが自作HTMLタグの追加リスナとして作用します。 以上でコンポーネント化の解説が完了です！まとめると、以下の手順によってHTML&CSS + jQueryのみでビューのコンポーネント化が可能になります。 1. 自作タグを任意のHTMLファイルに記述する。 index.html <myComponent param="hoge"></myComponent> 2. JSファイルとCSSファイルをタグ名で用意する。 root | -- index.html | -- components | ` -- js | ` -- myComponent.js ` -- -- css ` -- myComponent.css 3. myComponent.jsにリスナテンプレートをペーストして任意のHTMLの部分を編集する。 myComponent.js tagName = document.currentScript.src.split('/').pop(0).split('.')[0] $(tagName).parent().append(`<link rel="stylesheet" href="components/css/${tagName}.css">`) $(tagName).filter((i, dom) => { $(dom).html(` 任意のHTML `).children().unwrap() }) パラメータを自作タグに与えた場合、$(dom).attr('パラメータ名')で取得しましょう。 <myComponent param="hoge" href="fuga"></myComponent> ↕︎ 対応 $(dom).html(` <div>${$(dom).attr('param')}</div> <a href="${$(dom).attr('href')}">リンク</a> `) ↓のようにレンダリング(出力)される <div>hoge</div> <a href="fuga">リンク</a> 4. HTMLファイルからmyComponent.jsを読み込む。 index.html <myComponent param="hoge"></myComponent> <script src="components/js/myComponent.js"></script> 完了！ これでHTML&CSS + jQueryのみでコンポーネント化が達成できました。お疲れさまでした。 まとめ jQueryでも割と簡単にコンポーネント化してDRYできる！ ReactやVueを一から学ぶのは結構大変なので、簡単なLPやコーポレートサイトのコンポーネント化であればこのような方法もアリなのかなと思います。もちろんVueやReactを習得できるのであれば、それに越したことはありませんが、この記事で紹介したような方法もあるということは覚えてみても損はないかもしれません。 『コンポーネント化』と単語だけ聞くとどうも難しく感じるかもしれませんが、ReactやVueで用いられるコンポーネントの概念もこの記事で説明していることと基本的な考え方は一緒です。一旦理解できてしまえばコードが素早く綺麗にかける素晴らしい技術なので、是非習得して快適なコーディングライフを過ごしましょう！ 筆者プロフィール 26歳現役フルスタックエンジニア。Ruby/PHP/JSVue/AWS/nginxなどが主です。プログラミングの教材執筆やメンターしてます。VTuberとしてプログラミング解説雑談配信等もします。 Twitter : https://twitter.com/soeno_onseo Github : https://github.com/Fumiya-Soeno HP : http://www.onseo.info/