ただいま制作中のサイトです。
http://nobu-69.com/manakaa/sample2/
全体的にまだ大まかな状態です。ちいさい突っ込みはいれないように！w
試しに全文モリサワWEBフォントにしてみました。
パソコン倶楽部りんご
Webデザイン脱初心者の勉強会
ただいま制作中のサイトです。
http://nobu-69.com/manakaa/sample2/
全体的にまだ大まかな状態です。ちいさい突っ込みはいれないように！w
試しに全文モリサワWEBフォントにしてみました。
細かい所かもしれないが、サイトの最上部の小さな文字をh1にしているのを見ると、
「SEOという言葉を使う割に、自社サイトがtableレイアウトのままで、
マークアップを理解していないマーケティング会社の古くさいサイト」
というイメージを私はいだきます。
あ、そういえば、今夜のアフター勉強会でも、そんなサイトを見かけたなあ。
ありがとうございます。
ページの顔（家でいえば表札）になってないのに、それがページのｈ１ってどういう事だ！けしからん！
という事ですよね？
分ります。
わかりつつ、とりあえずこうした経緯
↓
コンテンツにセクションがあり、それらに各ｈ１があります。これは問題なし。
サイト上部のスライダーは、トップページの顔となるのでヘッダータグで囲いました。
各画像は、とりあえずdivです。たとえば、その画像の中のロゴマークをh1でマークアップするとします。
そうすると、ヘッダーのh1が、そのロゴマークになります。
各セクションのｈ１、ヘッダーのｈ１、フッターのｈ１、とそれぞれｈ１があることになります。
すると、大外のボディタグに対してのｈ１がなくなってしまうので、指摘のような事をしています。
最適だと思ったり、思わなかったり。ボディに対してのｈ１がないよりましかなぁ～。という感じです。
マークアップする際に、デザイン的に見た目が大きいからｈ１とは限らないという事を以前、学習しました。
それを逆に考えると小さくても内容が沿っていればｈ１でもいいと解釈してる今日このごろ。
前にボディにたいしてのｈ１は必要と学びました。ヘッダーやフッターにｈ１があっても1つ階層が下なので、
弱くなるので、最強のボディ直下に必要と。というか、ページを一言で表すとこれみたいな。
指摘の部分を削除して、スライダーをあえてヘッダーで囲まずにボディの直下にdivで囲んで、ロゴマークをｈ１でマークアッブするのが良いのかな？
スライダーの中にｈ１って見たことないのでNGなのかな。か、知らないだけか?
だとしたら、そもそもこのデザインは、マークアップに向いてない事になるのか。
そしたら
指摘の部分の内容の場所を移動する。
横並びメニューの下に持ってきて、目立たして内容としてのサイトの顔にすればよいのかな。
「府中市ホームページ制作・グラフィックデザイン｜Manaka Design」をｈ１で囲み、それを
横並びメニューの下にどーんと表示させて、このページの表札です！となれば間違いなくｈ１ですよね。そうすれば、ボディ直下のｈ１という事になる。そして、スライダーをheaderで囲み各画像をマークアップする。
コメントを考えながら書いていたら、アイデアが思いついた。そしたら、、、、あたりから。
これでいい感じになるか？！
デザインの為に、そのｈ１をdivで囲むのは問題ないですよね？階層が下がらないかという意味で？
僕はdivは意味のないタグなので問題ないと思います。
分ってるようで分っていないマークアップ。
今回も校庭１０周か？とほほ。
headerの中のh1はheaderの見出しではなくて、headerが属しているセクション（section要素に限らず、概念としてのセクション）の見出しになる。
http://www.html5.jp/tag/elements/header.html
私もheaderがセクショニングすると勘違いして説明していたと思うから、一緒に校庭10周しましょう。
セクショニング・コンテンツは、見出しやフッターの範囲を定義するコンテンツです。
→ article , aside , nav , section
headerがセクショニング・コンテンツではないという事になると、
アウトライン・ゴリラリズムに参加しないという事で、えっとー
要するに、header内のh1はheaderというセクションのh1ではなく、
body（そのページ）のｈ１になるという理解でＯＫですか？
となると、スライダーをheaderタグでマークアップして
画像全部をhgroupで囲んで各画像をh1 , h2 , h3 にする事が可能なわけですね。
そしたら、最初の指摘の小さい文字のインチキｈ１は、さようならー。ですね。
>要するに、header内のh1はheaderというセクションのh1ではなく、
>body（そのページ）のh1になるという理解でＯＫですか？
headerの親要素がbodyならばそうですね。
>スライダーをheaderタグでマークアップして
これは疑問だなあ。
そのページのメインなコンテンツならばheaderの外で良いのでは？
>そのページのメインなコンテンツならばheaderの外で良いのでは？
という事は、divかなあ。そのdivの中にｈタグ。
ページに必ずheaderがないといけない！
というルールもなさそうだし。調べた限りでは。
でも雰囲気的にheaderがないと不自然なかんじもあるんですよね。
divかな。そしてheaderタグなし。
うん。
マークアップを考える時は、
「javascript、css、画像表示が全てoffだった場合に、どうなるか？」
という視点で考えましょう。
自然にプログレッシブ・エンハンスメントになります。
imgのaltも考え易いです。
>ページに必ずheaderがないといけない！というルールもなさそうだし。
xhtmlの時にdiv id=”header”としていた所をheaderにすればいい。
index.htmlのトップにフェードで切り替わる画像を配置。
画面いっぱいに表示するjQueryで実装。
いい所。
ゴージャスな感じがしてかっこいい。
悪い所。
マークアップ出来ない。
小さい画面で見ると、画像が切れる。
とりあえず、画像の横幅1500pxなので、1000pxにすればいいのか。
でも、画像横幅1000pxにすると、大きい画面で見た場合、画像のしたが切れる。
うーん。
これは、かっこいいというだけなので、色々なユーザーがいると考えると、
画面いっぱい表示作戦は、止めた方がいいのかな～。
その他のページも作りました。