【Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く】【 #HTML5 】 #マークアップ #エンジニアリング 論【 #セクショニング 】

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

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

スポンサーサイト

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

【 #HTML5 】 #マークアップ #エンジニアリング 論【 #セクショニング 】

過去に何度もHTML5のアウトラインの話とかもしてる私ですが、ちょっと今日の記事は色んな意味でクリティカルなのやも分かりません。
というのも、やっぱり色んな事をエラそーに言いますけど、私にも分からん事はいっぱいあります。HTML5の話であれば尚更に分からん事ばっかりです。
そういうのは大体W3Cのページ行けば解決する話なんですが、そこまでしてまで知りたくないユーザーが多いのも事実(私とか面倒くさがりな人とか)。
デザインとしては良質なんだけど、マークアップの手法として誤った認識でタグを使用されるのは本懐ではないので、サイトとかブログとか持ってるよ!って人はちょっと見とくと幸せになれるかもです。
具体的には一般認識からかけ離れたコードを書かれるとメンテナンスしようと言う気にならないんですよね。
金銭が発生する仕事なら「コイツ馬鹿だな~」で済みますけど、お金が発生しない仕事なら「面倒だから作りなおすわ」って事になりかねません。
コスト面やメンテナンス性から考えても、きちんとしたマークアップを心がけましょう!

って事で、開戦宣言を終わります。

なお、この記事だけでも相当数のセクショニングをしてみました。
ソースと共に開示しますので、追記の方で御覧ください(トップに置いておくとこわいので)

追記

ほんと~に知らんからね!
一応宣言したので、まずは留意事項を述べますが、そもそも追記自体にもarticle掛けてるんで全文ってワケには行かないかも。
あと、本来はこういう記事にいちいちsectionだのarticleだの使うのは間違ってますが、説明するために敢えて連発してますが、その点はご容赦下さい。

宣戦布告


説明のために敢えてダメな事やってる私が言っちゃダメなんですが、タグ連発する事で管理コストが増えます、確実に。
正直、面倒くさいです。素直にh2とかh3とか使えよって思ってます。h6までは使ってる例いっぱいあるんだから。
アウトライン見てもh2とsection h1のレベルは同じなんだから敢えて別にする意味が分かりません。
こう言っちゃアレですけど、sectionとかarticleはdivを1つ増やしてるようなものです。pでいいじゃん面倒くさい。
そもそもdiv idを解決させる為に考えだされた手法がsectionなんだから、敢えてdivを増やすようなバカな話もないでしょう。
苦労するなら自分だけで、チーム全体を巻き込まないようにしていただきたい。

仁義無き戦い編


~HTML5信者とHTML5アンチによる壮絶などつき合い~

【div】 VS 【table】


だいぶ昔にdiverとtablerによるマークアップ戦争がありました。今でもあるんじゃないかな?と思ってます。
以下のイメージをご覧ください(途中の細かいタグやSEOの観点は除外します)

diver
divクラス:コンテナ
divクラス:ヘッダ
 タイトル
divクラス:サイドメニュー
あんない
しょうかい
リンク
divクラス:コンテンツ
案内タイトル



divクラス:フッタ
著作権
/div

tabler
table
thead
tr th colspan タイトル
tbody
tr td あんない
しょうかい
リンク
td 案内タイトル



tfoot
tr th colspan 著作権
/table

表示はどちらも似た感じになります。
テーブルだと案内文がどんなに長くなってもちゃんとtbody内の左右のレイアウトは自動調整されます。
テーブル便利じゃん!テーブル便利ですよ!
でも、この書き方はダメです。何故か?

テーブルタグはレイアウトで使ってはいけないとW3Cで定められているからに他なりません。
ダメなもんはダメです。テーブルにはちゃんと意味があります。今はいいかも知れませんが、今後はもっとひどい事になります。
一方、divには意味はありません、デザイン用のタグです。

これ、どういう事かと言いますとHTMLタグにはタグ自体に意味があるものとないものがあります。
tableにはちゃんとした意味がありますし、divには明確な意味を持ちません。

場外乱闘編


~そもそも使い方も比較も間違ってるけど勘違いされがちな哀れなレッテル貼りたち~

【flame】 VS 【div】


flameはHTML5で使用不可なんで即刻お帰り願いたいぐらいなんですが、現状は使えなくもないんで一応。
flameユーザーが多いのはdivというかCSSが分かりにくいからですね。もっと言うと、margin,paddingとwidth,heightの使い方が分かってないから。
flameユーザーのサイトを見てれば分かるんですが、「とりあえずホームページ作ったから人が来るだろ」と勘違いしてる可哀想な人が多いですね。何時ぐらい昔の話をしてるのかさっぱり分かりませんし、分かろうとも思いません。
一応弁護をすると、flameはシステムが非常に分かりやすいです。そこに表示したいページを別ファイルで作っといてね、っていう仕組み。
対してdivは1つのページで全部出力します。なのでページに必要な情報を全部凝縮するんですね。
コードの組み方によっては何やってるかわからないページができます。
ここがいわゆるスキルなんですが、SSIとかシステムを上手く使えば逃げられる事もあります。
もちろん、スキルが必要なので分からないうちは後述のtableでデザインベースを誤魔化すのも否定はしませんが、肯定もしません。

【flame】 VS 【table】


もはやお互いが誰と戦ってるのか分かりません。論じるまでもなく関係者ではないdivの一人勝ちです。
が、tableベースでレイアウトを作りやすく、特にdivはheight・にズレが出て感覚的ではないと思われます。
flameVSdivと同じ事を言いますが、デザインのしやすさはどちらも似たり寄ったりな部分があるので、敢えて言及するならまだtableの方がマシです。
私事になりますが、このテンプレートはtableベースでレイアウトに慣れた人でもある程度対応出来るようにスクリプトを埋めています。

【ul】 VS 【dl】


これも意味不明ですね、段落タグと定義タグで争ってます。以下の表を御覧ください。
段落タグと定義タグで困る表
住所 日時
東京のえ~ちゃんち 2013.05.12

目的を敢えて分かりにくくしました。項目名として不十分なのはそのためです。
例えば、この表が引越し日とか、「後から変わり様がない情報」ならdlが望ましいでしょうし、宅飲みオフとかなら「後から新しい項目の追加や変更がある」ならulでしょう。
3列になるとdlは定義が出来なくなるのでulでの作成ですね。

疑問:ulの中にul


この問題に限った話で続けます。
ulタグで作成する場合は下のようになります。
ulクラス:縦リスト
li ulクラス:横リスト
li 縦1横1
li 縦1横2
/ul
li ulクラス:横リスト
li 縦1横1
li 縦1横2
/ul

ナビゲーションとかを作る場合はよく使われるテクニックです。
そして、用法として間違いではないです。が、こんな面倒くさい表を作るんだったらtableでいいじゃん、とも思うわけです。


因みに、同じ事をtableでやろうと思ったら途方もなくしんどいです。tdのクラス名を1つ間違えただけでたった一箇所だけ変な事になってます。その一箇所を特定するだけでも骨が折れます。
ulだと間違えた時は全部狂うので原因も突き止めやすく、一箇所直せば全部治ってます。
メンテナンス性まで言及するとtableよりはulでしょう。dlも同じ理由でtable比較では軍配が上がります。

【strong】 VS 【dfn】


これはVSというよりはdfn-abbr titleの使い方を知ってるかどうか、という問題になりそうですね。
HTMLクイックリファレンスを見れば用法が非常に分かりやすく紹介されてあります。
親要素の定義を~の部分がちょっと小難しいイメージを与えますが、簡単に考えるとpタグの中に文字書くじゃん?そしたらそこで定義する(dfn)じゃん?使う(abbr)じゃん、という事です。strongだってpとか要素の中で使っていると思いますし、用法は全く同じです。

と、こんなに書いてますけど、私もこの記事書いて初めて知ったクチなのであんまりエラそうに言えないんですけどね。

divタグの代わりになりそうなものたち


W3Cでも明確な説明に困ってるかもしれないですね。

というのも、掲題は正しい表現ではありません。
正しくは、sectionやheaderの代わりにdiv idで管理していたと言うべきです。

さて、ここでど~にもよく分からんモノがありまして。
ズバリ、headerとfooterです。
どちらもセクショニング・コンテンツではありませんが、用法としてブロック要素と考えて使う方が多い。
しかしながら、ブラウザによってはこれらはインライン要素である
面白い記事があったのでご紹介しましょう。
[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方(ウェブクリ8)

aside


用語の説明に使うだとか広告貼るところだとか、えらい好き勝手言われてますが、どっちも違うんじゃない?というのが私の解釈です。
例えば用語説明はメインコンテンツと無関係とは言い切れません。関係している以上、sectionであり、用語説明自体をまとめているのならarticleと言ってもいいでしょう。

これも先ほどの記事に多少触れますが、ブロック要素的な考え方をするから先入観が強いのだろうと思うのです。
インライン要素で考えると広告を入れる場所などという発想になりません。
しかしながら、先ほどのheader,footerと違いセクショニング・コンテンツですのでhxによるマークアップは必要です。h1を含むとブロック要素の考え方をしてしまうのも分からないでもないですが。

hxタグのインライン


フロー・コンテンツでもあり、ヘッディング・コンテンツでもあるhx要素は扱いに困ります。
とりあえずheaderに入れとけばいいや、っていう使い方もある意味においては否定しません。
ただ、hxだからheaderなのか、というとNOです。ヘッディング・コンテンツはセクションのヘッダーを示すもので、bodyのヘッダーではないからです。
但し、bodyを1つのセクションとしてみた時にheaderであれば良い、というのは否定出来ません。
その時、headerをインラインで扱うのでheaderフロー・コンテンツに従属するヘッディング・コンテンツhxはインラインで扱っても良いのではないかと、そう思うわけです。

section,articleのインライン


では、これらの要素も同じくインラインで使っていいはずです。
一般には、div id="section"のイメージが強くてブロック要素だと認識されていますし、当ブログでもブロック要素として使用しています。
が、上の理論に準えるならインラインでもいいはずです。asideでも述べていますが、これらも同じくセクショニング・コンテンツなのできちんと教えてあげましょう。

font-weight:bold


これについて、私はbタグで良くね?って思ってるんですがどうなんでしょうか。strongも表現的には同じですが、意味があるのでダメです。

お約束のブツ.html


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