サイト制作

ただいま制作中のサイトです。
http://nobu-69.com/manakaa/sample2/
branding3

全体的にまだ大まかな状態です。ちいさい突っ込みはいれないように!w

試しに全文モリサワWEBフォントにしてみました。

カテゴリー: ブログ | タグ: , , , , , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

サイト制作」への8件のフィードバック

  1. タカハシ先生タカハシ先生

    細かい所かもしれないが、サイトの最上部の小さな文字をh1にしているのを見ると、
    「SEOという言葉を使う割に、自社サイトがtableレイアウトのままで、
     マークアップを理解していないマーケティング会社の古くさいサイト」
    というイメージを私はいだきます。

    あ、そういえば、今夜のアフター勉強会でも、そんなサイトを見かけたなあ。

    返信
  2. 真中のぶ真中のぶ 投稿作成者

    ありがとうございます。

    ページの顔(家でいえば表札)になってないのに、それがページのh1ってどういう事だ!けしからん!
    という事ですよね?
    分ります。

    わかりつつ、とりあえずこうした経緯

    コンテンツにセクションがあり、それらに各h1があります。これは問題なし。
    サイト上部のスライダーは、トップページの顔となるのでヘッダータグで囲いました。
    各画像は、とりあえずdivです。たとえば、その画像の中のロゴマークをh1でマークアップするとします。
    そうすると、ヘッダーのh1が、そのロゴマークになります。

    各セクションのh1、ヘッダーのh1、フッターのh1、とそれぞれh1があることになります。
    すると、大外のボディタグに対してのh1がなくなってしまうので、指摘のような事をしています。
    最適だと思ったり、思わなかったり。ボディに対してのh1がないよりましかなぁ~。という感じです。

    マークアップする際に、デザイン的に見た目が大きいからh1とは限らないという事を以前、学習しました。
    それを逆に考えると小さくても内容が沿っていればh1でもいいと解釈してる今日このごろ。

    前にボディにたいしてのh1は必要と学びました。ヘッダーやフッターにh1があっても1つ階層が下なので、
    弱くなるので、最強のボディ直下に必要と。というか、ページを一言で表すとこれみたいな。

    指摘の部分を削除して、スライダーをあえてヘッダーで囲まずにボディの直下にdivで囲んで、ロゴマークをh1でマークアッブするのが良いのかな?

    スライダーの中にh1って見たことないのでNGなのかな。か、知らないだけか?
    だとしたら、そもそもこのデザインは、マークアップに向いてない事になるのか。

    そしたら

    指摘の部分の内容の場所を移動する。
    横並びメニューの下に持ってきて、目立たして内容としてのサイトの顔にすればよいのかな。
    「府中市ホームページ制作・グラフィックデザイン|Manaka Design」をh1で囲み、それを
    横並びメニューの下にどーんと表示させて、このページの表札です!となれば間違いなくh1ですよね。そうすれば、ボディ直下のh1という事になる。そして、スライダーをheaderで囲み各画像をマークアップする。

    コメントを考えながら書いていたら、アイデアが思いついた。そしたら、、、、あたりから。
    これでいい感じになるか?!
    デザインの為に、そのh1をdivで囲むのは問題ないですよね?階層が下がらないかという意味で?
    僕はdivは意味のないタグなので問題ないと思います。

    分ってるようで分っていないマークアップ。
    今回も校庭10周か?とほほ。

    返信
  3. タカハシ先生タカハシ先生

    headerの中のh1はheaderの見出しではなくて、headerが属しているセクション(section要素に限らず、概念としてのセクション)の見出しになる。
    http://www.html5.jp/tag/elements/header.html

    header 要素は、セクショニング・コンテンツではありません。この要素は、新たなセクションを導入することはありません。

    私もheaderがセクショニングすると勘違いして説明していたと思うから、一緒に校庭10周しましょう。

    返信
  4. 真中のぶ真中のぶ 投稿作成者

    セクショニング・コンテンツは、見出しやフッターの範囲を定義するコンテンツです。
    → article , aside , nav , section

    headerがセクショニング・コンテンツではないという事になると、
    アウトライン・ゴリラリズムに参加しないという事で、えっとー
    要するに、header内のh1はheaderというセクションのh1ではなく、
    body(そのページ)のh1になるという理解でOKですか?

    となると、スライダーをheaderタグでマークアップして
    画像全部をhgroupで囲んで各画像をh1 , h2 , h3 にする事が可能なわけですね。

    そしたら、最初の指摘の小さい文字のインチキh1は、さようならー。ですね。

    返信
  5. タカハシ先生タカハシ先生

    >要するに、header内のh1はheaderというセクションのh1ではなく、
    >body(そのページ)のh1になるという理解でOKですか?
    headerの親要素がbodyならばそうですね。

    >スライダーをheaderタグでマークアップして
    これは疑問だなあ。
    そのページのメインなコンテンツならばheaderの外で良いのでは?

    返信
  6. 真中のぶ

    >そのページのメインなコンテンツならばheaderの外で良いのでは?
    という事は、divかなあ。そのdivの中にhタグ。
    ページに必ずheaderがないといけない!
    というルールもなさそうだし。調べた限りでは。
    でも雰囲気的にheaderがないと不自然なかんじもあるんですよね。

    divかな。そしてheaderタグなし。

    うん。

    返信
    1. タカハシ先生タカハシ先生

      マークアップを考える時は、
      「javascript、css、画像表示が全てoffだった場合に、どうなるか?」
      という視点で考えましょう。
      自然にプログレッシブ・エンハンスメントになります。
      imgのaltも考え易いです。

      >ページに必ずheaderがないといけない!というルールもなさそうだし。
      xhtmlの時にdiv id=”header”としていた所をheaderにすればいい。

      返信
      1. 真中のぶ

        index.htmlのトップにフェードで切り替わる画像を配置。
        画面いっぱいに表示するjQueryで実装。

        いい所。
        ゴージャスな感じがしてかっこいい。

        悪い所。
        マークアップ出来ない。
        小さい画面で見ると、画像が切れる。
        とりあえず、画像の横幅1500pxなので、1000pxにすればいいのか。
        でも、画像横幅1000pxにすると、大きい画面で見た場合、画像のしたが切れる。

        うーん。
        これは、かっこいいというだけなので、色々なユーザーがいると考えると、
        画面いっぱい表示作戦は、止めた方がいいのかな~。

        その他のページも作りました。

        返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA