サイト構築 -CSS

[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ

Post on:2016年9月12日

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries(メディアクエリ)の書き方、ブレイクポイントの最適な

...記事の続きを読む

FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide

Post on:2016年8月31日

CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利

...記事の続きを読む

最近のWeb制作で利用されている、リセットCSSとノーマライズCSSのまとめ

Post on:2016年8月29日

HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ(正常化)するノーマライズCSS。 定番のスタイルシートから、最近リリースされたものまで、

...記事の続きを読む

CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack

Post on:2016年8月19日

CSSでフォントの指定をする時、Windowsだとうまく表示されるけど、Macだとダメ、またその逆のケースもあります。 Webページやアプリでフォントを安全に使うためには、OSにインストールされているフォントを知ることで

...記事の続きを読む

[CSS]シンプルなHTMLで実装できる!パネルの背景画像だけをズームさせるテクニック

Post on:2016年8月17日

パネルをホバーすると画像だけがズームするエフェクト、最近のWebサイトでよく見かけますよね。 実装方法はいろいろありますが、JavaScriptを使わず、シンプルなHTMLで実装するCSSのテクニックを紹介します。 Zo

...記事の続きを読む

Flexboxはすごい便利!最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートのまとめ

Post on:2016年8月8日

2016年1月12日にIEの古いバージョンのサポートが終了して半年が過ぎ、IEの対象バージョンをIE11とEdgeに、そしてFlexboxの導入をしている制作者も多いと思います。 Flexboxを使って、最近のレイアウト

...記事の続きを読む

[CSS]見出しや本文やボタンなど、要素の両側にすぅーと天地中央のラインを配置するテクニック

Post on:2016年8月4日

見出しや本文やボタンなど、一行でも複数行でも要素の両側にすぅーと天地中央のラインを配置するスタイルシートのテクニックを紹介します。

[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか

Post on:2016年7月29日

小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にする時、通常はwidthとmax-widthを使用します。 指定方法は「width: 100%; max-width: 600px;」でしょうか。 この

...記事の続きを読む

CSSのすごいアイデアから実用的なテクニックまで!スタイルシートの最新テクニックのまとめ

Post on:2016年7月26日

最近のWebサイトやアプリで見かけるアニメーションを使った操作が気持ちいいUIエレメントを実装するスタイルシートを紹介します。 デモではHTMLやCSSのコードが掲載されているので、コピペで簡単に利用できます。 ※一部J

...記事の続きを読む

レスポンシブ対応、検索フォームのデザイン・実装するアイデアのまとめ

Post on:2016年7月20日

CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。

top of page

©2025 coliss