サイト構築 -CSS

CSS Flexbox の各プロパティの使い方を詳しく解説

Post on:2018年3月27日

Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実

...記事の続きを読む

[CSS]こんなやり方があるとは!ボタンのシャドウに2色の美しいグラデーションを与えるテクニック

Post on:2018年3月27日

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPur

...記事の続きを読む

[CSS]知っていると便利な「calc()関数」の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など

Post on:2018年3月23日

calc()関数を使用すると、レスポンシブ対応ページのレイアウトや要素の配置、ビューポート幅に基づいた相対的なフォントサイズの定義などが期待通りに実装できます。 Webページやスマホアプリの実装に役立つcalc()関数の

...記事の続きを読む

CSSの作業効率がアップする、少し高度な使い方のまとめ

Post on:2018年3月19日

Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips

px, %, em, rem, vw, vhなど、CSSの異なる単位が互いにどのように変換されているかが分かる便利ツール

Post on:2018年3月7日

絶対単位のpxをはじめ、%, em, remなどの相対単位、vw, vhなどのビューポートの幅と高さに基づいた単位などが、お互いにどのように変換されているかが分かる便利ツールを紹介します。 CSS unit conver

...記事の続きを読む

[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ

Post on:2018年3月2日

子要素を親要素の左右中央に配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは天地、上下の中央で

...記事の続きを読む

こういうのを待ってた!日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype

Post on:2018年2月28日

文字の指定をいろいろ調整できる無料ツールは他にもありますが、ようやく日本語フォントに対応したものがリリースされていたので、紹介します。 文字のサイズやline-heightをはじめ、見出しレベルによるサイズの拡大率など、

...記事の続きを読む

CSSの基本: CSSを記述するルールで、重要な構文と重要ではない構文

Post on:2018年2月27日

CSSを使用する際には、他の言語と同様に、構文を正しく理解しておく必要があります。CSSの構文は難しいものではありませんが、見落とされがちな小さいポイントがいくつかあります。その中でも特に、一部の文字とその配置は非常に重

...記事の続きを読む

[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック

Post on:2018年2月26日

パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしま

...記事の続きを読む

[CSS]簡単で便利!ページで使用されていないCSSのセレクタを見つける無料ツール -Unused CSS

Post on:2018年2月19日

指定したWebサイトで、使用されていないCSSのセレクタを自動で検出する無料オンラインツールを紹介します。 ページ内部のリンクも再帰的に調査し、複数のページにも対応しています。 Unused CSS finder

top of page

©2019 coliss