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

CSS3

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

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

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

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

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

css3 image

CSS3では、フレックスを使ってたった2行でコンポーネントの並びを変えられます。

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

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

続きを読む

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

html5 css3 image

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

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

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

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

続きを読む

かんたんHTML&CSS hr, 水平線の太さ・色などの変更方法

html5 css3 image

HTMLの水平線を表示するのはかんたんで、hrタグを書くだけです。CSSでデザインの変更もできます。

太さや色、グラデーション、画像などサンプルを作りながら、かんたんに誰にも分かるように解説します。

デフォルトのhrタグのしくみもくわしく解説します。

続きを読む

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

html5 css3 image

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

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

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

続きを読む