HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。 (赤間 公太郎 (著), 原 一宣。 (著), こもり まさあき (監修)/エムディエヌコーポレーション)

購入価格:2468

評価:

この記事は約3分14秒で読めます

webについて完全に遅滞している広島では私の残念な能力でも適当に乗り切れたが、また東京でやるからにはある程度気張らねばなるまい、ということで数冊ばかり買ったWeb関連本のなかのひとつ。

HTMLとCSSについてはほぼすべて暗記しており手打ちコーディングも余裕なので、一応復習しとくか程度の気持ちで買ったのだが、いやいやなめておりました。知らないテクニックが多々あった。

なにごとも奢らず勉学に励むことが重要なのだな、なんてマトモなことを言ってみる。

以下本書より引用。

属性セレクタ a[target=”_blank”]{}
ex.   img[alt=”オルトに設定した文言”]{}

:first-line疑似要素は、ブロックレベル要素の最初の行を対象にスタイルを適用できます。

「★」は文書構造上HTMLのテキストとしては本来不要なものなので、HTML側には記述しない方が適切です。このようなときは「:before疑似要素」と「:after疑似要素」を使用し、「contentプロパティ」で追記する記号を記述します。

▼一文字分の字下げ2パターン
p{
text-indent:1em;
}

p.kome{
text-indent:-1em;
padding-left:1em;
}

text-align:justify;
日本語のみの文章では調整が行われない一方、英単語を含んだ段落は右端がきれいに揃い、両端揃えされている。

ol要素で途中の番号から始める
<ol start=”5″>

ol要素の番号を逆にする
<ol reversed=”reversed”>
カウントダウンさせたいときは、ol要素にreversed属性を記述します。このreversed属性はHTML5にて追加された新属性

dl要素を使った横並びのレイアウト記述例
【CSS】

dt{
float:left;
width:100px;
padding:5px 0 5px 10px;
clear:both;
font-weight:bold;
}

dd{
width:260px;
margin-left:100px;
padding:5px 19px 5px 10px;
background-color:fff;
}

これまでHTML4.01ではsummary属性を使って表組みの意味や構造を説明していました。~中略~ HTML5では、表組みの説明はcaption要素を使ってマークアップすることを薦めています。

clearfixはclearプロパティを利用できないときに使う

main要素はbody内のメインコンテンツを示す要素で、1つの文書内で1回だけ使用できます。main要素によってメインコンテンツがマークアップされると、今後は検索エンジンやプログラム、Webブラウザなどに対してどこかメインコンテンツかが的確に伝わる~中略~Webブラウザ側で完全にサポートされるまでは、main要素に「role=”main”」という属性・値を併記することが推奨されています。
<main role=”main”>

header要素は~中略~ページ全体のヘッダーだけでなく、セクションのヘッダーにも利用できます。~中略~footer要素は~中略~header要素と同様、ページ全体のフッターだけでなく、セクションフッターにも利用できます。

CSS3では「h4::before{content”◆”;}」のように「:」を2つ書く仕様になっていますが、Webブラウザ、特にIE8の対応状況を考えると、1つだけにするほうがよい

ベンダープレフィックスなしのプロパティは一番最後に記述。
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;

フォームの項目名となるテキストをlabel要素でマークアップします。~中略~ for属性でフォームのid名を指定します。こうすることで、テキスト部分をクリックした際、右側の入力エリアに入力カーソルが移動します。

引用終わり。

さて、広島での生活もあと八日。東京でこそ、がんばろうと思ふ。

記事カテゴリー: WEB