HTML5

HTML5で困っている人のために情報を発信します。 HTMLは、ウェブサイトの構造化文書を定義します。ボタンなど機能が拡張して文書以外もあるので、一般的にはコンテンツと言います。 HTML5は、2014年10月28日にW3Cにより勧告されたHTMLのバージョンで、最新は2017年12月7日にHTML5.2が勧告されました。 HTMLはプログラミングでないことに注意。(あくまで文書のフォーマット)

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

html5 css3 image

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

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

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

続きを読む

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

html5 css3 image

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

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

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

続きを読む

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ページのパフォーマンスを上げることができます。

続きを読む

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

html5 css3 image

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

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

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

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

続きを読む

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

html5 css3 image

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

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

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

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

続きを読む

初心者でも分かる解説。HTMLってなんだ? HTML5とは?

html5 image

HTMLの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

HTMLは、CSS, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。

これを読めば、HTMLの役割、HTML5の『5』の意味も分かります。

『いまさら見直すのは恥ずかしい』という人にもオススメです。

続きを読む

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