サイト構築 -CSS
[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を加えるだけの簡単仕様。ホバーなどの操作
[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などの各ブラウザで見た目が全く異なるスタイルシートを紹介します。
sponsors
