この記事は約4分35秒で読めます
こんにちは、はじめまして。
落ちこぼれのwebデザイナーの新宅です。ちなみに「シンタク」と読みます。中国地方ではよくある名前なのですが、関東では稀ですが、本名ですのであしからず。
これからちょこちょこと、個人的な備忘録兼勉強としてweb技術系の記事を書き連ねたいと思います。というか、本音はAdsenseでお小遣いを稼ぎたいです。だけど世の中は厳しいです。
前置きが長くなりましたが、本題へ。今回はHTML5/CSS3について少々。
ぼくはHTMLとCSSについてはほぼすべて暗記しており手打ちコーディングも余裕なので、一応復習しとくか程度の気持ちで「HTML5+CSS3の新しい教科書」を買った。のだが、いやいやなめておりました。知らないテクニックが多々ありました。
以下本書より、自分にとって有益だった箇所を引用。
属性セレクタ 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名を指定します。こうすることで、テキスト部分をクリックした際、右側の入力エリアに入力カーソルが移動します。
引用終わり。
属性セレクタ 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名を指定します。こうすることで、テキスト部分をクリックした際、右側の入力エリアに入力カーソルが移動します。
引用終わり。
あと、おまけとして最近有用だった他サイト様でのcssマメ知識をどうぞ。
【[意外と知らないCSS]テキストが領域をこえた場合に「…」を表示するtext-overflow:ellipsis】
http://cappee.net/coding/text-overflow
[意外と知らないCSS]スマホ制作に便利！display:table-cellを使った横並びのレイアウト
http://cappee.net/coding/displey-table-cell
[意外と知らないCSS]テーブルの列幅を均等にするtable-layout:fixed
http://cappee.net/coding/table-layout-fixed