サイト構築 -CSS

[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を加えるだけの簡単仕様。ホバーなどの操作

...記事の続きを読む

[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック

Post on:2018年7月11日

marginの相殺について、まずはクイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいく

...記事の続きを読む

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

Post on:2018年7月10日

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

[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法

Post on:2018年7月4日

CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。 幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した

...記事の続きを読む

top of page

©2019 coliss