サイト構築 -CSS
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に
Post on:2018年9月11日
a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク
[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック
Post on:2018年8月28日
何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイ
CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック
Post on:2018年8月23日
CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin:
[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック
Post on:2018年8月21日
テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介しま
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集
Post on:2018年8月10日
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
Post on:2018年8月8日
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算
[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール
Post on:2018年8月3日
Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最
[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
Post on:2018年7月27日
CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身
サイトマップの実装で面倒な階層を繋ぐラインも簡単に実装できるサイトマップ用スタイルシート -Slickmap CSS
Post on:2018年7月26日
Flexboxで実装された美しいサイトマップを簡単に実装できるビジュアル サイトマップ ツールを紹介します。サイトマップはレスポンシブ対応で、第4階層までのコンテンツに対応しています。 階層を繋ぐラインなど、実装が面倒な
制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt
Post on:2018年7月23日
Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼We
sponsors
