サイト構築 -CSS

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css

Post on:2018年9月20日

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており

...記事の続きを読む

[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック

Post on:2018年9月19日

フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。 シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビ

...記事の続きを読む

CSSでスクロールのスナップが可能に!scroll-snapプロパティの基礎知識と便利な使い方

Post on:2018年9月14日

CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装

...記事の続きを読む

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

Post on:2018年9月11日

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク

...記事の続きを読む

CSS GridとFlexboxでの実装で役立つ!各プロパティの役割が、ぱっと見てすぐ分かる簡単便利なチートシート

Post on:2018年9月10日

CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ? という時

...記事の続きを読む

[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のスクロールバーを考慮する必要がありますか? サイトのナビゲーションやページコントロールはどうでしょうか? それらは計算

...記事の続きを読む

top of page

©2019 coliss