他言語サイト
翻訳はみつかりませんでした

CSS3

CSSは、HTMLで定義されたウェブコンテンツに装飾を付ける技術です。 スマホやタブレットなどいろいろなデバイスに対応する(レスポンシブデザイン)ことが必須になっていることで、ますます専門性・重要性が高まっています。 そのCSS3について困っているという人のために情報を発信します。

HTMLとCSSだけで作る軽量サンプルのまとめ(:checked疑似クラス)

html5 css3 image

CSS3のchecked疑似クラスを使えば、JavaScriptを使わない、軽量なコンポーネントを作ることができます。

閉じるボタンやタブ機能などのサンプルを用意しました。これは処理を制御するときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

HTMLとCSSだけで簡単に作る。軽量な開く・閉じる切り替えボタン

html5 css3 image

HTMLとCSSだけで『開く・閉じる』の切り替えボタンを簡単に作る方法をご紹介します。このボタンは、画面を遷移しないでコンテンツを開いたり閉じたりします。JavaScriptは使いません。

これは、コンテンツをコントロールするときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

HTML&CSS アイコンフォントFontAwesome 5を数秒で使えるようにする方法

有名なWebアイコンフォントにFontAwesomeがあります。アイコン画像をつくる必要がないのでとても便利です。

Twitter, Facebookなど、有名な企業や製品のロゴも無料で使えます。また、CSSで自由に色を設定することもできます。

バージョン5からLINEのアイコンも追加されました。

今回は、FontAwesomeの設定方法から使い方まで、ソースコードサンプルを使いながら、だれでも分かるようにかんたんに説明します。

続きを読む

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

css3 image

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

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

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

続きを読む

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

css3 image

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

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

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

続きを読む

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

css3 image

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

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

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

続きを読む

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

css3 image

CSS3のフレックスでは、コンポーネントの配置を変える方法がほんの数行でできるようになりました。

そしてフレックスは、配置だけでなくそれに関係する細かい設定もたくさんあります。

今回はコンテンツの行詰め・折り返しの方法です。2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

続きを読む

かんたんCSS3 flex サクッと並びとその方向を変える方法

css3 image

CSS3では、フレックスでコンポーネントの並び方を変える方法がたった2行でできるようになりました。

もう、『inline-block』『float』を使う必要はありません。フレックスには、配置以外にもいろいろな設定ができます。

今回は、フレックスの基本になる『並びとその方向を変える方法』を説明します。

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

続きを読む

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

css3 image

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

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

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

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

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

これを書く一番の理由は『自分の教科書』のためです。よく忘れるので、『ほかのサイトを毎回見るなら自分で書いてしまえ』になりました。

続きを読む
top
この記事を気に入ったらぜひシェアも!!