サイト構築 -CSS

保存しておくと便利!CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集

Post on:2018年8月10日

ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用

...記事の続きを読む

[CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法

Post on:2018年8月8日

ビューポートを使った単位(vw, vhなど)は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか? サイトのナビゲーションやページコントロールはどうでしょうか? それらは計算

...記事の続きを読む

[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール

Post on:2018年8月3日

Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最

...記事の続きを読む

[CSS]pointer-eventsプロパティですごい便利に!クリックやホバーのターゲットになる要素を変更するテクニック

Post on:2018年7月27日

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身

...記事の続きを読む

サイトマップの実装で面倒な階層を繋ぐラインも簡単に実装できるサイトマップ用スタイルシート -Slickmap CSS

Post on:2018年7月26日

Flexboxで実装された美しいサイトマップを簡単に実装できるビジュアル サイトマップ ツールを紹介します。サイトマップはレスポンシブ対応で、第4階層までのコンテンツに対応しています。 階層を繋ぐラインなど、実装が面倒な

...記事の続きを読む

制作者はなんと15歳のイケメン!今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt

Post on:2018年7月23日

Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者(@fmaldonadoy)は15歳のデザイナー兼We

...記事の続きを読む

[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート

Post on:2018年7月20日

見出しのhn要素、本文のp要素のfont-sizeとline-heightをデスクトップとスマホに適したサイズに自動的に算出するためのSCSSファイルを紹介します。 サイズ指定の単位には「rem」を使用しており、ルート要

...記事の続きを読む

このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル

Post on:2018年7月19日

プレースホルダーのテキストがフォーム入力時にラベルに移動するアニメーションは、いろいろな実装方法があります。最近ではCSSの疑似クラスを使った実装がでてきましたが、SVGを加えると更に楽しいアニメーションにできます。 こ

...記事の続きを読む

これはかっこいい!要素がふわりと浮かんでいるような美しいシャドウを与えるスタイルシート -Box-shadows.css

Post on:2018年7月17日

Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。 htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作

...記事の続きを読む

不思議!? div要素一つで同じスタイルなのに、すべてのブラウザで見た目が異なるスタイルシート

Post on:2018年7月10日

div要素一つで同じスタイルなのに、IE, Edge, Chrome, Safari, Firefoxなどの各ブラウザで見た目が全く異なるスタイルシートを紹介します。

top of page

©2018 coliss