Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
saki7 opened this issue Nov 10, 2017 · 13 comments
Open

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

saki7 opened this issue Nov 10, 2017 · 13 comments
Labels
enhancement help wanted

Comments

@saki7
Copy link
Contributor

saki7 commented Nov 10, 2017

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

バックエンドで直す必要あり
@saki7
Copy link
Contributor Author

saki7 commented Nov 10, 2017

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

@saki7 saki7 changed the title <body>直下の<footer>を<main>の末尾に移動 <body>直下の<footer>を Article の末尾に移動 Nov 10, 2017
@saki7 saki7 changed the title <body>直下の<footer>を Article の末尾に移動 <body>直下の<footer>を Article の直下に移動 Nov 10, 2017
saki7 added a commit to cpprefjp/kunai that referenced this issue Nov 10, 2017
@saki7
サイドバーを固定 ref: cpprefjp/site#476, closes #38
0e5ac67 
includes workaround for cpprefjp/site_generator#47
@saki7 saki7 mentioned this issue Nov 10, 2017
Merged
@saki7 saki7 changed the title <body>直下の<footer>を Article の直下に移動 body, nav, footer, sidebarの意味論とhtmlを対応付ける Nov 18, 2017
@saki7
Copy link
Contributor Author

saki7 commented Nov 18, 2017 •
edited

理想は

<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>

@saki7
Copy link
Contributor Author

saki7 commented Nov 18, 2017

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

@saki7
Copy link
Contributor Author

saki7 commented Nov 18, 2017

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

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

@saki7
Copy link
Contributor Author

saki7 commented Dec 13, 2017

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

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

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

@saki7 saki7 changed the title body, nav, footer, sidebarの意味論とhtmlを対応付ける レイアウトをHTML5対応したものに修正する Dec 13, 2017
@yumetodo
Copy link
Member

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

@saki7 saki7 mentioned this issue Dec 14, 2017
Open
@saki7
Copy link
Contributor Author

saki7 commented Dec 14, 2017

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

@yumetodo
Copy link
Member

yumetodo commented Dec 14, 2017 •
edited

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

@saki7
Copy link
Contributor Author

saki7 commented Dec 14, 2017

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

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

@saki7
Copy link
Contributor Author

saki7 commented Dec 14, 2017

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

@takeokunn
Copy link

takeokunn commented Dec 14, 2017 •
edited

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

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

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

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

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

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

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

@saki7
Copy link
Contributor Author

saki7 commented Dec 14, 2017

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

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

@melpon
Copy link
Member

melpon commented Dec 14, 2017

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@melpon @saki7 @yumetodo @takeokunn