テーブルメニューの作り方

質問

HP作成は初心者です。

以下のサイトのトップページにあるような３×３の
テーブルメニューをつくるためのCSSとhtmlのタグの
記述方法を教えて下さい。

↓
http://afi8.com/

このサイトの
<h2>初心者アフィリエイターが稼ぐ為にやる事</h2>
の下のあるテーブルメニューです。

いちおう検索してみたのですが、同じように作成する方法が分かりませんでした。

回答No.5

ORUKA1951 · ベストアンサー

HTMLとスタイルシートの関係を考えるのには良い見本でしょう。
　間違いはたくさんありますから、全体的にはバツですが・・
　★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )

HTMLの書き方ですが、きちんとナビゲーションリストとしてマークアップされています。
すなわち、
<ul>順不同リスト
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</ul>
とされています。

それを、class名はもっと適切なものがあると思いますが、divを使って括ってあります。
『DIV要素・・・は、・・・class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』

CSSについては、
　単純に小さなブロックにして、floatで並べ替えてあります。

★全体的には、いわゆるdivスープになっていて、そのid名やclass名には不適切なものもたくさんありますが、このナビゲーションリストをブロックにして並び替えている部分については、特に問題はなく、まあ参考にはなるでしょう。

　ソースやスタイルシートは、ご自身で確認してください。ここで書ききれる量ではありません。

本来のマークアップは
<div class="nav">
　　<h2>初心者アフィリエイターが稼ぐ為にやる事</h2>
　　<ul>
　　　　<li>アフィリエイトの始め方
　　　　　　<ul>
　　　　　　　　<li>メールアドレスの取得</li>
　　　　　　　　<li>無料ブログの開設</li>
　　　　　　　　　・・・【中略】・・・
　　　　　　</ul>
　　　　</li>
　　　　<li>ASPの登録方法と使い方
　　　　　・・・【中略】・・・
　　　　</li>
　　　　・・・【中略】・・・
　　</ul>
</div>　

とするべきでしょう。これ以外、HTMLに書くことありません。

★肝心なことは、HTMLは文書構造にしたがってマークアップすること。この時点ではデザインは基本的に考えないことです。
2.4 HTML 4による文書の著述 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 )

　それさえ出来れば、スタイルシートで、どのようにもデザインできます。３×３だろうが、２×４だろうが、プルダウンだろうが・・自由自在です。

お礼

わざわざ有難うございます。
勉強してがんばります_(_^_)_。

回答No.4

tracer

>>BellBellさん
なるほど。そういう考え方もありますね。
ソース見たところ、本体はwordpressで、テンプレートは権威のようですね。
確かに腕のあるデザイナーならこういう方向のテンプレートは選択しないでしょうし、初心者の方はテンプレートをそのまま使うしか術がないですもんね。テンプレートのクオリティがものをいいますね。何の話か分かりませんが、BellBellさんの回答がものすごく説得力があったので、コメントしましたw
私はNo.1でまじめに応えちゃいましたよw

回答No.3

BellBell

つーか、自分のサイトへのリンクを書きたくて、こんな事書いてるんでしょ。
そうでないと、あんなセンスの悪いサイトの真似をしたいとは思わないはずです。
センスが悪いっつーか、とりあえず買ったテンプレをそのまま使いましたってのが丸判りで、しかもテンプレとしても出来がいいとは到底思えないんですよね。

あちこち、ミスッてるところに目をつぶれば一応無難にまとまめてるんだけど、無難にまとめて終わりって感じで。
ミスってる部分で、大きくダサさを醸し出してしまっているんですけどね。

ド素人がサイトを作る元にするには一応使えるけれど、すぐに物足りなくなること確実というレベル。
そんなレベルのダササイトに感銘を受けて、真似したいと思う人間などこの世に存在しません。

あんなレベルのテンプレートを買ってしまってお気の毒です。
無料で配布しているテンプレートの方が、『とりあえずド素人が満足するレベルでも、売れるからいいんだ』なんてスタンスで作っていないだけあって、センスのいいものが多いですよ。
少なくとも、あのレベルのダサさはあり得ないです。

後学までに、なんてテンプレート買ったか教えて貰えませんか？
『おすすめできる商品』として書かれてる、『権威』ですか？『奪取SEO3』ですか？
それとも別のテンプレートでしょうか？
私本人はどっちみちそんなの買いませんが、誰かがそれを買いたいと言ってるのを見かけたら、『ダサいからやめといた方がいい』と教えてあげられますので。

回答No.2

noname#158634

なぜそのサイトのソースを見ない？
「同じように作成する方法」が一番あるのはそのサイトのソースでしょ？
「見てもわかりませんでした」とかいうんだったら、今のあなたには同じようなものを作るのは無理ということです。おとなしく基礎でも勉強してください。

回答No.1

tracer

たぶん、答えをそのままもらっても、謎が謎を呼びますよ。
まず基礎だけでもいいのでHTMLとCSSを学習したほうがお得です。
「検索したけど出てこなかった」は、学習じゃないですから^^;
捉え方によってはきつい言い方に感じられるかもしれませんが、割り算のことを聞きたかったら、まず、足し算覚えてきたほうがいいですよ。と言ってるだけなので、誤解のないように。