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

CSS3

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

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

html5 css3 image

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

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

続きを読む

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

css3 image

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

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

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

続きを読む

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

css3 image

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

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

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

続きを読む

かんたんCSS 言語別にスタイルを適用する(:lang疑似クラス)

css3 image

マルチ言語サイトで、同じスタイルをそれぞれ用意するのではなく、同じものを使いたいときがあります。でも、CSSに文字列を書いてある場合どうしたらいいのでしょうか?

CSSでは、サイトの言語別に分けてスタイルを適用させる方法があります。サンプルコードを使って、かんたんに誰でも分かるように解説します。

続きを読む

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

html5 css3 image

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

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

続きを読む

かんたんCSS HTML抜きで要素を追加する(::before, ::after)

css3 image

::before, ::afterはCSSの疑似要素で一番使うものです。HTMLのタグから作られる要素ではなく、CSSで新たに要素を追加します。HTMLに書くまでもないかんたんな要素を作るときに使います。

その::before, ::afterについて、かんたんに誰でも分かるようにサンプルコードを使いながら解説します。

(::before, ::afterでしか使えないcontentプロパティも説明します。)

続きを読む

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

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

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

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

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

続きを読む

HTML5&CSS3: レスポンシブ対応の基本フォーマットを作成した

html5 css3 image

HTMLとCSSだけで作る、レスポンシブに対応したWebページの基本フォーマットを用意しました。

  • 1カラム
  • 2カラム(左メニュー、右メニュー)
  • 3カラム(両端メニュー)

の4パターンがあります。

cssクラスを1か所変えるだけでパターン変更ができて、スマホになるとサイドメニューが下の方に表示されるようにしています。

続きを読む

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

html5 css3 image

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

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

続きを読む

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

html5 css3 image

HTMLとCSSだけでタブのメニューを簡単に作る方法をご紹介します。このタブメニューは、画面を遷移しないで表示内容のコンテンツを切り替えます。JavaScriptは使いません。

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

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