HTML5
枠の内側に影をつける 枠を立体的なデザインにする ２つ目の影を追加する 枠の内側に影をつける 枠内のすべての辺に影をつける ソースコード【 CSS 】 article section { clear: both; border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px 18px 1…
背景画像を表示する ソースコード【 CSS 】 #container { width: 900px; margin: 0 auto; background-color: #fff; padding: 0 40px; -webkit-box-shadow: 0 0 30px #bbb; box-shadow: 0 0 30px #bbb; background-image: url(images/circle.png); } 背景画像…
背景と区切り線の色を半透明にする 背景色を半透明にする RGB（赤, 緑, 青）で色指定：rgb(1, 122, 205) 不透明度（alpha）：a(0.3) ソースコード【 CSS 】 nav ul li a:hover { background-color: rgba(1, 122, 205, 0.3); } 区切り線の色をRGBで指定し半透…
サイト名をリボン状に表示する フッターを罫線で区切って表示する ソースコード【 CSS 】 footer { clear: both; color: #888; margin: 25px 0 0 0; padding: 8px 0 8px 0; border-top: solid 1px #aaa; } small { font-size: 0.75em; font-style: normal; t…
ページ全体のデザイン article、microdataを記述した例 角丸とグラデーションの編集前の設定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>森の工房についてGreen Leaf</title> <link rel="stylesheet" href="css/style56_2.css" media="all"> </link></meta></head></html>
CSS3でナビゲーションバーを角丸にする 角を丸くする ソースコード【 CSS 】 nav ul { font-size: 0.75em; margin: 0 0 10px 0; height: 30px; background-color: #005087; border-radius: 6px; } 角丸が全体に反映されない原因のリンクの背景色を削除する …
枠に影をつける 「box-shadow」プロパティ ソースコード【 CSS 】 article header { border: solid 1px #aaa; margin: 20px 0 10px 0; padding: 18px; border-radius: 10px; box-shadow: 10px 10px #ccc; } 影をぼかす ぼかしの大きさ「5px」 ソースコード【…
グリッドレイアウト 本家サイトは、右側 左側は、ユニットを「float: left」で設計すれば囲みは必要なくなる 右側は、縦１列を「section」として考えれば左側と同じように進めることが可能 4つの写真の番号は、左上→右上→左下→右下の順という本家の流れを踏…
☆★データーでの確認★☆ページ全体のデザイン article、microdataを記述した例 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Green Leaf</title> <link rel="stylesheet" href="css/style.css" media="all"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></link></meta></head></html>
HTML5, きちんと。 HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。 HTML5, きちんと 論理構造を意識したアウトライン 見出しでつくる構造の限界（divでの階層構造は、理論構造にはならない） Sections may contain…
HTML5―新しい要素 Time要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>その他の新しい要素</title> <link rel="stylesheet" href=""> <script src=""></script> </link></meta></head></html>
HTML5―新しい要素 figure要素、figcaption要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>その他の新しい要素</title> <link rel="stylesheet" href=""> <script src=""></script> …</link></meta></head></html>
HTML5 Web広告研究会セミナーレポート（Web担当者Forum） HTML5 http://www.w3.org/TR/html5/ W3Cがリリースしている規格 2012年12月17日に勧告候補がリリースされ、今後新しい機能が追加されることはなくなり安定した規格として実装と検証が進められます HT…
文書構造をマークアップする 《div要素を使ったマークアップ》ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5</title> </meta></head></html>
基本形 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> </link></meta></head></html>
figure要素 フロー・コンテンツ、ヘディング・コンテンツ 見出しをグループ化する figure要素 フロー・コンテンツ、セクショニング・ルート メインコンテンツが参照する図、表、写真などを表す figurecaption要素 カテゴリ無し figure要素の最初、または最後…
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
header要素とfooter要素 ヘッダー・フッターに使用する section要素やarticle要素に入れることもできる アウトラインに影響を与えない header要素とfooter要素を使ったマークアップ 記述内容 《header要素とfooter要素を使ったマークアップ》 <header> <p>~~公式ページ</p> <nav> <ul></ul></nav></header>…
HTML5 HTML5はSEO対策として[ h1 ]をたくさん使っても問題ない 段組がしっかりしている程、検索エンジンに好まれる 階層が深くならないようにする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
HTML5 [ css ]で使用するための[ div ]要素 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" media="all"> <script src="#"></script> </link></meta></head></html>
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
HTML5 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href="#" > <script src="#"></script> </link></meta></head></html>
section要素 メインコンテンツを入れる HTML5 Outlinerの確認はweb上かテストサーバー上でしか確認できない 記述内容 <section> <h1>大見出し</h1> <p>本文</p> </section> ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href=""> </link></meta></head></html>
section要素でアウトラインを表す ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の練習</title> <link rel="stylesheet" href=""> </link></meta></head></html>
article要素 独立した記事として成立する内容に使う article要素を使ったマークアップ 記述内容 《article要素を使ったマークアップ》 <section> <h1>新着記事</h1> <article> <h1>記事その１</h1> <p>記事の本文</p> </article> <article> <h1>記事その２</h1> <p>記事の本文</p> </article> </section> ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5の…</meta></head></html>
aside要素 メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではない aside要素を使ったマークアップ 記述内容 《aside要素を使っ…
