マネして作ってみよう!(手順解説付き)前回まででヘッダー部分は作成完了となりました。ここから結構サクサクと仕上げていけると思います。第6回では、画像の赤枠部分のアイキャッチ画像とメニューを作成していこうと思います。手順001アイキャッチ画像の挿入メインの画像を挿入していきたいと思います。COFFEE』なんだよ!って突っ込まれると思いますが...(笑)無料素材を探していたんですが、なかなか見つからなくて異なる店舗名の画像を使う形となりました(笑)ご愛敬とゆうことで、気にしないでくださいね。以前も使用しました、img要素を使用しての画像挿入で、前回はむき出しのままimg要素を使用しましたが、今回は、色々とdiv要素を使って幅を調整しないといけません。12行目を追加してください。ゆるらぎは東京都XX区にあるランチとスイーツがおいしいお店です。画像幅はボックスいっぱいに大きくしたいんですが、ウィンドウサイズを大きくしてみるとウィンドウ全体に画像が伸びちゃってこれではよくはないので、img要素をdiv要素で囲ってサイズを適切な幅に指定しましょう。1,3行目を追加してください。/></div>動画を再生してみるとヘッダーと同じ幅に収まり、画像も親ボックスに対して100%ですが、ウィンドウサイズを変更しても変化しません。次は、メニューを作っていきたいと思います。前回もul要素,li要素,a要素を使ってリストを横並びにしたと思いますので一気に作っていこうと思います。改行するためのbr要素が付いていますので、それ以降に改行が入ります。4~13行目を追加してください。/>アクセス</a></li></ul></div>表示してみると、以前li要素とa要素にスタイルを記述していたのでそれが適応されて既に横並びになってアイコンが付いています。手順002以下のスタイル部分がそうでしたね。今回はアイコンではなく『background-image』に別の画像を差し替えたいのでちょっと変わったセレクタの指定方法を使ってこちらのdiv要素#menuボックスの子ボックスに対してスタイルを書き直していきましょう。メニューのul要素に対して『marginとpadding』が付いているのでそれぞれを『0』にしてメニューを左上部に詰め寄るようにしたいと思います。手順003以下のCSSを追加してください。}手順004メニューの位置が左上に詰め寄りましたね。ul』で指定しています。この指定方法でCSSが適応される要素は、【親ボックスが『#menu』の子ボックスの『ul』】ということになります。これで他のul要素に影響を与えることなくCSSを適応することができます。次は、『a要素』にスタイルを付けていきましょう。手順005displayプロパティにblockの値を指定し、a要素をブロック化することでa要素のサイズを指定することができます。アイキャッチ画像と同じ幅にするため、1つ1つのa要素にwidthで幅を指定してます。アイキャッチ画像の幅が780pxなのでa要素に130pxを指定してあげることでメニューが画像幅と一緒になります。今はまだli要素同士の間に余白があるのでその余白を無くさなければいけないんですが、それはもうちょっと後でやります。a要素の内側の余白を上下10px、左右は0pxを指定します。これにより、上下10pxの余白、左右の余白が0pxになります。fontプロパティで文字色を変更。背景画像には、imagesフォルダ内、下記の画像の赤枠で囲っている画像ファイルを指定しています。手順006background-imageプロパティで値を『url()』にして、『()』の中に画像のパスを指定しています。することで背景画像を表示させることができます。今回はこの辺りで区切って第7回からメニューの続きをしていきたいと思います。マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。マネして作ってみよう!(手順解説付き)RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。