CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。
アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。
今回はアイテムの余白を操作します。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
続きを読むかんたんCSS3 flex 左(上)・中央・右(下)に寄せて余白を操作する
中級者 - CSS3の技術情報
CSSは、HTMLで定義されたウェブコンテンツに装飾を付ける技術です。
スマホやタブレットなどいろいろなデバイスに対応する（レスポンシブデザイン）ことが必須になっていることで、ますます専門性・重要性が高まっています。
いま、CSSはレベル3まで策定・勧告されています。そのCSS3について情報を発信します。
自分で情報を探しながらできますが、なかなかスムーズに答えにたどり着かない人に向けて発信します。
経験が足りないだけで、遅かったり、失敗しても自信をなくす必要はありません。いまは、大きくなるために技術を知って試す時期です。
むしろたくさん悩んで、フリーズして、失敗してください。その中から最適な答えが自然と身につきます。
かんたんCSS3 flex アイテムの拡大・縮小・サイズを操作する
CSS3のフレックスは、コンポーネントの配置を変える便利な機能です。
アイテムのサイズや余白サイズが自動で配分されるので、アイテムサイズと余白の操作はとても重要です。
今回はアイテムサイズの操作方法です。いま、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
続きを読むかんたんCSS3 order フレックスアイテムの並びの順序を変える
CSS3では、フレックスで配置を変える方法がたった数行でできるようになりました。
そのほかにもいろいろなことができます。今回は、フレックスで配置されたアイテムの表示順を変える方法です。
2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
続きを読むかんたんCSS3 flex 1行に詰めたり折り返しを指定する
CSS3のフレックスでは、コンポーネントの配置を変える方法がほんの数行でできるようになりました。
そしてフレックスは、配置だけでなくそれに関係する細かい設定もたくさんあります。
今回はコンテンツの行詰め・折り返しの方法です。2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
続きを読むかんたんCSS3 flex サクッと並びとその方向を変える方法
CSS3では、フレックスでコンポーネントの並び方を変える方法がたった2行でできるようになりました。
もう、『inline-block』『float』を使う必要はありません。フレックスには、配置以外にもいろいろな設定ができます。
今回は、フレックスの基本になる『並びとその方向を変える方法』を説明します。
2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
続きを読むかんたんCSS3 ぜんぶ解説。誰でも分かるflexの使い方
CSS3では、要素の配置を変える方法がたった数行でできるようになりました。
フレックスです。これで、ナビゲーション（メニュー、パンくずリスト）などはとてもかんたんに作ることができます。
Webアプリなど高度なコンポーネント配置の操作でも使えます。
そのフレックスの全機能を解説します。
2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
これを書く一番の理由は『自分の教科書』のためです。よく忘れるので、『ほかのサイトを毎回見るなら自分で書いてしまえ』になりました。
続きを読むかんたんCSS3 flexを使ってコンテンツを自由に操ろう！
CSS3では、コンポーネントの配置を変える方法がたった数行でできるようになりました。
フレックスです。これで、ナビゲーション（メニュー、パンくずリスト）などはとてもかんたんに作ることができます。
Webアプリなど高度なコンポーネント配置の操作でも使えます。
まずは、フレックスの使い方からです。2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。
続きを読むかんたんCSS 言語別にスタイルを適用する（:lang疑似クラス）
マルチ言語サイトで、同じスタイルをそれぞれ用意するのではなく、同じものを使いたいときがあります。でも、CSSに文字列を書いてある場合どうしたらいいのでしょうか？
CSSでは、サイトの言語別に分けてスタイルを適用させる方法があります。サンプルコードを使って、かんたんに誰でも分かるように解説します。
続きを読むかんたんCSS HTML抜きで要素を追加する(::before, ::after)
::before, ::afterはCSSの疑似要素で一番使うものです。HTMLのタグから作られる要素ではなく、CSSで新たに要素を追加します。HTMLに書くまでもないかんたんな要素を作るときに使います。
その::before, ::afterについて、かんたんに誰でも分かるようにサンプルコードを使いながら解説します。
（::before, ::afterでしか使えないcontentプロパティも説明します。）
続きを読むCSS position: absoluteとrelativeの違いでページが大きく崩れる
Webコンテンツの位置を変更するため、CSSでは必ず使うpositionプロパティ。しかし、absoluteとrelativeを『絶対・相対位置を指定する』という知識だけだと、ページの表示内容を大きく崩すことがあります。
それを防ぐためにpositionプロパティの元々持っている挙動についてご紹介します。
- 1 / 2
サイトにはこんな記事があります
最近更新された記事
人気の記事
IT系で出していたものをとりあえず削除
どれも、やりきれば一人前というものではありませんが、本気でやらないと必ず挫折します。そして、入門編としては高めの費用がかかるものがありますが、『独学よりも数倍早く習得するための時間を買う』と考えたほうが良いです。数ヶ月後、『お金を払って行くこともなかった』と思えれば大成功です。
