サイト構築 -CSS

[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

normalize.css 8.0.0がリリース!古いブラウザはサポート対象外になり、大幅に軽量化

Post on:2018年2月16日

利用しているWeb制作者も多いと思います。 normalize.cssがアップデートし、8.0.0がリリースされました。 IE9以下をはじめとする古いブラウザのサポートがなくなったので、大幅に軽量化されています。v6.0

...記事の続きを読む

[CSS]便利なのが登場!normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize

Post on:2018年2月13日

ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートを紹介します。 「box-sizing: border-box;」の採用など、今の実装方

...記事の続きを読む

CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利!効果的に使用するポイントのまとめ

Post on:2018年2月8日

CSS Gridは今までに出来なかったレイアウトを実装するだけでなく、既存レイアウトをより簡単に実装する能力も備えています。サポートブラウザも十分になり、そろそろ既存レイアウトの実装方法を見直すタイミングかもしれません。

...記事の続きを読む

最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ

Post on:2018年2月2日

ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。 スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがス

...記事の続きを読む

最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ

Post on:2018年1月26日

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのもの

...記事の続きを読む

top of page

©2018 coliss