サイト構築 -CSS

Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説

Post on:2017年3月3日

普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex(収縮する)の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイ

...記事の続きを読む

[CSS]多様化したデバイスに対応!CSSで使いやすいブレイクポイントを的確に定義する方法

Post on:2017年2月23日

スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多

...記事の続きを読む

[CSS]超軽量で快適!スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar

Post on:2017年2月22日

デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメ

...記事の続きを読む

最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ

Post on:2017年2月15日

Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、

...記事の続きを読む

[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート

Post on:2017年2月13日

背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみる

...記事の続きを読む

[CSS]レスポンシブ対応のグリッドの幅は? カラム数は? 溝のサイズは? グリッド作成に役立つ万能ツール -Graaf

Post on:2017年2月13日

人気が高いWebサイトやフレームワークなどで、実際に使用されているグリッドをページ上にオーバーレイで重ねて表示できるデザイン用のツールを紹介します。 既存のグリッドだけでなく、幅・カラム数・溝の数値を簡単に変更できる優れ

...記事の続きを読む

[CSS]「calc()」を使うとスゴイ便利!ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ

Post on:2017年2月9日

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサ

...記事の続きを読む

Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works 

Post on:2017年2月6日

Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹

...記事の続きを読む

[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ

Post on:2017年2月3日

長方形ではないヘッダやコンテンツが最近増えてきました。その一つとしてヘッダの下、コンテンツを区切るラインを斜めにすることで、簡単にデザインの印象を変えることができます。一見シンプルに見えますが、実装するには慎重を要します

...記事の続きを読む

[CSS]ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size

Post on:2017年1月31日

フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。 CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポー

...記事の続きを読む

 Prev 1 2 ... 4 5 6 ... 88 89 Next

top of page

©2017 coliss