【Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く】【技術情報】HTML5/CSS2.1覚書 【志摩嶋エイジ】

東方二次ゲームメインからオリジナル・企業系や漫画へ。TRPGやサバゲのアナログライクも

Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【技術情報】HTML5/CSS2.1覚書 【志摩嶋エイジ】

どうも、え~ちゃんです。ご無沙汰してます。
まぁ、多くはTwitterでお世話になっている方々ばかりかと思うので、「何を今更」というところではありますが。

ブログを放置していた、と言われれば、もう返す言葉もありません。
ずっとHTML5で遊んでいたので、どうもアレですね。

さて、折角遊んでいたこの言語。何もやらないっていうのもアレなので、ちっと私流にまとめてみました。
HTML5の、と言うよりはCSS2.1についての方でしょうか。
需要があればこれ幸いですが、基本的に他のサイトを調べれば分かるような話は書いてません。
(逆に言うと、他のサイトを見ても分からない・載ってない事を書いているつもりです)

記事の内容がdevelopper向けになりますので、予めご了承ください。


HTML5


<!doctype html>


HTML4.01と比べると大躍進ですね。
但し、現状ではAnother HTML lintやHARELと言ったアクセシビリティ対応サイトのチェッカーに不明として引っかかります。
以下でご紹介しているHTML5で追加された要素も不明とされます。

<header>


HTML4.01で
とされている方も多いのではないでしょうか?
ヘッダ情報専用タグですが、従来のではなく、body記述に於けるヘッダ情報です。後述のナビゲーション情報タグと分けることもできます。

<nav>


同じく、id=navi用。使い方はheaderと同じです。

<article>


ここに記事の情報を書き込む、とありますが要するにメインコンテンツの部分です。
やたらと長くなる部分ですね。

<footer>


id="footer"(ry

CSS3


jQuaryを使わずに動的なページを作るのには必須です。
それ以外はCSS2.1と同じようなものだと言い切ってしまっても良いかもしれません。
もちろん、厳密には違いますが、分かりにくくなるので慣れるまではそういう認識で良いと思います。

グラデーション


実際にえ~ちゃんねっとうぇぶねっとわ~くでも採用しました
背景にグラデーションを使っています。左上から順番にカラーリングタグをちまちま弄る作業。
左から右だけでなく、上から下、果ては斜めにもグラデできます。選択範囲でどこまでの色を使うなどという指定も出来ます。
途中の色は勝手に判断して出力するので、自分で中継点さえ決めるだけで活用できます。もちろん、ここからここまでは変化して欲しくない、という使い方も出来ます。
まるでHTMLを覚えたての頃の感覚に浸れます。
ご存知の方にはアレですが、使い方は虹色フォントみたいなアレですな。範囲を指定するという条件が伴ったぐらいです。

定義の順番について


これ、ちょっと引っかかったので自分用メモついでに。
class="クラス名"とした時になんですが、CSS側で『タグ.クラス名』ってやるんですが、『タグ【 】.クラス名』ってやると意味が変わります。
見やすくなるだろうと思って整理がてらやってたんですが、一つ空欄を空けるのはタグ毎であって、クラスとかは空けちゃダメみたいです。


HTML4.01では非推奨とされていたtarget属性ですが、HTML5では非推奨から外れています。
しかし、上記のAnother HTML lintでは非推奨といわれますので、チェックする際はご注意ください。
また、target属性はCSSによる指定は出来ないようです(CSS2.1,CSS3)
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。