なきちこんにちは、かなきち(@kanakichi0801)です。前回の続きで、今回は以下の部分をコーディングして行きます。40px;}もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね!以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。コーディングルール初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。デザインデータを元に計画をたてるまずは、デザインを確認しましょう!デザインデータはこちらをクリック。デザインデータを元に以下のように考える。かなきちメモデザイン全体を見た時に、各エリアのコンテンツ幅は同じ。MENUエリアには背景があるため、背景を指定できるように大枠(クラス名:about、menu、access)を作ります。中のタグには、[エリア名]__innerという形でクラス名をつける。タイトルは各エリアで使いまわせそうなので、パーツ化してみよう。使って横に並べてみよう...などなどを事前に考えます。それぞれのエリアで使えるタグ構造を考えよう今回は、かなきちメモで紹介したように、大枠には、各エリア名のクラス名を使い、中のタグには、[エリア名]__innerという形でクラス名をつけるルールを作りました。</div></div>タイトルのパーツ化タイトルのHTML構造どのエリアでも使えるようなクラス名を指定します。今回は、base__titleにしました。</div>タイトルのスタイルbase__titleは共通で使用するので、「PARTS」の中に記述します。.2rem;}h2を含むタグ(base__title)に共通して適用されるスタイルを記述します。boldで太文字に、colorで文字色を指定しました。ポイント!パーツ化するコツは、パーツ自体に他の要素との余白は書かないことです。パーツ単体のスタイルを記述し、どこでも流用ができるようにします。最初は装飾に画像を使おうか考えるかもしれませんが、CSSで実装可能な部分はできるだけCSSで実装しましょう。装飾」で検索すればたくさんのサンプルコードが出てきますので練習で実装するのもおすすめです。#ccc)を追加します。ポイント!長方形はdivを使って作成しています。centerでセンター寄せできません。その為、marginの左右にautoを指定して中央寄せにしています。個人的に、この書き方(divを使った)は、あまり好きではないのでブログの下部では擬似要素を使った書き方を紹介しています。固有のスタイルABOUTは、前回追加した「MV」の次に記述して行きます。ここは難しくないのでコードだけ載せておきますね。</div></div>これだとabout__item中にタグを追加したいときに、全てのコードへの書き直しが発生してしまいます。手間を減らす為にパーツは1つだけ書き、スタイルが確定してからHTMLで要素を増やすようにしましょう。</div></div>3カラムのスタイルabout__itemの幅は320pxで指定します。about__itemの下部にボーダー(border-bottom)をつけるので、要素の高さを337pxで固定しました。#74859f;}3カラムは、inline-blockを使用して実装して行きます。inline-blockの使い方は、以下の記事で使い方は説明しているので飛ばしますね。blog.mimipen.net以下のように、about__itemのタイトルとテキストのスタイルを指定します。1.5;}about__itemのスタイルを指定し終わったら、HTMLを複製しましょう。li)に挑戦してみよう最後に、絶品ピザとケーキ、それぞれの左側に余白を追加します。それぞれ固有のクラス名を追加するのもいいですがスマートに書きたいので、以下のセレクタを使用します。40px;}隣接した要素に適用する、隣接セレクタです。同階層で隣接している次の要素に対してスタイルを適用することができます。次のabout__itemにスタイルを指定できます。これは同じ条件を持つ要素全てに適用されます。絶品ピザとケーキの要素、それぞれ左側に余白を指定しました。こちらで以上になります。コードと大きく違う点は、タイトルの下にあるライン装飾を::afterを使ってCSSで擬似的に要素を作り出したことでしょうか。これを擬似要素と言います。今回は、CSS初心者...2019-07-29marginとpaddingの違いをアボカドを使ってイラスト付きで解説!【CSS初心者入門】こんにちは、かなきち(@kanakichi0801)です。かなきちスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。