上級者 - HTML&CSSの応用

ウェブサイトにおけるフロントエンドのHTML・CSSを使ったコンテンツについて情報を発信します。

このレベルでは、何かを言える立場にありません。もしかしたら役に立つかもしれない情報を発信するだけです。

HTMLとCSSだけで簡単に作る。軽量なON/OFF スイッチ

html5 css3 image

javaScriptを使わずにHTML&CSSだけでON/OFFスイッチを作ります。

Webのサービス・アプリの設定画面でよく見るやつで、トグルボタン、トグルスイッチとも言います。

だれでも分かるように、サンプルコードを少しずつ作りながら説明します。

続きを読む

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

html5 css3 image

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

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

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

続きを読む

HTML&CSS: 【新旧比較】レスポンシブ対応の基本フォーマットを作成した

html5 css3 image

HTMLとCSSだけでつくった、レスポンシブに対応したWebページの基本フォーマットを全面的にアップデートしました。

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

の4パターンを用意しています。

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

続きを読む

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

html5 css3 image

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

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

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

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

続きを読む