なきちこんにちは、かなきち(@kanakichi0801)です。前回の続きで、今回は以下の部分をコーディングして行きます。44px;}もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね!以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。コーディングルール初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。デザインデータを元に計画をたてるまずは、デザインを確認しましょう!デザインデータはこちらをクリック。メニューエリアのデザインデータを元に以下のように考える。かなきちメモ(クラス名や使用するプロパティを考える)左メニューをmenu__cts__left、右メニューをmenu__cts__rightとし、floatを使って左右に配置しよう。menu__box(タイトルとメニューのセット)を作成し使いまわそう。メニューの料金はpriceとして、floatを使って右寄せにしよう。</div></div>クラス名のルール付けとh2(base__title)のパーツ化を以下の記事でしました。blog.mimipen.netDRINKは左側、FOOD・DESSERTは右側に配置したいので、それぞれmenu__cts__left、menu__cts__rightとクラス名を指定し、それらを囲うdivタグにmenu__ctsクラスを指定しました。ここでは、floatプロパティを使用したいので、menu__ctsに以下の記事でパーツ化したcfというクラス名を記述しています。right;}menuに背景色(#e8edf3)を指定しました。#e8edf3;}menu__cts__left、menu__cts__rightに幅490pxを指定します。rightで右寄せにしました。right;}floatの使い方については、以下の記事を参考にしてください。</div></div>メニューのカテゴリータイトル(DRINK/飲み物)をh3タグで実装し、メニューと料金をmenu__box__itemというdivタグでひとまとめにしました。料金の円マーク(特殊文字)に文字コード(&yen;)を使用しました。特殊文字や記号がうまく表示されないのはなぜ?文字には、HTMLで直接記述できない特殊文字や記号があります。うまく読み込めずブラウザごとに表示が変わってしまったり文字化けして見た目が違うものになってしまう場合があります。それを避けるために、特殊文字や記号を表示させたい場合は、それらを文字コードで記述しましょう。right;}メニューのカテゴリータイトル(DRINK/飲み物)に背景色(#74859f)を指定し、余白などを調整しました。#fff;}menu__box__itemの余白を調整し、下にボーダーを指定しました。#74859f;}料金を右寄せにします。floatを使う場合は親要素にクリアフィックスを指定します。※今回は事前にクリアフィックスを用意してあるので親要素にcfというクラスを追加します。right;}メニュー表を流し込むここまで見た目ができたら、メニューの内容を書き足していきます。</div></div>隣接セレクタを使いメニュー間に余白を指定するメニューが増えた時も想定し、隣接セレクタを使い上に余白を指定します。44px;}隣接セレクタについては以下の記事で紹介しているのでそちらを参照してください。44px;}まとめ今回は、これまで勉強してきたCSSプロパティを使い、メニュー表を実装しました!また、HTMLで特殊文字を文字コードを使用して表示させてみましたがいかがだったでしょうか?最初はデザインデータを見ても、どんなふうに実装すれば良いかわからないものです。たくさんのデザインを実装していく中で複雑なデザインも実装できるようになっていきますので、焦らず着実にコーディングしていきましょう!慣れてくれば、以下のように吹き出しやタイトル、ボタンなどもコーディングできるようになります。イラスト以外はコーディングで実装しています。以下にHTMLタグもしっかり使ったコードも載せておくので参考に見てみてください。44px;}今回、初心者用のコードと大きく違う点は特にありませんが、メニュー表なのでリストタグ(li)を積極的に使用しています。li)の使い方こんにちは、かなきち(@kanakichi0801)です。かなきちスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。