サイト構築 -CSS

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

Post on:2017年7月11日

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

...記事の続きを読む

[CSS]ワンランク上に!Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures

Post on:2017年7月10日

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositio

...記事の続きを読む

[CSS]最近のレスポンシブ対応サイトで使われているレイアウトのアイデア・実装方法のまとめ

Post on:2017年7月3日

レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カー

...記事の続きを読む

CSSが苦手な人、CSSを書く時間がない人に最適!見栄えのよいページを簡単に作成できるスタイルシート -sakura

Post on:2017年6月28日

CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。 CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。 既存のHTMLに一行、もしく

...記事の続きを読む

[CSS]テキストが長いとレイアウトが崩れる!予期せぬコンテンツに対応するためのスタイルシートのテクニック

Post on:2017年6月23日

テキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。 レイアウトが崩れてしまう予期せぬコンテンツに対応する

...記事の続きを読む

[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip

Post on:2017年6月22日

見た目は普通のツールチップ。軽快なアニメーションで表示されるのも、表示方向を指定できるのも探せばあると思います。 しかしその中身はピュアCSS、1kbの超軽量スタイルシートで実装された、スマホもサポートされたツールチップ

...記事の続きを読む

CSSの引き出しを増やしておこう!最近見かけたスタイルシートのアイデア・テクニックのまとめ

Post on:2017年6月20日

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials

CSSの関数はどんどん便利になっている!minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

Post on:2017年6月14日

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcal

...記事の続きを読む

[CSS]デザイナーには透明に見えてしまう背景を実装するスタイルシートのテクニック

Post on:2017年6月12日

透明が見える、というのはおかしな日本語ですが、どこからどう見ても透明な背景を実装するスタイルシートのテクニックを紹介します。 透明な背景を使いたい時用に、スニペットに登録しておくと便利です。 サンプル: 透明に見える背景

...記事の続きを読む

CSS flexboxのレイアウトで困った時に使えるスタイルシートのテクニックまとめ

Post on:2017年6月6日

flexboxを使ってレイアウトを実装するのは、何年もの間floatやclearfixを使っていた人に新しい驚きと喜びを与えます。主要なブラウザすべてにサポートされ、採用するプロジェクトも増えてきました。 しかし、以前の

...記事の続きを読む

 Prev 1 2 3 4 5 ... 89 90 Next

top of page

©2017 coliss