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

  • HTML/CSS

この記事の目次

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

コーディングに関して言うと、模写をして練習をしている方も多くいますね。

Progate、ドットインストール、本など、何を使っても良いのですが、自分の頭で考えてコードを書いてみることが大事です。このコーディング練習教材はコード付きで解説していますが、できれば1度自分で同じように作ってみて、この記事に書いてあるコードと比べてみると、良いと思います。

書き方に明確な正解はありませんので、良いところは採用するなど、考える材料に使ってください。

この記事で出来るサイト

ファイルをダウンロード

※今回のコーディング練習教材はPC版のみです。解説もPCで見やすいように作っています。是非PCで練習してみてください！

前提条件

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

なるべく実務に近い形で作りましたが、実際の案件はもっとデザインは複雑で、ニュースやブログがあればWordPress化も必要ですし、セキュリティ対策など、他にもやることはたくさんあります。あくまで、コーディングの練習教材だと思っていただければ幸いです。

下層ページも含めたバージョンをnotedで600円で販売しています。もしよかったらそちらもよろしくお願いします！

対象者

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

デザイン

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

サイト構成

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

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

コーディング規約

CSS設計に関して

今回の書き方は、僕が使っている独自のCSS設計(SMACSSとBEMベース)を解説しやすいように改良しています。普段はSassで書きますが、Sassにしてしまうと練習できる方が減るので、CSSで書いています。

普段class名の決め方はBEMを採用しているのですが、BlockとElementの解釈など、解説が長くなりそうなので、今回は全てハイフン区切りにしています。トップページであれば必ず先頭にtop-、サービスページ(下層ページ)であれば先頭にservice-としておけばclass名がかぶることはないので、そのようにしています。

CSS設計に関しては、以前書いた記事を参考にしてみてください！また、最後におすすめの書籍も紹介しています。

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

CSSの単位に関して

CSSの単位にはpx, em, rem, %, vwなどがあります。迷いましたが今回は、フォントサイズと余白は全てpxで指定しています。本当はem, remを使った方が良かったりもするので参考記事を載せておきます。

パスに関して

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

SEO対策に関して

SEO対策はやるべきことがたくさんありますが、今回はコーディング練習なのでやっていないことや、ローカルでの練習なので出来ないこともあります。ただし、htmlのタグの使い方に関してはSEO的にマイナスになる書き方はしていません。(プラスになる書き方は存在しません)

アクセシビリティ対策

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

注意事項

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

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

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

headタグ内に書くこと

html 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>コーディング練習</title>
  <meta name="description" content="webkoreの無料コーディング練習教材です。">
  <link rel="stylesheet" href="css/style.css">
</head>

今回はコーディング練習が目的なので上記しか書いていませんが、実際はこれでは不十分です。
headタグ内に書くことに関しては、参考記事を載せておくので、そちらを参考にしてください。

CSSのbase,module,utilityについて

css 
@charset "UTF-8";

/* base */
/* --------------------------------- */

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{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  box-sizing: border-box;
}

body{
  line-height: 1.8;
  min-width: 1140px;
}

a{
  text-decoration: none;
  color: inherit;
  transition: .3s;
}

a:hover{
  opacity: .7;
  transition: .3s;
}

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

/* module */
/* --------------------------------- */

/* btn base */
.m-btn{
  display: block;
  width: 300px;
  text-align: center;
  font-weight: bold;
  padding: 10px;
}

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

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

/* btn colour cta */
.m-btn-cta{
  background-color: #bd2424;
  color: #fff;
}

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

/* utility */
/* --------------------------------- */

.u-wrap{
  width: 1080px;
  margin: 0 auto;
}

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

上記のコードで、base/module/utilityに関しては下記のようにしています。

  • base：リセットCSS
  • module：サイト共通で使用するスタイル、接頭語をmとする。
  • utility：便利クラス、接頭語をuとする。

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

因みにこれ以外にもstateは必ず作り(今回jsを使わないので作っていない)、layoutは場合によって作ります。SMACSSの考え方を自分なりにアレンジしているので、詳しくはSMACSSを勉強してみてください。(※CSS設計の勉強がまだの方は、この1行忘れてもらっても大丈夫です！)

base

今回は横幅を1080pxの固定幅にしています。PC版のみの練習教材ですが、スマホとタブレットでは可変、PCでは固定を想定しています。

そのため、bodyにmin-width: 1140px;が指定しています。(左右に余白30px入るように)

横幅を可変にするか、固定にするかは、サイトのデザインによってどうするか決めるべきです。因みに、LIGさんのメディアは、今回の練習教材と同じで、スマホとタブレットでは可変、PCでは固定です。

要素に対してスタイルを当てているのは、baseでだけで、あとは特に理由がない限り全て単体のclassにスタイルは書きます。

フォントは游ゴシックにしていますが、游ゴシックはIEで表示した際に意図しない余白が入るのでお気をつけください。

module

サイト内で共通で使うスタイルです。

今回はボタンとタイトルしかmodule化していませんが、ページが増えればmodule化した方が良いスタイルは増えます。

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

class名はスタイルに変更があっても、違和感がないようにした方が良いです。例えば.m-btn-ctaが.m-btn-redだった場合、色をオレンジに変更した時にclass名も.m-btn-orangeに変更する必要があり、使っている箇所が多いと特に修正が面倒です。

utility

utilityはmoduleにするほどではないけど、よく使うスタイルとしています。

使っているものしか入れていないので、今回は2つしかありませんが、u-ptb-xs/u-ptb-s/u-ptb-m/u-ptb-l/u-ptb-xlのようなclassを用意して使うこともあります。xs~xlは服のサイズと同じで、めっちゃ小さい~めっちゃ大きいです。ptbはpadding-top & padding-bottomです。

headerのコーディング

header

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

  <nav class="header-nav">
    <ul class="header-nav-list">
      <li class="header-nav-item"><a href="#">ホーム</a></li>
      <li class="header-nav-item"><a href="#">特徴</a></li>
      <li class="header-nav-item"><a href="#">サービス</a></li>
      <li class="header-nav-item"><a href="#">ニュース</a></li>
      <li class="header-nav-item"><a href="#">ブログ</a></li>
      <li class="header-nav-item"><a href="#">会社概要</a></li>
      <li class="header-nav-item"><a href="#">採用情報</a></li>
      <li class="header-nav-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 30px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1;
}

.header-logo{
  width: 80px;
}

.header-nav-list{
  display: flex;
}

.header-nav-item{
  font-weight: bold;
  margin-right: 30px;
}

.header-nav-item:last-child{
  margin-right: 0;
}

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

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

position: sticky;はIEではサポートされていませんが、表示が崩れるわけではなく、ただpositionが効かないだけなのでこれは良しとします。position: fixed;としても良いのですが、その場合また別の問題が生じます。興味があれば下記の参考記事を見てみてください。

キービジュアルのコーディング

kv

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

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

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

.top-kv-btn{
  margin: 40px auto 0;
}

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

class=”top-kv”の直下のdivはこれがないと、直下がclass=”u-wrap”となり、ここにはmargin: 0 auto;があるので、これが原因でIEで配置がずれてしまいます。従ってIE対策で入れています。

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

上下の余白は基本的に上に入れるようにしています。下でも特に問題ないのですが、例えばブログのように投稿数が決まっていないものに対して下に余白を入れると、1番下の行の余白だけ取るといったことがやりにくくなる気がします。(投稿数によって1番下の行の要素数が変わるので)

まぁとはいえ上につけるデメリットがないかと聞かれれば自信はないので、どちらか決めて統一すれば良いのではないかと思っています。

特徴のコーディング

about-1

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

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

.top-feature-txt{
  margin-top: 10px;
  line-height: 2.2;
}

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

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

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

サービスのコーディング

service

html 
<section class="top-service u-wrap u-ptb-m">
  <h2 class="top-service-ttl m-ttl">サービス</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-ttl">サービス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-ttl">サービス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-ttl">サービス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-ttl">サービス4のタイトル</h3>
      <p class="top-service-item-description">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
    </section>
  </div>

  <a href="#" class="top-service-btn m-btn m-btn-primary">サービスをみる</a>
</section>
css 
.top-service-ttl{
  text-align: center;
}

.top-service-list{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.top-service-item{
  width: 49%;
  margin-right: calc(100% - (49% * 2));
  margin-top: 20px;
}

.top-service-item:nth-child(2n){
  margin-right: 0;
}

.top-service-item:nth-child(-n+2){
  margin-top: 0;
}

.top-service-item-ttl{
  font-weight: bold;
  font-size: 18px;
}

.top-service-btn{
  margin: 40px auto 0;
}

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

横2行なので.top-service-listにjustify-content: space-between;でも良いですが、横3行でサービスが5個に変更になった場合、justify-content: space-between;だと表示がいまいちです。擬似要素を使って回避する方法もあるのですが、僕は使っていないです。

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

:nth-child(-n+2)は1,2番目を指定しています。:nth-child(-n+3)にすると1,2,3番目です。

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

本当は画像にはfigureタグを使った方が良いです。

ニュースのコーディング

news

html 
<section class="top-news u-ptb-m">
  <div class="top-news-inner u-wrap">
    <div class="top-news-head">
      <h2 class="top-news-ttl m-ttl">ニュース</h2>
      <div class="">
        <a href="#" class="top-news-btn m-btn m-btn-primary">一覧をみる</a>
      </div>
    </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-ttl">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-ttl">年末年始の営業について。</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-ttl">新サービス『コーディング練習』はじめました。</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-btn{
  width: 120px;
  font-size: 14px;
  padding: 5px;
}

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

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

.top-news-item:first-child{
  margin-top: 0;
}

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

.top-news-item-date{
  display: inline-block;
  margin-right: 20px;
}

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

ブログのコーディング

blog

html 
<section class="top-blog u-wrap u-ptb-m">
  <h2 class="top-blog-ttl m-ttl">ブログ</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-cat">category1</span>
      </div>
      <h3 class="top-blog-item-ttl"><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-cat">category1</span>
      </div>
      <h3 class="top-blog-item-ttl"><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-cat">category1</span>
      </div>
      <h3 class="top-blog-item-ttl"><a href="#">フリーランスになりたい初心者におすすめのプログラミング言語はこれで決まり！！</a></h3>
    </article>
  </div>

  <a href="#" class="top-blog-btn m-btn m-btn-primary">ブログをみる</a>
</section>
css 
.top-blog-ttl{
  text-align: center;
}

.top-blog-list{
  margin-top: 20px;
  display: flex;
}

.top-blog-item{
  width: 32%;
  margin-right: calc((100% - (32% * 3)) / 2);
}

.top-blog-item:nth-child(3n){
  margin-right: 0;
}

.top-blog-item-info{
  margin-top: 5px;
}

.top-blog-item-date{
  display: inline-block;
  font-size: 14px;
  margin-right: 20px;
}

.top-blog-item-cat{
  display: inline-block;
  font-size: 14px;
}

.top-blog-item-ttl{
  font-weight: bold;
  font-size: 18px;
}

.top-blog-btn{
  margin: 40px auto 0;
}

ブログやニュースがある場合、大抵WordPressを使うと思います。

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

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

会社概要と採用情報のコーディング

info

html 
<div class="top-company-info u-ptb-m">
  <div class="top-company-info-inner u-wrap">
    <section class="top-company top-company-info-item">
      <a href="#" class="top-company-link top-company-info-item-link">
        <div class="top-company-img">
          <img src="img/top-company.png" alt="会社概要">
        </div>
        <h2 class="top-company-ttl top-company-info-item-ttl">会社概要</h2>
      </a>
    </section>

    <section class="top-recruit top-company-info-item">
      <a href="#" class="top-recruit-link top-company-info-item-link">
        <div class="top-recruit-img">
          <img src="img/top-recruit.png" alt="採用情報">
        </div>
        <h2 class="top-recruit-ttl top-company-info-item-ttl">採用情報</h2>
      </a>
    </section>
  </div>
</div>
css 
.top-company-info-item{
  width: 48%;
}

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

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

companyとrecruitにもclassはつけていますが、どちらも同じスタイルなので.top-company-info-itemなどのclassをつけてまとめています。

お問い合わせのコーディング

contact-2

html 
<section class="footer-contact u-ptb-m">
  <div class="u-wrap">
    <h2 class="footer-contact-ttl m-ttl">お問い合わせ</h2>
    <p class="footer-contact-txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

    <a href="#" class="footer-contact-btn m-btn m-btn-cta">お仕事のご依頼・ご相談</a>
  </div>
</section>
css 
.footer-contact{
  background:url(../img/footer-contact-bg.png) center / cover;
}

.footer-contact-ttl{
  text-align: center;
}

.footer-contact-txt{
  text-align: center;
  width: 600px;
  margin: 10px auto 0;
  line-height: 2.2;
  font-weight: bold;
}

特に問題ないですね。
今回のようにサイト下部にお問い合わせは必ずと言っても良いくらい入ります。これはCTAと呼ばれています。

フッターのコーディング

footer

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

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

.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright{
  display: block;
  font-size: 12px;
  text-align: center;
}

.footer-nav-list{
  display: flex;
}

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

.footer-nav-item:after {
  content: '/';
  display: inline-block;
  padding: 0 10px;
}

.footer-nav-item:last-child:after {
  display: none;
}

こちらも特に問題ないかと思います。

下層ページはnoteで解説しています！！

下層ページに関しても、解説を作りました。

そちらはnoteの方で500円で販売させてもらっています。

作るデザインは簡単なものですが、

  • 僕なりのコードを書く際の考え方
  • 実際に仕事をする上で気をつける点
  • SEO的なこと
  • 仕事を取る上で有利になるかもしれない情報

などを入れています。

こんな事があるのか！と、これまで知らなかった事を知れる『気づき』があるように作ったつもりです。

noteを見る!!

初心者を半歩くらい脱した方向けのおすすめ書籍

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

その内容を完璧にすれば、かなり理解は深まると思いますが、実務で仕事をする上で学んでおいた方が良いこと、もしくは学ばなければいけないことは、まだあります。最後に初心者を半歩くらい脱した方向けのおすすめ書籍を紹介します。

案件によってはコーディング規約があったりもするので、CSS設計は知っておくと良いです。BEMなど有名なものを採用しても良いですし、有名なものを知った上で独自のCSS設計を採用しても良いと思います。

今回のコーディング練習教材はCSSで書きましたが、Sassで書いた方が効率が良いです。効率化できるところは効率化して、自分の時給を最大化することはフリーランスや起業家にとって、とても重要なことだと感じます。

本の概要に中級者向けとあるだけあって、内容は少しマニアックなものもあります。ただ、実際に使わなくても、出来ることを知っておくことは大事です。Javascriptを使わないと出来ないと思っていたことも、実はCSSだけで実装可能だったり、『へぇ〜そんなこと出来るんだ！』と新しい発見もあると思います。

感想付きでシェアしていただければ、今後の参考にするので、嬉しいです！！

Share

この記事を書いた人

神崎 直人

理系院卒→フリーランス(4年目)。インターネットと読書が好き。就職経験なし、野蛮な生き方してきました。サーバーサイド以外は何でもやります。