マネして作ってみよう!(手順解説付き)前回からの続きで、メニューの作成を行っていきたいと思います。ここまでのHTML,CSSコードと現在の表示状態を記載しておきます。自身のコードに足りないものがあれば追加しておいてくださいね。ゆるらぎは東京都XX区にあるランチとスイーツがおいしいお店です。次はli要素にスタイルを指定していきましょう。文字を真ん中に設定しようli要素同士の外側上下左右全ての余白をmarginで『0』にして、文字が真ん中に配置されるようにtext-alignを使用します。text-align:center;}text-alignは文字の配置を行うプロパティです。テキストを左寄せにします。テキストを左寄せにします。テキストを中央揃えにします。テキストを均等割付にします。これでだいぶ近づきましたね。手順002次はspan要素にスタイルを指定していきましょう。文字フォントを設定しようfont-sizeで文字サイズを少し小さくし、colorで文字色の変更、font-familyで文字フォントの変更します。}font-familyは文字のフォントを指定するプロパティで、5つのカテゴリーがあります。(※他にもまだあったような...)今回使っている『verdana』は、ゴシック系のフォントです。リンク先にカテゴリーごとに色々なフォントがあるので参考にしてください。等幅フォント手順003文字色が変わったくらいでそんなに変化はありませんね(笑)マウスオーバー時の設定をしよう次は、メニューのリンクボタンにマウスカーソルが乗ったときのカラーの変更をしましょう。}『:hover』セレクタは、a要素のすぐ後ろについていますね。これは、a要素にマウスなどのカーソルが乗ったときスタイルを指定するためのセレクタです。リンクなどを踏んだ時に『ここはリンクだよ!』ってことを伝えるために『opacity』を使います。『opacity』は、透明度を指定するプロパティです。今回は0.8くらいのちょい透明ぐらいでいいかと思います。手順004画像ではカーソルが表示されていませんが、実際にはカーソルがメニューのNewsの上にあります。0.0(完全に透明)~1.0(完全に不透明)の範囲で指定する(初期値は1)メニューの全体修正メニューが正しく表示されているか確認してみると、2つのミスを見つけました。1つ目は、ちょっと見落としてだけなんですが、アイキャッチ画像とメニューの間に隙間が空いていること(背景色が見える)もう1つは、ブラウザのウィンドウ画面の幅を小さくすると、メニューのレイアウトが崩れるということ手順0051つ目のアイキャッチ画像とメニューの間に隙間が空いている(背景色が見える)のは、#icatchの縦幅がアイキャッチ画像の縦幅より約7pxほど大きいからです。img要素が300pxなのでそれに合わせてちゃんと指定されていないことが原因と思われます。下の画像のボックスを見てください。『307.273』と表示されていますね。手順006以下のCSSの3行目を#icatchに追加しましょう。300px;}これで1つ目の問題は解決しました。手順007次は、メニューのレイアウトが崩れる問題を解決しましょう。こちらも単純に固定の横幅を指定しなかったことによるレイアウト崩れです。以下のCSSを追加しましょう。780px;}これでメニューが固定幅を保てるようになり、ウィンドウ幅の影響を受けずに済みました。手順008これでアイキャッチ画像とメニューの作成は完了しました。次は、コンテンツ部分を作成していきたいと思います。マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。マネして作ってみよう!(手順解説付き)RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。