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

CSS3

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

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

html5 css3 image

HTMLとCSSだけで『開く・閉じる』の切り替えボタンをかんたんに作る方法をご紹介します。

画面を遷移しないでコンテンツを開閉します。JavaScriptは使いません。

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

続きを読む

HTMLとCSSだけで簡単に作る。軽量な閉じる・すべて表示ボタン

html5 css3 image

HTMLとCSSだけで『閉じる・すべて表示』ボタンをかんたんに作る方法をご紹介します。

このボタンは、画面を遷移しないでコンテンツを閉じたり追加表示します。JavaScriptは使いません。

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

続きを読む

HTMLとCSSだけで簡単に作る。軽量なタブで表示内容を切り替え

html5 css3 image

HTMLとCSSだけでタブのメニューをかんたんに作る方法をご紹介します。

このタブメニューは、画面を遷移しないで表示内容のコンテンツを切り替えます。JavaScriptは使いません。

これは、タブを切り替えるときに、Webサーバーにリクエストを送信しないので、Webページのパフォーマンスを上げることができます。

続きを読む

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

html5 css3 image

CSS3のchecked疑似クラスを使えば、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現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

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