- ベストアンサー
CSS、HTMLのメニューリストの解説と作成方法
- CSS、HTMLのメニューリストの解説と作成方法について詳しく解説します。
- 初心者でも理解しやすいように、上記サイトのメニューリストの構造や要素を抜粋して説明します。
- 上記サイトを参考に、自分自身でも同様のメニューリストを作成する方法を解説します。
- ペ ヨンジュン（@kikkawa200）
- お礼率80% (4/5)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
単純に、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を使用し たいな、と思っています。頂いた回答も明確で親切で分かり易く尚且つ、 「専門家としてのプライドをビンビンに感じました」 凄い人に回答頂いて感謝感激です。 本当に有難うございました！