サイト構築 -CSS

CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール

Post on:2020年5月22日

レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシ

...記事の続きを読む

TwitterのUIデザインで見つけたCSSのテクニックのまとめ

Post on:2020年5月21日

TwitterのUIデザインで見つけたCSSのテクニックを解説した記事を紹介します。 さまざまなコンテンツが入る可能性のあるコンポーネント、コンテンツが長い・短い場合、アイテムの数などを想定した興味深いテクニックが解説さ

...記事の続きを読む

CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場

Post on:2020年5月18日

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか? テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and &

...記事の続きを読む

CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説

Post on:2020年5月14日

Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なる

...記事の続きを読む

Neumorphism(ニューモーフィズム)のCSSはこれで簡単!スタイルシートを生成できるジェネレーター

Post on:2020年5月10日

ニューモーフィズムとはで紹介したように、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーターを紹介します。 カードやボタン、またフォームなどにも適した

...記事の続きを読む

Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ

Post on:2020年4月28日

先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの

...記事の続きを読む

CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css

Post on:2020年4月23日

ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与える

...記事の続きを読む

これでもうCSSのクラス名は迷わない!BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet

Post on:2020年4月17日

Webページやスマホアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介します。 BEM Naming Cheat Sheet

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど

Post on:2020年4月14日

CSSの「auto」は非常に便利な値で、マージンやサイズ(width, height)や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。

...記事の続きを読む

サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック

Post on:2020年4月13日

サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線の

...記事の続きを読む

top of page

©2021 coliss