レイアウトをHTML5対応したものに修正する

これをやらないとfixedなレイアウトにした時にフッタが常に画面下に固定するしかなくて、辛い

バックエンドで直す必要あり

<main> じゃなくて div[itemtype="http://schema.org/Article"] の直下だった

サイドバーを固定 ref: cpprefjp/site#476, closes #38

理想は

<body>
  <header>
    <nav id="navbar">サイト全体のナビゲーションバー</nav>
    <div id="crsearch">クイックジャンプ</div>
  </header>
  <main>
    <header>ページ単体のヘッダ（パンくず、編集ボタン、履歴ボタン）</header>
    <article>記事の本文</article>
    <footer>
      ライセンス表記（意味的には記事単体ではなくサイト全体に適用）
    </footer>
  </main>
  <aside id="sidebar">
    <div id="side-nav">サイドバー用のミニマルなナビゲーション（静的）</div>
    <div id="tree">現行のツリー（動的）</div>
  </aside>
</body>

サイトの再生成が爆速になったからちょっとやる気出てきた

<nav> とか <main> とか <aside> とか <article> のHTML5の規格上の使い方がこれで正しいのかどうか分からないんですが、HTML5に詳しい人いませんかね？

あと、それぞれのHTML5の要素に対応付ける og とか itemprop の属性とかもよく分かってないです（これは現行のが合ってると思っているけど）

cpprefjp/site#496 に関連して、これ。

考えたんですが、フロントエンドで無闇に id 属性を増やさなくても良いような気がしてきました。HTML5とかitempropで可能な範囲でやる方が後々のことを考えると楽だと思う。

なので、HTML5に新しくできた属性とかでどういうのが適切なのかという情報が足りてなくて、それが分かれば実装はできる。

そこはasideじゃなくてnavでいいんじゃないかという思い

@yumetodo

@yumetodo ナビゲーションバーとサイドバーが両方navになるとき、itempropをどう指定するのが正しいのかみたいな知見ってあったりしませんか

@saki7

@saki7 そこまでは知らないので詳しそうな人( @takeokunn )にTwitterで凸してきます。

@yumetodo

@yumetodo あー。contributerでない人にまで聞きに行ったりはしなくていいですよ。

僕が質問した意図としては、調べれば分かるけど調べても分からない実務上のハマリポイントとかを聞きたかったので。

@melpon

@melpon 僕が加入する前、Google Sitesから移行してくるときにSEO周りで頑張ったみたいな話をどこかで見た気がするんですが、その時に今のレイアウトファイルの属性とかを決めた経緯とかってどこかに残ってたりしないですか？

外部のものです。普段マークアップ仕事でよくします

文脈があまり読めてないのでトンチンカンなコメントになるかもです。

基本的にcssでいじりやすいよう、また他の人でもメンテしやすいようにcomponent単位に div で囲って id > class でcssを指定するようなコードを書いています。あまりHTML5を意識してないです。ファイル単位でやっちゃえばいいかなーって（期限付きでいちいち気にしてられないし、全体で足並みそろえるのめんdなので・・・

で理想としては、Accessibilityを向上させるためにもHTML5 tagやwai-ariaに準拠するべきですね。

HTML5 tagに関しては公式ではあるけど、実際に実務レベルで性格に書いてくれてる記事は読んだことがないです
wai-ariaに関しても対して役に立つ記事がない・・・・

ハマりポイントとしては、HTML5 tagを中途半端に意識して逆にぐちゃぐちゃになるとかですかね

確かmastodonのviewはかなりちゃんとコード書いてた気がするのでその辺参考になるかもです

@takeokunn

@takeokunn 非常に参考になります。ありがとうございます。
僕が気になっていた点もまさにそこで、ググッても出てくるのは規格に書いてあるようなことばかりで、実務レベルでどういう懸念があるのかという観点から解説している記事って本当に少ないですよね。

個人的な経験だとGoogle謹製のgumbo-parserの内部実装のariaの扱いとか触ったことあるんですけど、クソ適当だった記憶が蘇ってきました（APIの設計から「どうせ誰も正しく書かないだろ」みたいな意思を感じた……

その時に今のレイアウトファイルの属性とかを決めた経緯とかってどこかに残ってたりしないですか？

itemtype や itemprop といった属性は、大体自分の独断で付けました。ので当時の記録は特にないですね。
正しいかどうかもよく分かってなかったですが、ウェブマスターツールで見たらちゃんとデータ入ってたからこれでいいや的な感じになってた記憶があります。

Navigation Menu

Repository navigation

レイアウトをHTML5対応したものに修正する #47

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

レイアウトをHTML5対応したものに修正する #47

Description

Activity

saki7 commented on Nov 10, 2017

saki7 commented on Nov 18, 2017

saki7 commented on Nov 18, 2017

saki7 commented on Nov 18, 2017

saki7 commented on Dec 13, 2017

yumetodo commented on Dec 14, 2017

saki7 commented on Dec 14, 2017

yumetodo commented on Dec 14, 2017

saki7 commented on Dec 14, 2017

saki7 commented on Dec 14, 2017

takeokunn commented on Dec 14, 2017

saki7 commented on Dec 14, 2017

melpon commented on Dec 14, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions