質問: サイドバーの作り方を教えてください 掲載した画像のようなサイドバーのプログラムコードを教えてください イメージ画像は使わない方法でお願いします。 こらなくていいのでわかりやすくて単純なプログラムの投稿をお願いします。
回答: >掲載した画像のような >イメージ画像は使わない方法 >こらなくていいのでわかりやすくて単純な といっても画像の例がそれなりなので、どこまで単純化したものが知りたいのか? 単純で良いならもっと単純な例を示すべきでは? 作り方も一律ではないでしょうし、ネットでいろんなサイトを見れば、いろいろなタイプのメニューがあると思います。(メニューの作り方のサイトもあります。) 気に入った(気になった)ものを見つけたら、その「ソース」を見て見ましょう。 (ブラウザによって違いますが、必ず「ソースを表示」のようなメニューがあるはず) それで、どのようにhtmlのマークアップがされているかわかりますので、参考にするのがよろしいかと。 css(スタイルシート)はhtml内に記されている場合と、別ファイルになっている場合とがありますが、別ファイルでもそのurlがソース内に記されています。 (とあるところ) そのurlをアドレスバーに入れればcssも閲覧が可能なので、参考にできるでしょう。 わからないことがあれば調べて理解してゆくことで、だんだん複雑なものにも対応可能になってゆくと思われます。 多少は似せてみた、かなりいい加減な例を * 通常は文字フォントやサイズ、リンク要素のサイズ等を指定すると思いますがあえてはずしています。 (ブラウザの種類や設定によって表示が変わります) sample #navi, #navi *{ margin:0; padding:0; } #navi{ width:200px; background-color:#e4e8e4; } #navi .title{ padding-left:1em; color:#fff; background-color:#408090; border-top:5px solid #60a0a0; border-bottom:2px solid #2f4f5f; } #navi .menu{ margin-top:5px; padding:5px; border-top:2px ridge #fff; } #navi .menu ul{ padding:3px; list-style-type:none; background-color:#f8f8f8; } #navi .menu ul li{ border-top:1px solid #fff; border-bottom:1px solid #ccc; } #navi a{ display:block; padding:4px; text-decoration:none; color:#000; background-color:#f0f4f0; } #navi a:hover{ background-color:#b0d0d8; } #navi .arrow{ margin-left:0.3em; margin-right:0.8em; padding:2px; color:#fff; font-size:0.8em; font-weight:bold; background-color:#0bc; } メインメニュー * →トップページ * →プロフィール * →contact * →ブログ * →作成したシステム