ＣＳＳ、ＨＴＭＬのメニューリストの解説をお願いします

質問

宜しくお願い致します、趣味でホームページ制作をはじめました。

http://www.b-architects.com/

上記のサイトのトップページの

「メニューの部分だけ（リスト）」、

構造を理解して自分もこんな感じでメニューを作りたいと思っています。
ちなみに私の知識としては、ＨＴＭＬの記述は非常に初心者レベルで記述できる程度、ＣＳＳに関しても同じであります。

上記サイトを理解する上でまず、上記サイトのトップ画面を開いた上で、

ファイル→名前を付けて保存する

　事で、上記サイトの構成しているファイルと部品（ＣＳＳファイルやら
画像）を保存して、上記サイトのＨＴＭＬソースを眺めながら、

「メニュー（リスト）の部分だけ」

理解し、自分も同じように記述して習得しようとしているのですが、

「ちんぷんかんぷん」です。

　まず、メニュー（リスト）にあるサービス～ケーススタディの左横の
縦の棒ですが、これは画像なんでしょうか？ソースで記述されたものなのでしょうか？

　先ほども私が書いたように、トップページからファイル→保存をすると
このページを構成するファイルと部品（ＣＳＳファイルやら画像）は確かに
保存されてますが、縦の棒に該当する画像は保存されてませんでした。では
ソースでＣＳＳか何かで記述されているのだろうか？と思い外部ＣＳＳファイルを睨めっこしたのですが、そんな形跡がありません。

　このサイトはプロのデザイン制作会社のページなのでコード文字数が多く
なかなか私も完全に構造内容を確実に把握できません。

　「メニュー（リスト）部分のみ」でいいのでどなた様かどうか解説して
頂けないでしょうか？

　また私もどうも地頭が悪いので、メニュー（リスト）の部分を構成する
ＨＴＭＬとＣＳＳを抜粋して説明して頂けると本当に有難いです。

　友人には、そんな難しいサイトで勉強せず、適当にテーブルで作ればい
いだろうが！と言われますが、なんとかこのサイトで理解したいんです。

　上記サイトの構造を眺めて２週間ですが、全然わかりません。

　助けて下さい。宜しくお願い致します。

回答No.1

KI401 · ベストアンサー

単純に、borderが設定されていますね。
bamainstyle.css (204 行目)
div#navigation ul ul {
border-left:1px solid gray;
略

> 上記サイトの構成しているファイルと部品（ＣＳＳファイルやら
> 画像）を保存して、上記サイトのＨＴＭＬソースを眺めながら、

きっとそういった地道な努力は実を結ぶと思います！
ぜひ頑張って欲しいのですが、ただ結構作業量も増えるし、ちんぷんかんぷんなことも
多いと思うので、適当な開発補助ツールなどを活用すると良いと思います。
例えば僕はFirefox+firebugに大分お世話になっています。
実際上のサイトの場合でも、Firefoxで開いているページの、左の線のあたりで
「要素を調査」し、「CSS」の「レイアウト」を確認したところ、
すぐにul要素に左borderが1px設定されていることが分かりました。

> サイトはプロのデザイン制作会社のページなのでコード文字数が多く

ソースを流し見しましたが、なかなかに良い(会社|サイト)だと思いますよ。
よくある企業サイトやデザイン会社(カッコワライ)の作るサイトというのは、
めちゃくちゃなHTMLとバグだらけのCSSを抱えたまま見た目を整えているだけ、という悲惨なものが多いです。
そしてそれ故、大抵の場合企業サイトのHTML,CSSは非常に分量も多く解読し辛いです。
しかしこのサイトは、HTML的にもCSS的にも「文法違反」が出ないようなラインで、
かつかなりシンプルに旨い味出してるな、という感想を持ちました。
その点で見ても、このサイトは寧ろ勉強の題材としてはかなり良い方かと。
# ちゃんと論理要素を使っているし、tableだって使うべき所で用いている。満点とは言えないが、素晴らしい！

寧ろよくこんなサイト見つけたと思いますよ。適当にその辺の企業サイトを持ってくると、
まさにご友人の勧めている「てーぶるれいあうと」ばかりなので、ある意味運が良いです。

# 蛇足。友人の方がどういった方かは知りませんが、残念ながらあっさりとテーブルレイアウトを
# 勧めるようでは、あまり専門的な知識はお持ちでないだろうと思われます。
## テーブルレイアウトの悪い所の一つは、思考停止しちゃう程らく～にレイアウトできること、ですからね。。。

お礼

非常に簡潔で分かり易い説明で

「感激！！」しました。相談文を送信したあと、わたしが相談した内容が
回答者さまにきちんと伝わるだろうか、解釈しにくい文面になっている
ような気がずっとしてました。

　 回答者さま、から頂いた文面を拝見して是非Firefox+firebugを使用し
たいな、と思っています。頂いた回答も明確で親切で分かり易く尚且つ、

「専門家としてのプライドをビンビンに感じました」

　凄い人に回答頂いて感謝感激です。

　本当に有難うございました！