🎉 お知らせ：サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

HTML/CSS

無料コーディング練習教材作りました！

Author：Gaku(gaku92014091)

この記事の目次

webデザイン、コーディング、プログラミングの上達への近道は、とにかく自分でたくさん手を動かして練習することです。

コーディングでは、模写をして練習をしている方も多くいます。ただ、模写の場合、正解や解説がないので、模写するサイトによってはあまり良い練習にならないケースもあります。

そこで、簡単な無料コーディング練習教材を作ってみました。

このコーディング練習教材では、コード付きで解説していますが、なるべく1度自分で同じように作ってみてから、解説と比べてみてください。解説が唯一の正解ではありません。良いところは採用するなど、考える材料に使ってください。

この記事で出来るサイト

ファイルをダウンロード

重要

※このコーディング練習教材はPC版のみの実装です。

前提条件

今回作った、無料コーディング練習教材の前提条件と注意事項についてです。

実務ではもっとデザインは複雑で、ニュースやブログがあればWordPress化も必要です。セキュリティ対策など、他にもやることはたくさんあります。あくまで、勉強を初めたばかりの方向けのコーディングの練習教材だと思っていただければ幸いです。

対象者

HTMLのタグやCSSのプロパティについてなど、基礎的なことは解説しないので、初心者を半歩くらい脱した方向けのコーディング練習教材として作りました。

デザイン

今回はコーディングの練習を目的としているので、配色や画像など簡易的にしているところも多くあります。

サイト構成

  • ホーム
  • 特徴
  • サービス
  • ニュース
  • ブログ
  • 会社概要
  • 採用情報
  • お問い合わせ

上記のコンテンツがある想定で、トップページかつPC版のみの練習教材になっています。

コーディング規約

CSS設計に関して

駆け出しの方にもわかりやすいような、独自のCSS設計でコードは書いています。SCSSを使った方が効率的ですが、練習できる対象の方が減るのでCSSのみで書いています。

【初心者向け】模写修行流CSS設計を紹介！

この記事は上記の記事で紹介しているCSS設計に従って書いています。(この記事は上記の記事を読まなくても、進められると思います。)

【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説

CSS設計に関して、まだ勉強したことがない方は、こちらの記事も参考にしてみてください。

PC版のみなので、メディアクエリの記載はありませんが、普段コーディングをする際は小さいサイズから書いた方が、コード量が少なくなって良いです。つまりスマホ→タブレット→PCの順です。

CSSの単位に関して

CSSの単位にはpx, em, rem, %, vwなどがあります。今回は1番直感的で分かりやすいpxで指定しています。

アクセシビリティへの考慮や拡張性・メンテナンス性をさらに高める場合、いくつかの単位で使い分けるのがベストです。

参考記事

パスに関して

パスは相対パスで指定しています。WordPressでは絶対パスが使われていたり、案件の規模によってはルート相対パスの方が適していたりもするので、こちらも参考記事を載せておきます。

参考記事

SEO対策に関して

SEO対策はやるべきことがたくさんありますが、今回はコーディング練習なのでやっていないことや、ローカルでの練習なので出来ないこともあります。

ただし、HTMLのタグの使い方に関してはSEO的にマイナスになる書き方はしていません。

参考記事

画像の最適化に関して

今回はPC版のみの練習なので、画像の最適化はしていません。

レスポンシブイメージは複雑で解説も長くなってしまうので省いています。

アクセシビリティ対策

webサイトを閲覧する方の中には身体障害者の方やお年寄りもいます。

アクセシビリティ対策とは、そのような方でもwebサイトの情報にアクセスしやすくするための対策です。今回は初心者を半歩くらい脱した方向けなので、アクセシビリティ対策は特別していません。

コピペで使える！HTML・CSSでフォームをおしゃれにカスタマイズする方法

アクセシビリティを意識したフォームのカスタマイズに関する記事も書いているので、興味がある方は是非ご覧ください。

参考記事

注意事項

有料での販売やスクールなどの教材にしなければ、個人のポートフォリオに使うなど、自由にしてもらって良いです。

ただし、何か問題が起きても、責任は一切負えませんのでご了承ください。

また、書き方は人それぞれな部分もあるので、参考までにお願いします。

今回作るサイトのコーディング解説

セクションやブロックごとに切り取って、解説をします。

headタグ内に書くこと

html 
<head>
    <meta charset="utf-8" />
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1"> -->
    <meta name="robots" content="noindex,nofollow" />
    <title>サイトタイトル</title>
    <meta name="description" content="サイトの説明。サイトの説明。サイトの説明。サイトの説明。サイトの説明。" />

    <!-- favicon/webclipicon -->
    <!-- <link rel="shortcut icon" href="img/favicon.png" />
    <link rel="apple-touch-icon-precomposed" href="img/webclip.png" /> -->

    <!-- ogp -->
    <!-- <meta property="og:site_name" content="サイトタイトル" />
    <meta property="og:url" content="https://hoge.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="サイトタイトル - キャッチコピー" />
    <meta property="og:description" content="サイトの説明。サイトの説明。サイトの説明。サイトの説明。サイトの説明。" />
    <meta property="og:image" content="img/ogp.png" />
    <meta property="og:locale" content="ja_JP" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@hoge" />
    <meta name="twitter:description" content="サイトの説明。サイトの説明。サイトの説明。サイトの説明。サイトの説明。" />
    <meta name="twitter:image:src" content="img/ogp.png" /> -->

    <!-- css -->
    <link rel="stylesheet" href="css/style.css?202002272134" />
</head>

今回はコーディング練習が目的なので仮で入れています。

headタグ内に書くことに関して詳しい解説がある、参考記事を載せておきます。

参考記事

CSSを役割ごとに分類

CSSは役割ごとに分類して、コメントで区切って書くと後でみた見返した際や他の人が見た際も分かりやすくて良いです。

css 
/* =============================== */
/* foundation */
/* =============================== */
...

/* =============================== */
/* utility */
/* =============================== */
...

/* =============================== */
/* module */
/* =============================== */
...

/* =============================== */
/* layout */
/* =============================== */
...

/* =============================== */
/* page */
/* =============================== */
...

このようにfoundation / utility / module / layout / page に分類しています。それぞれどんな役割か解説します。

カテゴリ 役割
foundation リセットCSSや全体の共通設定
module ページを跨いで使い回すスタイル
utility moduleにするほどでもないちょっとした使い回すスタイル
layout headerやfooterなどレイアウトを作るためのスタイル
page 各ページでしか使わないスタイル

CSSを書く際の考え方は色々ありますが、共通のスタイルは出来ればまとめるようにしたいのでこのような設計にしています。

foundationカテゴリのreset

css 
/* reset */
html {
    color: #000;
    background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: "";
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    *font-size: 100%;
}

legend {
    color: #000;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

/* base */
* {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
    line-height: 1.8;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

foundationカテゴリはresetとbaseに分けています。

resetでは、ほぼ全てのスタイルがリセットされるようにこのような指定をしています。ハード系のリセットCSSを使えば、ほぼ同じようなコードと見た目になるはずです。

baseはそのサイト独自のリセットや初期設定だと思ってもらえれば分かりやすいと思います。

フォントはブラウザによって適応されるものが違うので注意が必要です。参考記事を載せておきます。

参考記事

moduleカテゴリ

css 
/* button base */
.m-button {
    display: inline-block;
    border: none;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 8px 24px;
}

/* button color primary */
.m-button--primary {
    background-color: #1a1a1a;
    color: #fff;
}

/* button color secondary */
.m-button--secondary {
    background-color: #fff;
    color: #1a1a1a;
}

/* button color accent */
.m-button--accent {
    background-color: #bd2424;
    color: #fff;
}

/* button size medium */
.m-button--size-m {
    width: 300px;
}

/* title */
.m-title {
    font-size: 32px;
    font-weight: bold;
}

.m-title--center {
    text-align: center;
}

/* cta */
.m-cta {
    background-image: url(../img/footer-contact-bg.png);
    background-position: center;
    background-size: cover;
}

.m-cta-text {
    text-align: center;
    max-width: 600px;
    margin: 8px auto 0;
    line-height: 2.2;
    font-weight: bold;
}

.m-cta-button {
    margin-top: 40px;
    text-align: center;
}

ページを跨いで使い回すパーツのスタイルです。

  • ボタン
  • タイトル
  • CTA

今回はこれらをmodule化しています。

今回はトップページしかありませんが、下層ページによっては、他にもmodule化すべき箇所は出てくるはずです。

全デザインを支給されてからコーディングスタートする際は、まずはデザインを見て、どこをmodule化すべきか考えると良いです。

今回のボタンは簡易的なものにしていますが、本来は矢印をつけるなどして、クリック出来ることをデザインで表現すべきです。また、お問い合わせのボタンは最重要ボタンなので、他と明確に色を変えた方が良いと言われています。

カラーやサイズのバリエーションは.hoge--variationのようにハイフンを2つ使用するルールにしています。CSS設計を勉強したことある方には馴染みがあると思います。

class名はスタイルに変更があっても、違和感がないようにした方が良いです。例えば.m-btn-accentが.m-btn-redだと、色を変更する際にclass名も変更することになってしまいます。

ボタンにたくさん指定があるのはaだけではなく、buttonでも使えるようにしているためです。

utilityカテゴリ

css 
.u-ptb {
    padding: 80px 0;
}

moduleにするほどでもないちょっとした使い回すスタイルです。

.u-ptb-80など具体的な数値でたくさん作る方もいますが、あまりお勧めしません。utilityは必要最小限にした方が、コードが煩雑にならずにすみます。

余白関連であれば、多くても、u-ptb-xs / u-ptb-s / u-ptb-m / u-ptb-l / u-ptb-xlのようにサイズ別で5個くらいが良いです。xs~xlは服のサイズと同じで、めっちゃ小さい~めっちゃ大きいです。ptbはpadding-top & padding-bottomです。

layoutカテゴリ

layoutカテゴリはheaderやfooterなどのレイアウトを作るためのスタイルです。これ以外にも例えば、サイドバーなんかもこのカテゴリに属します。

css 
.l-container {
    width: 1080px;
    margin: 0 auto;
}

.l-containerはコンテンツの幅を定義したもので、何度も使うclassになります。今回は1パターンしかありませんが、サイトのデザインによっては.l-container-sのように何パターンか作ることもあります。

headerのデザイン

html 
<header class="header">
    <h1 class="header-logo">
        <a href="#">
            <img src="img/logo.png" width="140" height="48" alt="株式会社コーディング練習" />
        </a>
    </h1>

    <nav class="header-nav">
        <ul class="header-list">
            <li class="header-item"><a href="#">ホーム</a></li>
            <li class="header-item"><a href="#">特徴</a></li>
            <li class="header-item"><a href="#">サービス</a></li>
            <li class="header-item"><a href="#">ニュース</a></li>
            <li class="header-item"><a href="#">ブログ</a></li>
            <li class="header-item"><a href="#">会社概要</a></li>
            <li class="header-item"><a href="#">採用情報</a></li>
            <li class="header-item"><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
css 
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    width: 100%;
    padding: 0 24px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
}

.header-logo {
    width: 70px;
}

.header-list {
    display: flex;
}

.header-item {
    font-weight: bold;
}

.header-item + .header-item {
    margin-left: 24px;
}

headerのコードです。

特に難しいことはしていません。ロゴとナビをflexboxで横並びに、そしてナビの中の要素もflexboxで横並びにしています。

見出し(h1)はSEO的に大事な要素なので、本来画像にしない方が良いのですが、コーポレートサイトのトップページはロゴが見出しになることが多いので、その場合は仕方ないです。見出しで使う場合はalt属性を必ず入れましょう。

position: sticky;はIEではサポートされていませんが、表示が崩れるわけではなく、ただpositionが効かないだけなので良しとします。

footerのデザイン

html 
<footer class="footer">
    <small class="footer-copyright">&copy; 2020 コーディング練習 inc.</small>

    <nav class="footer-nav">
        <ul class="footer-list">
            <li class="footer-item"><a href="#">ホーム</a></li>
            <li class="footer-item"><a href="#">特徴</a></li>
            <li class="footer-item"><a href="#">サービス</a></li>
            <li class="footer-item"><a href="#">ニュース</a></li>
            <li class="footer-item"><a href="#">ブログ</a></li>
            <li class="footer-item"><a href="#">会社概要</a></li>
            <li class="footer-item"><a href="#">採用情報</a></li>
            <li class="footer-item"><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</footer>
css 
.footer {
    padding: 24px;
    color: #fff;
    background-color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    display: inline-block;
    font-size: 12px;
}

.footer-list {
    display: flex;
}

.footer-item {
    font-size: 12px;
}

.footer-item:not(:last-child):after {
    content: "/";
    display: inline-block;
    margin: 0 8px;
}

footerも特に難しいことはしていません。

トップページのコーディング(キービジュアル編)

キービジュアルのデザイン

html 
<div class="top-kv">
    <div class="">
        <div class="l-container">
            <p class="top-kv-main-copy">KVのコピーはとても大切です!!</p>
            <p class="top-kv-sub-copy">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
            <div class="top-kv-button">
                <a href="#" class="m-button m-button--accent m-button--size-m">お仕事のご依頼・ご相談</a>
            </div>
        </div>
    </div>
</div>
css 
.top-kv {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/top-kv.png);
    background-size: cover;
    background-position: center;
}

.top-kv-main-copy {
    font-weight: bold;
    font-size: 48px;
    text-align: center;
}

.top-kv-sub-copy {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.top-kv-button {
    margin-top: 40px;
    text-align: center;
}

背景画像を入れて、コピーやお問い合わせのリンクを上下中央に配置しました。上下中央配置はpositionなど他のやり方もあります。

class=”top-kv”にflexを指定して、上下中央にしています。この時に直下にmargin: 0 auto;があるとIEで表示崩れが起きるので、classの付いていないdivを入れています。

お問い合わせのリンクはmodule化したclassを使っているので、記述がこれだけになっています。module化するメリットはこのようにコード量が少なくて済むことと修正が楽なことです。

module化する要素には大きさ(width/height)や外側の余白(margin)や位置(position)は指定しないのが"原則"です。例外を許容するかは、設計次第です。m-buttonには余白や位置を指定していないので、それらはtop-kv-buttonで指定しています。

余白は上と左に入れるようにしています。統一していればどちらでも大きな違いは無いです。

トップページのコーディング(特徴編)

特徴のデザイン

html 
<div class="top-feature u-ptb">
    <div class="l-container">
        <p class="top-feature-copy">特徴のキャッチコピー!!</p>
        <p class="top-feature-text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス</p>
        <div class="top-feature-button">
            <a href="#" class="m-button m-button--secondary">私たちの特徴をみる</a>
        </div>
    </div>
</div>
css 
.top-feature {
    color: #fff;
    background-color: #1a1a1a;
}

.top-feature-copy {
    font-size: 32px;
    font-weight: bold;
}

.top-feature-text {
    margin-top: 8px;
    line-height: 2.2;
}

.top-feature-button {
    margin-top: 40px;
}

特に難しいことはないです。サイズ感など調整しただけです。

.top-feature-copyに書いているスタイルはmodule化した.m-titleに書いているスタイルと同じですが、コピーはタイトルではないので.m-titleは使いませんでした。ここの考え方は人それぞれかなと思います。

トップページのコーディング(サービス編)

サービスのデザイン

html 
<section class="top-service u-ptb">
    <div class="l-container">
        <h2 class="m-title m-title--center">サービス</h2>

        <div class="top-service-list">
            <section class="top-service-item">
                <div class="top-service-item-img">
                    <img src="img/top-service1.png" alt="サービス1のタイトル" />
                </div>
                <h3 class="top-service-item-title">サービス1のタイトル</h3>
                <p class="top-service-item-description">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            </section>

            <section class="top-service-item">
                <div class="top-service-item-img">
                    <img src="img/top-service2.png" alt="サービス2のタイトル" />
                </div>
                <h3 class="top-service-item-title">サービス2のタイトル</h3>
                <p class="top-service-item-description">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            </section>

            <section class="top-service-item">
                <div class="top-service-item-img">
                    <img src="img/top-service3.png" alt="サービス3のタイトル" />
                </div>
                <h3 class="top-service-item-title">サービス3のタイトル</h3>
                <p class="top-service-item-description">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            </section>

            <section class="top-service-item">
                <div class="top-service-item-img">
                    <img src="img/top-service4.png" alt="サービス4のタイトル" />
                </div>
                <h3 class="top-service-item-title">サービス4のタイトル</h3>
                <p class="top-service-item-description">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            </section>
        </div>

        <div class="top-service-button">
            <a href="#" class="m-button m-button--primary m-button--size-m">サービスをみる</a>
        </div>
    </div>
</section>
css 
.top-service-list {
    display: flex;
    flex-wrap: wrap;
}

.top-service-item {
    width: 49%;
    margin-top: 24px;
}

.top-service-item:not(:nth-child(2n - 1)) {
    margin-left: calc(100% - (49% * 2));
}

.top-service-item-title {
    font-weight: bold;
    font-size: 18px;
    margin-top: 8px;
}

.top-service-button {
    margin-top: 40px;
    text-align: center;
}

よくあるレイアウトです。

横2行なのでjustify-content: space-between;を使っても良いですが、横3行でサービスが5個に変更になった場合、justify-content: space-between;だと見た目がいまいちです。

サービスの個数が増えた場合のことや、横2行が3行や4行に変更になった際に修正がなるべく少なくて済むように、考慮して書くのがベストですが、初めのうちはあまり神経質になりすぎなくても良いと思います。

このようなレイアウトの余白調整はネガティブマージンを使うものなど、他の方法もあるので、興味があれば調べてみてください。

トップページのコーディング(ニュース編)

ニュースのデザイン

html 
<section class="top-news u-ptb">
    <div class="l-container">
        <div class="top-news-head">
            <h2 class="m-title">ニュース</h2>
            <a href="#" class="m-button m-button--primary">一覧をみる</a>
        </div>

        <div class="top-news-list">
            <article class="top-news-item">
                <a href="#" class="top-news-item-link">
                    <span class="top-news-item-date">2020/01/01</span>
                    <h3 class="top-news-item-title">HPリニューアルしました。</h3>
                </a>
            </article>

            <article class="top-news-item">
                <a href="#" class="top-news-item-link">
                    <span class="top-news-item-date">2020/01/01</span>
                    <h3 class="top-news-item-title">年末年始の営業について。</h3>
                </a>
            </article>

            <article class="top-news-item">
                <a href="#" class="top-news-item-link">
                    <span class="top-news-item-date">2020/01/01</span>
                    <h3 class="top-news-item-title">新サービス『コーディング練習』はじめました。</h3>
                </a>
            </article>
        </div>
    </div>
</section>
css 
.top-news {
    background-color: #fafbfb;
}

.top-news-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-news-list {
    margin-top: 24px;
}

.top-news-item {
    margin-top: 8px;
}

.top-news-item-link {
    background-color: #fff;
    padding: 24px;
    display: flex;
    align-items: center;
}

.top-news-item-date {
    color: #999;
}

.top-news-item-title {
    margin-left: 24px;
}

sectionとarticleタグの使い分けは有名な制作会社の実績を見ても使い方が様々だったり、全く使っていないところもあります。

参考記事

トップページのコーディング(ブログ編)

ブログのデザイン

html 
<section class="top-blog u-ptb">
    <div class="l-container">
        <h2 class="m-title m-title--center">ブログ</h2>

        <div class="top-blog-list">
            <article class="top-blog-item">
                <a href="#" class="top-blog-item-thumbnail">
                    <img src="img/top-blog1.png" alt="Twitterの裏ワザ、検索コマンドの紹介！条件付きで検索可！" />
                </a>
                <div class="top-blog-item-info">
                    <span class="top-blog-item-date">2020/01/01</span>
                    <span class="top-blog-item-category">category1</span>
                </div>
                <h3 class="top-blog-item-title"><a href="#">Twitterの裏ワザ、検索コマンドの紹介！条件付きで検索可！</a></h3>
            </article>

            <article class="top-blog-item">
                <a href="#" class="top-blog-item-thumbnail">
                    <img src="img/top-blog2.png" alt="ブログ30記事達成したからPV数や収益を公開してみる！！" />
                </a>
                <div class="top-blog-item-info">
                    <span class="top-blog-item-date">2020/01/01</span>
                    <span class="top-blog-item-category">category1</span>
                </div>
                <h3 class="top-blog-item-title"><a href="#">ブログ30記事達成したからPV数や収益を公開してみる！！</a></h3>
            </article>

            <article class="top-blog-item">
                <a href="#" class="top-blog-item-thumbnail">
                    <img src="img/top-blog3.png" alt="フリーランスになりたい初心者におすすめのプログラミング言語はこれで決まり！！" />
                </a>
                <div class="top-blog-item-info">
                    <span class="top-blog-item-date">2020/01/01</span>
                    <span class="top-blog-item-category">category1</span>
                </div>
                <h3 class="top-blog-item-title"><a href="#">フリーランスになりたい初心者におすすめのプログラミング言語はこれで決まり！！</a></h3>
            </article>
        </div>

        <div class="top-blog-button">
            <a href="#" class="m-button m-button--primary m-button--size-m">サービスをみる</a>
        </div>
    </div>
</section>
css 
.top-blog-list {
    display: flex;
    flex-wrap: wrap;
}

.top-blog-item {
    margin-top: 24px;
    width: 32%;
}

.top-blog-item:not(:nth-child(3n - 2)) {
    margin-left: calc((100% - (32% * 3)) / 2);
}

.top-blog-item-info {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-blog-item-date {
    font-size: 12px;
    color: #999;
}

.top-blog-item-category {
    font-size: 12px;
}

.top-blog-item-title {
    font-weight: bold;
    font-size: 18px;
    margin-top: 8px;
}

.top-blog-button {
    margin-top: 40px;
    text-align: center;
}

ブログやニュースのような投稿するコンテンツがある場合は、WordPressを使うことが多くなります。

誰が投稿するかわからないので、誰がどんな投稿をしても問題がないようにすべきです。例えば、今回の書き方はサムネイルが全て同じ縦横比の画像で投稿される前提です。本当はこれはあまり良くありません。1枚縦長の画像に差し替えてみればわかります。

対応策はpositionで余分な部分をカットする方法、object-fit(IE対応なし)を使う方法などがあります。どんな比率の画像が入っても見た目が崩れないように、対応をすべきです。

参考記事

トップページのコーディング(会社概要と採用情報編)

会社概要と採用情報のデザイン

html 
<div class="top-company-info u-ptb">
    <div class="l-container">
        <div class="top-company-info-inner">
            <!-- top-top-company -->
            <section class="top-company-info-item">
                <a href="#" class="top-company-info-item-link">
                    <div class="top-company-info-img">
                        <img src="img/top-company.png" alt="会社概要" />
                    </div>
                    <h2 class="top-company-info-title">会社概要</h2>
                </a>
            </section>
            <!-- top-top-company end -->

            <!-- top-top-recruit -->
            <section class="top-company-info-item">
                <a href="#" class="top-company-info-item-link">
                    <div class="top-company-info-img">
                        <img src="img/top-recruit.png" alt="採用情報" />
                    </div>
                    <h2 class="top-company-info-title">採用情報</h2>
                </a>
            </section>
            <!-- top-top-recruit end -->
        </div>
    </div>
</div>
css 
.top-company-info {
    background-color: #d2d2d2;
}

.top-company-info-inner {
    display: flex;
    justify-content: space-between;
}

.top-company-info-item {
    width: 48%;
}

.top-company-info-item-link {
    display: block;
}

.top-company-info-title {
    background-color: #fff;
    font-weight: bold;
    font-size: 20px;
    padding: 8px;
    text-align: center;
}

特に難しい箇所はありません。

この記事の読者におすすめしたい書籍

市販で売られている書籍の大半は初心者をターゲットとしています。

その内容を完璧にすれば、理解は深まると思いますが、仕事をする上で学んでおいた方が良いこと、もしくは学ばなければいけないことは、まだあります。

最後におすすめしたい書籍を紹介します。

CSS設計に関するおすすめの書籍

趣味レベルではなく、仕事で使うのであればCSS設計の理解は必須です。

案件によってはコーディング規約がある場合もあるので、有名なCSS設計は一通り学んでおく方が良いです。

有名なものを採用しても良いですし、独自のCSS設計を採用しても良いと思います。

CSS設計に関する書籍

SCSSに関するおすすめの書籍

今回のコーディング練習教材はCSSで書きましたが、SCSSで書いた方が効率が良いです。効率化を極めることはとても重要です。

Sassに関する書籍

その他おすすめの書籍

tips的な情報も知っていると、とても便利です。

実際に使わなくても、出来ることを知っておくことは大事です。JavaScriptを使わないと出来ないと思っていたことも、実はCSSだけで実装可能だったり、新しい発見もあると思います。

その他おすすめ書籍

駆け出しエンジニアのためのコーディング練習教材

Coming Soon

模写修行メディアは駆け出しデザイナー・エンジニアを
応援するメディアです

© 2021 模写修行 media.