ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

CSS3

CSS3で困っている人のために情報を発信します。

CSSは、HTMLで定義されたウェブコンテンツに装飾を付ける技術です。

スマホやタブレットなどいろいろなデバイスに対応する(レスポンシブデザイン)ことが必須になって、ますます専門性・重要性が高まっています。

CSSはプログラミングでないことに注意。(あくまで定義ファイルのフォーマット)

かんたんCSS3 flex, 左(上)・中央・右(下)に寄せて余白を操作する

css3 image

CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。

アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。

今回はアイテムの余白を操作します。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

続きを読む

かんたんCSS3 flex, アイテムの拡大・縮小・サイズを操作する

css3 image

CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。

アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。

今回はアイテムサイズの操作方法です。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って説明します。

続きを読む

かんたんCSS3 order, フレックスアイテムの並びの順序を変える

css3 image

CSS3では、フレックスで配置を変える方法がたった数行でできるようになりました。

そのほかにもいろいろなことができます。今回は、フレックスで配置されたアイテムの表示順を変える方法です。

2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

続きを読む

かんたんCSS3, ぜんぶ解説。誰でも分かるflexの使い方

css3 image

CSS3では、要素の配置を変える方法がたった数行でできるようになりました。

フレックスです。これで、ナビゲーション(メニュー、パンくずリスト)などはとてもかんたんに作れます。

Webアプリなど高度なコンポーネント配置の操作でも使えます。

そのフレックスの全機能を解説します。

続きを読む

かんたんCSS3 flexを使ってコンテンツを自由に操ろう!

css3 image

これまで、コンポーネントを横に配置するのは面倒でした。インラインを使ったりクリアしないといけなかったり。

CSS3ではたった数行でコンポーネントの配置を変えられます。

フレックスです。ナビゲーション(メニュー、パンくずリスト)などかんたんに作れます。

まずは、フレックスのシンプルな使い方から説明します。

続きを読む

かんたんCSS3 flex, 1行に詰めたり折り返しを指定する

css3 image

CSS3のFlexでは、ほんの数行でコンポーネントの配置を変えられるようになりました。

また配置だけでなく関係する細かい設定もたくさんあります。

今回はコンテンツの行詰め・折り返しの方法です。

2018/12現在、ほぼすべてのブラウザに対応しています。わかりやすく順を追って解説します。

続きを読む