CSSには、余白を与えるプロパティが用意されている。marginとpaddingだ。いずれもスペースを空けるために使うことは、周知のとおりだが、これを正しく使い分けできていないサイトを見掛ける。marginを使うべき箇所にpaddingを用いたり、またその逆もあったりする。 なぜmarginとpaddingを誤って使ってしまうのだろうか？スタイルシートには、margin,paddingそれぞれの定義がなされているにも関わらずだ。 それについて私の見解は、コーディングでCSSボックスモデルを意識していないためではないかと考えている。 CSSボックスモデルは、スタイルレイアウトするうえでとても重要な概念で、Webサイトコーディングにおいて必要不可欠な知識だといえる。 ボックスモデル知識の有無がコーディングクオリティに影響するし、もしマスターすることができれば、あなたのマークアップ能力が大きく向上するだろう。 このエントリーは、CSSボックスモデルの理解を深めてもらうことが目的である。 ボックスモデルについて ボックスモデルとは、矩形からなる領域のこと。文章や画像などのコンテンツとそれを梱包する周辺領域で構成されている。 content(コンテンツ)領域 content領域は、内容物に依存して矩形領域を形成する。 文章や画像、動画があることで成り立つ包含ブロックである。つまり文章などのコンテンツ量に応じて、その存在を認めることができるか否かが決まる。もちろん空要素であってもボックスモデルは存在するわけで、目視できないというわけだ。 さらに横幅（width）と縦幅（height）のCSSプロパティ指定によってもcontent領域サイズを変えられる。 padding(パディング)領域 padding領域は、content領域を囲って矩形領域を形成して「要素内の余白」を担う。 padding領域には、上下左右に区分されていて、それぞれpadding-top,padding-right,padding-bottom,padding-leftで拡張できる。これらを省略してpaddingの一括指定でもよい。 border(ボーダー)領域 border領域は、padding領域を囲って矩形領域を形成して「要素の境界線」を担う。 そしてborder領域は、上下左右に区分されていて、それぞれborder-top,border-right,border-bottom,border-leftで拡張できる。これらを省略してborderの一括指定でもよい。 margin(マージン)領域 margin領域は、border領域を囲って矩形領域を形成して「要素外の余白」を担う。 そしてmargin領域は、上下左右に区分されていて、それぞれmargin-top,margin-right,margin-bottom,margin-leftで拡張できる。これらを省略してmarginの一括指定でもよい。 ボックスモデルのアンチパターン これまでボックスモデルについて説明してきたが、概念的なもののため、分かりづらく感じたかもしれない。説明とはそういうものだとご容赦いただきたい。 そこで既存サイトのアンチパターンで説明してみようと思う。 既存サイトは、コーダーの解釈でスタイルが済んでいて、ボックスモデルの理解の良し悪し判断できる。そしてアンチパターンならば、margin,padding,borderの関係がイメージしやすいかもしれないというわけだ。 さてアンチパターンだが、サンプルを探すのに苦労しなかった。自社サイトでいくつか発見することができたから、それを紹介しよう。 ブルーのハイライトがcontent領域で、オレンジのハイライトがmargin領域を表している。 この要素の悪いところは、marginの使い方だ。marginは「要素外の余白」を担うものだった。要素同士を離すために使うのがベスト。ところが下と左を空けるためにmarginを使っている。誤りとは言い切れないが、違和感を感じてしまう。 このようなケースなら、梱包要素でpaddingによる「要素内の余白」が適切ではないだろうか。 この要素の悪いところは上記パターンと同様に、marginの使い方だ。左の余白は梱包要素の「要素内の余白」で表現すればよい。そして上の余白は、ただただダメだ。この要素はliタグで、それを囲むulタグが存在する。ulタグの上部余白とするのがよいだろう。 このケースもmarginが問題だ。ただborder-leftを表現しなければならない都合上、padding-leftを使うわけにもいかない。paddingで左余白を付けてしまうと境界線は左付きになってしまうからだ。 このようなケースは時々に遭遇する。ボックスモデルは理解していても、妥協を余儀なくされるものかとも思うが、代替案はある。 position: relative;で基準位置から右に80pxズラして、80px分はみ出さないようにdisplay: inline-block;としている。あるいは梱包要素でoverflow: hidden;とするのもよいだろう。 ボックスモデルを説明するエントリーだから、代替案を示してはいるが、ベーシックパターンを採用しなければならないときもある。とても厄介なところだ。 だがそもそも、HTML構造でなんとかなることが少なくない。遭遇した場合は、じっくり考えてみてほしい。 この要素の悪いところは、paddingだ。要素内の余白を担うpaddingで、要素同士を離している。marginで余白を設けるべきところだ。だがそれよりもpaddingを適用しているのが、imgタグであるところが、ただただダメだ。梱包要素で余白を担当させればよい。それならばmarginだろうが、paddingだろうが使い道はあるはずだ。 ここまで来るとお分かりいただけると思うが、悪いところは、marginだ。要素同士を離すというわけでも無いのだから、marginではないことが分かる。したがって要素内の余白を担うpaddingを適用すればよい。 まとめ 便宜上「ボックスモデルのアンチパターン」という表現をしてきたが、そもそもボックスモデルにアンチパターンというものはなく、コーダーのソースコードに発生するものだ。 無思慮に取り組むと上記アンチパターンが起こり得ることを知ってもらえたならば嬉しく思うとともに、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

スライダー＆カルーセルのデザインパターンに、「左寄せ右チラ見せ」がある。画面左にピッタリ寄せて、右がわずかに見えている形態のものだが、これの実装が思いのほか面倒くさい。 左右チラ見せするプラグインならばいくつか思いつくのだが、片一方というのがなかなか候補にあがらない。これまでは前者の左右チラ見せできるプラグインで、苦労しながらもカスタマイズして片寄せを実現させてきた。カスタマイズといってもCSSの打ち消しが関の山なのだが。 そんな苦労を解消してくれそうなプラグイン「Glide.js」を提案させてほしい。 Glide.jsとは Glide.jsは、スライダー＆カルーセルライブラリだ。モジュール方式の実装により他のJavaScriptライブラリに依存しない。さらにvanilla JavaScriptおよびES6で記述された当該ライブラリは、極めて軽量で、高速に動作するとされている。 特徴 他ライブラリに依存しない モジュール読み込みができる vanilla JavaScriptで極めて軽量 MITライセンス インストール Glide.jsの導入は、3種類の方法がある。プロジェクトの都合でいずれかを選択するとよいだろう。 npm ダウンロード https://github.com/glidejs/glide CDN https://cdn.jsdelivr.net/npm/@glidejs/glide https://unpkg.com/@glidejs/glide 使い方 Glide.jsを使うには、JavaScriptとStylesheet、スライダーを構成するHTMLの記述が必要となる。あなたのコーディングルールに従い、対象ページに配置してもらえると有り難い。 なおnpmでインストールしたケースを想定している。ローカルに設置している場合は、ファイルパスを修正してほしい。 Stylesheet HTML JavaScript Glide.jsの必要最低限の記述は以上となる。果たして、スタンダードなスライダーを実装することができた。 「左寄せ右チラ見せ」にする そしてこのエントリー主題は「左寄せ右チラ見せ」だった。引き続き「左寄せ右チラ見せ」のカスタマイズをご覧いただこう。 左右の表示幅を制御するにはpeekプロパティを使用する。peekには、beforeとafterを与えることで、左右の見え幅を調整できる。上の例では、beforeに左側の見え幅を、afterに右側の見え幅を指定して、左寄せ右チラ見せを再現している。 まとめ Glide.jsには依存関係がない。すでに前述しているのだが、これがとても良い。jQueryプラグインのようにjQueryがなければ使えないものと違って、Glide.js単独でスライダーorカルーセルを実装できるのだ。 これは昨今のフロントエンド開発において、非常に重要な要素ではないだろうか。一貫して「jQueryプラグインで！」ってわけにもいかないことは理解してもらえると思う。Reactを使うケースもあれば、Vue.jsが向いているときもある。 それぞれの状況に応じてスライダー&カルーセルプラグインを選定しておくのも悪くないが、Glide.jsならば一貫性のあるソースコードが書けるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コーディングで手間がかかる要素といえば、フォーム周りではないでしょうか？ブラウザ固有のUIがあったり、ユーザーの操作によって状態に変化があったりと一筋縄にはいきません。 そのような訳で、フォーム周りのコーディングが面倒だと感じている人は少なくないはずです。私がその筆頭に君臨します。デザインに引っ張られることで、毎案件で一貫性がないソースコードを披露してしまう始末。大概フォーム周りは後回しにしてきました。 それが最近ようやく、まとまりのあるコーディングをするようになったと感じています。その一端をご覧ください。 イディオムとは いわゆる慣用句のことで、プログラミングやマークアップにおける定型文をイディオムといいます。 慣用句は、ふたつ以上のものが結合して、まったく別の機能を持つことを表します。 したがって、小さな要素の集まりからなるコンポーネント単位のソースコードも同様です。 きっとあなたも決まった書き方をするコンテンツがあると思います。それがイディオムです。 イディオム集 イディオム集には、input,select,textarea要素を用意しました。スタイルはSCSS形式で記述しています。「いますぐ使える」を目的としたため、コピペで使える状態です。したがって共通している箇所は適宜修正する必要があります。またサイズやボーダー、カラーはデザインに合わせて修正してください。 Input要素 テキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. サーチテキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. チェックボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. ラジオボタン See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen.…

このエントリーでは、flexboxでリキッドレイアウトを表現する方法をお伝えします。可変カラム＋固定カラムが横並びになるレイアウトにするとき使えるスタイルです。 リキッドレイアウトとは リキッドレイアウトは、可変カラムと固定カラム構成の名称です。ブラウザのサイズやデバイスの違いを柔軟に表示する概念です。 2カラム、あるいは3カラム構成からなるレイアウトが一般に見られるのではないでしょうか。 たとえば、サイドメニューが固定幅で、メインコンテンツが可変幅などが代表的です。 flexboxのリキッドレイアウトが使えるケース レスポンシブデザインに最適 固定、可変する要素があるとき フォームのラベルと入力要素が並ぶとき 使い方（2カラム） 2カラムレイアウトを例にHTML/CSSを記述します。各々のレイアウトに置き換えてご覧ください。 HTMLでは、梱包要素のwrapperクラスと固定カラムのsideクラス、可変カラムのmainクラスが確認できます。 CSSでは、まず梱包要素のwrapperクラスにdisplay: flex;を適用することでフレックスコンテナボックスにすることが目的です。それにより小要素は横並びになります。 続いて、sideクラスにwidth: 300px;の横幅を与えて固定値とします。 最後に、mainクラスにflex: 1;の指定で可変を実現します。flexプロパティはflexのスタイルカスタマイズする省略プロパティです。CSSショートハンドといいます。リキッドレイアウトを実現するにあたって厳密にプロパティを指定する必要性が無いため割愛しますが、気になる方は別途調べるとよいでしょう。[flex – CSS: カスケーディングスタイルシート] まとめ 以上がflexboxでリキッドレイアウトにする方法でした。必要なHTMLは、梱包要素と固定カラム、可変カラムです。必要なCSSは、梱包要素にdisplay: flex;と固定カラムにwidth: ~~px;、可変カラムにflex: 1;と覚えてください。 きっと活用できるケースがあると思い記事にしました。マークアップの一助となれば幸いです。