Lesson4 11. ポートフォリオのコーディング解説

それではより実践的に、Lesson3で制作していたポートフォリオサイトの理解を深めていきましょう。まずはサイトのファイル構成を確認します。

この中で実際にページとしてブラウザに表示されるのはindex.htmlです。images・cssフォルダの中にある画像やファイルは、index.htmlからHTMLコードで指定されて、呼び出されることになります。

11.1 ファイルパスについて

画像やCSSファイルをHTMLで読み込む際に「ファイルパス」というものを使います。ファイルパスとは、HTML・CSSのテキストファイルや画像など、呼び出すファイルの場所を指定する方法のことです。ページの中でリンクを貼ったり、画像を読み込んで表示させる際に、呼び出し元のページ(例えば今回はindex.html)から見て、読み込みたいファイルがどこにあるのか指定して教えてあげます。パスの指定方法は「相対パス」「絶対パス」「ルートパス」と呼ばれる3つの方法があります。

相対パス

基本となるパスの書き方です。「パスを書くそのファイルから見た、呼び出すファイルの位置」になります。例えば下図のような構成のサイトがあると仮定します。

青の層にあるindex.htmlがサイトのトップページになります。青の層とピンクの層は「階層」になっていて、ピンクのほうが下階層になります。image.jpgstyle.cssはそれぞれ同じ階層にいますが、フォルダの中に入っているため見えない壁があります。

最初にトップページからcssフォルダの中にあるstyle.cssを呼び出してみましょう。

HTMLは次のようになります。

<link rel="stylesheet" href="./css/style.css">

順番は、トップページと同じ階層にいる./(./は同じ階層にある、という意味です)cssフォルダの中の./cssstyle.cssを呼び出す./css/style.cssとなります。フォルダの区切りには/を使います。imagesフォルダの中のimage.jpgを呼び出すときも同じです。

<img src="./images/image.jpg" alt="サンプル写真">

トップページからworksフォルダのindex.htmlにリンクを張る場合は

<a href="./works/index.html">Worksへのリンク</a>

またはindex.htmlというファイル名に限りファイル名の省略が可能です。

<a href="./works">Worksへのリンク</a>

これはindex.htmlが「デフォルトドキュメント」と呼ばれるもので、ブラウザやサーバーが「index」とつくものを最初に表示させるようにできているためです。よくサイトを見ているとhttps://l-works.designやhttps://l-works.design/demodayなどindex.htmlがついてなくても表示されているのは、そのような仕組みがあるからです。もしトップページをtoppage.htmlとしていた場合はhttps://l-works.design/toppage.htmlとしなければ表示されません。html以外のデフォルトドキュメントには以下のようなものがあります。

  • index.htm
  • index.shtml
  • index.cgi
  • index.php

もしCSSファイルをindex.cssにしても省略はできないので注意しましょう。

ではパスの説明に戻ります。次はcontactフォルダのindex.htmlからCSSファイルを呼び出す場合です。

contactのindex.htmlstyle.cssは同じ階層にはいますが、壁があるので./では呼び出せません。この場合は一つ上の階層へ行って../(../は一つ上の階層という意味です)、cssフォルダへ行き../css、その中のstyle.cssを呼び出す../css/style.cssとなります。

works/index.htmlのHTMLは次のようになります。

<link rel="stylesheet" href="../css/style.css">

画像を呼び出す場合はリンクを張る場合も同じく../を使います。../は階層ごとに1セットずつ増えます。

例えば、worksフォルダの中にさらにworks1とworks2のフォルダがあり、その中のindex.htmlからstyle.cssを呼び出す場合は

<link rel="stylesheet" href="../../css/style.css">

階層が一つ増えているので../../となります。CSSが読み込めない、画像が表示されない場合などはこのパスを間違えている可能性が高いです。再度位置関係と階層を確かめてみましょう。

絶対パス

絶対パスは呼び出したいファイルが同じディレクトリ内になく、外部で公開されている場合などに使います。世界中の誰が見ても参照できる位置を示します。

例えば今回のFont Awesome用のスタイルシートのように外部で公開されているものを呼び出す場合

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

のように

<link rel="stylesheet" href="http://ドメイン名/css/style.css">などとなります。相対パスが自分の家の敷地内にあるものを呼び出すのに対し、絶対パスは自分の家から隣や遠くの家の敷地内にあるものを呼び出すイメージです。

ルートパス

ルートパスは「サイトルートパス」や「サイトルート相対パス」とも呼ばれることがあります。大規模なサイトで、サイトの構成が変わり階層も変わってしまった場合、相対パスだとすべてパスを書き換えなければいけません。ミスも出やすいですし、時間もかなりかかるでしょう。

このような場合に備えて、サイトのルートから(今回の例であれば「demo」フォルダがルート)見たパスになります。最初につける/がルートを意味します。ルートパスで書く場合はトップページからstyle.cssを呼び出す場合も、worksディレクトリやさらにその下のworks1のページから呼び出す場合も、サイトルート(demo)から見た位置関係になるのですべて

<link rel="stylesheet" href="/css/style.css">

と書けばいいことになります。

ただしルートパスはローカル環境(サーバーにアップしていない状態)で見ると正しく表示できません。また、サーバーによってルートの位置が違う場合があるので、うまく表示できない場合はルートの位置を確認してみましょう。

11.2 HTMLの基本構成

パスについても理解ができたので、次にHTMLのベースを確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Web Designer - Taro Nurumayu</title>
        <meta name="description" content="Webデザイナー ぬるま湯 太郎のポートフォリオサイトです。東京を中心に活動しています。">
        <meta name="keywords" content="Web, デザイン, デザイナー, ポートフォリオ, Web制作">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
        <link rel="stylesheet" href="./css/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>

    </body>
</html>

<!DOCTYPE html>でHTML文書の宣言をしたあと、HTMLの開始タグ<html>にlang属性で文書の言語コードを指定します。<html lang="ja">はこの文書内の基本言語が日本語であることを示しています。その他にen(英語)・it(イタリア語)・zh(中国語)などがあり、文書の途中で言語が変わる場合は<p lang="en">などと指定できます。lang属性は省略も可能ですが、検索エンジンの補助や音声合成装置の補助となるため、忘れず指定するようにしましょう。

参考:html要素の言語属性を用いる

<meta>タグはHTML文書に関する様々な情報を指定します。それぞれの属性については以下を確認してください。

属性用途
charset文字コードを指定します。UTF-8が一般的ですが、その他にShift-JISEUC-JPがあります。ページが文字化けしてしまう場合はこの文字コードが指定されていない、もしくは実際の文字コードとは異なる文字コードを指定している場合がありますので確認してみましょう。
name=”description”このページの簡単な説明文を書きます。サイト全体を通して同じものでなく、そのページに合ったものを適切に書いておくとGoogleの検索結果などで表示されたときにユーザーが内容を理解しやすくなります。
name=”keywords”ページの内容をキーワードで指定します(タグのようなイメージです)。複数指定する場合は半角カンマ(,)で区切って指定します。

ベースの内容が確認できたらbody要素の中へそれぞれのコンテンツブロックを配置してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Web Designer - Taro Nurumayu</title>
        <meta name="description" content="Webデザイナー ぬるま湯 太郎のポートフォリオサイトです。東京を中心に活動しています。">
        <meta name="keywords" content="Web, デザイン, デザイナー, ポートフォリオ, Web制作">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
        <link rel="stylesheet" href="./css/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <header>
            <!-- プロフィールの内容が入るところです -->
        </header>
        <main>
            <section id="skills">
                <!-- スキルが入るところです -->
            </section>
            <section id="works">
                <!-- 実績が入るところです -->
            </section>
            <section id="contact">
                <!-- 連絡先が入るところです -->
            </section>
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
</html>

デザインと合わせると次のようなイメージになります。

11.3 CSSの基本構成

HTMLの基本構成を理解したところで、次にCSSのベース部分を確認しましょう。

今回のポートフォリオサイトではhead要素のところで3つのCSSファイルを読み込んでいます。

  • reset.css(リセット用CSS)
  • style.css(オリジナルデザイン用CSS)
  • font-awesome.min.css(アイコンフォント利用のためのCSS)

reset.cssfont-awesome.min.cssはCDN(コンテンツデリバリネットワーク)というネットワークで配信されているものを利用し、外部から読み込んでいます。CDNの仕組みについてはこちらのページでわかりやすく解説されているので参考にしてみてください。

リセットCSS

それぞれ3つのCSSの役割を理解しておきます。まず、最初に読み込まれているreset.cssは「リセットCSS」と呼ばれるものです。これは各ブラウザが持っている独自のデフォルトスタイルをリセットして表示の差異をなくすものです。

実際にそれぞれブラウザでの違いを見てみましょう。

上記はChromeでのデフォルト表示です。

上記はFirefoxでのデフォルト表示です。Chromeに比べると文字間隔や行間が狭い印象です。

上記はSafariでのデフォルト表示です。ChromeやFirefoxと比べてフォントも違うことがわかります

このように比較するとブラウザそれぞれに微妙な違いがあることがわかります。Chromeではデベロッパーツールでブラウザ独自のスタイルが適用されていれば「user agent stylesheet」と表示されて確認することができます。

このままだと、独自のスタイルを追加した時にブラウザごとに微妙な差が出てきてしまうため、それぞれのスタイルをリセットします。

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
〜(以下、省略)〜

スタイルシートでそれぞれの要素にmargin: 0;padding: 0;font-size: 100%;などを指定しているので、どのブラウザで見ても同じに見えるようになりました。

ここからサイト独自のスタイルを追加していきます。一度リセットすることによって効率よく独自のスタイルをルール化することができます。もちろん、必ずリセットしなければいけないという決まりはなく、リセットせずにuser agent stylesheetを活かしながらコーディングすることもありますので、必要に応じて使い分けてください。

リセットCSSは自分で書くのは大変なので、今回のように外部で公開されているCSSファイルを利用したり、Lesson7で解説するCompassなどのCSSフレームワークを使用します。また、リセットCSSとは別の考え方ですが、リセットしてまっさらにするのではなく、ブラウザに初期設定されているCSSは活用し、最小限の誤差だけをなくすためのnormalize.cssなどを利用することもあります。

このreset.cssやnormalize.css(ノーマライズ)などを利用する場合はcssの読み込みの順番にも気をつけるようにしましょう。下記のコードの順番になってはいけません。

<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">

このようにreset.cssをデザイン用のスタイルの下に書いてしまうと、後から読み込まれたreset.cssの内容が優先され、style.cssを上書きしてしまう形になります。必ずreset.cssを一番上で読み込み、その後にデザイン用のスタイルを適用させる順番で読み込みましょう。

正しい読み込みの順番

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="./css/style.css">

文字コードの指定と@import

続いてstyle.cssが、サイトデザイン用のメインCSSです。ページのレイアウトやデザインに関するスタイルが記述されています。

このファイルでは、最初にHTMLと同じく文字コードの指定をしています。

style.css

/* 文字コードの指定
------------------------------------------------------------*/
@charset "UTF-8";

CSSの文字コード指定はHTMLと同じでなければならないというルールはありません。ですが、特に別々の文字コードにする理由がない限りはHTMLと揃えるようにします。

次に@import urlを使ってGoogle Fonts用に外部のCSSファイルを読み込んでいます。HTMLのhead要素でCSSを読み込むように、CSSファイルからも外部のCSSファイルを読み込み、利用することができます。

style.css

/* 文字コードの指定
------------------------------------------------------------*/
@charset "UTF-8";

/* Google Fonts用のCSSを読み込み
------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

Google Fontsでは複数の利用方法が選べるようになっています。フォントの詳細ページ
から追加方法を確認します。

フォント追加方法と、追加したフォントの使い方を確認します。

body {
    font-family: 'Abel', sans-serif;
}

サイトで使用するフォントの指定はfont-familyプロパティで指定します。

サイトの共通スタイルを定義する

それでは次にサイト全体で共通するスタイルを定義していきましょう。最初に定義しておくべきスタイルは次のようなものです。

  • フォントのサイズ(font-size)
  • フォントの種類(font-family)
  • 背景やテキストの色(background-color / color)
  • リンクの文字色(a / a:hover / a:active / a:visited)
  • 行間や文字間隔(line-height / letter-spacing)

style.css

html
{
    font-size: 62.5%; /* ベースとなるフォントサイズの定義 */
}

body
{
    font-family: '游ゴシック', YuGothic, 'メイリオ', Verdana, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; /* フォントの種類 */
    font-size: 1.4rem; /* フォントサイズ */
    line-height: 1.6; /* 行間 */

    letter-spacing: .1em; /* 文字間隔 */

    color: #4c4c4c; /* 文字色 */
    background-color: #fdfcf6; /* 背景色 */
}
フォントサイズ

htmlセレクタはすべての要素の親(root)となり、ページ全体に適用されるスタイルです。まずhtmlセレクタを使って、ページ全体のデフォルトのフォントサイズを10px程度に定義します。なぜfont-size: 62.5%;が10px程度になるかというと、主要ブラウザのデフォルトフォントサイズが16pxのため、16pxの62.5% = 10pxという計算になるためです。

最初に10pxにするのは、他のセレクタでの文字サイズの指定を楽にするためです。フォントサイズの指定単位にはpx%emremがあり、pxは「絶対指定」と呼ばれ、指定したサイズのまま表示するものです。残りの%emremは「相対指定」と呼ばれ、%emは親要素、remはroot要素(html)を基準として計算されます。

html /* root */
{
    font-size: 62.5%; /* =10px =100% */
}

body {
 /* すべて14px
------------------------------------------------------------*/
    font-size: 14px;
    font-size: 140%;
    font-size: 1.4em;
    font-size: 1.4rem;
}

h1 {
    font-size: 20px; /* そのまま20px */
    font-size: 200%; /* 親要素bodyの14pxを基準に200% =28px */
    font-size: 2em; /* 親要素bodyの14pxを基準に2倍 =28px */
    font-size: 2rem; /* rootの10pxを基準に2倍 =20px */
}

div {
    font-size: 12px; /* そのまま12px */
    font-size: 120%; /* 親要素bodyの14pxを基準に120% =16.8px(約17px) */
    font-size: 1.2em; /* 親要素bodyの14pxを基準に1.2倍 =16.8px(約17px) */
    font-size: 1.2rem; /* rootの10pxを基準に1.2倍 =12px */
}
div p {
    font-size: 12px; /* そのまま12px */
    font-size: 120%; /* 親要素divの17pxを基準に120% =20.4px(約20px) */
    font-size: 1.2em; /* 親要素divの17pxを基準に1.2倍 =20.4px(約20px) */
    font-size: 1.2rem; /* rootの10pxを基準に1.2倍 =12px */
}

フォントサイズすべてにpxを使えばこのような相対指定の単位はいらないと思いがちですが、pxは絶対指定のため、ブラウザの設定にある「文字サイズ」でのサイズ変更ができません。

Chromeで見てみましょう。Chromeの初期設定でのサイズは「中」で16pxになっています。そのため上の画像のようにCSSでそれぞれ16px1emで指定するとすべて同じサイズで表示されます。

Chromeの設定画面へ移動し、一番下にある「詳細設定を表示…」をクリックすると「フォントサイズ」を選べるところがあるので「大」に変更してみます。

何も指定していないデフォルトの1行目と1emと指定した3行目が大きくなっているのに対し、16pxで指定した2行目はサイズが変わっていません。これではこの機能を利用しているユーザー自身が読みやすい文字のサイズを選べなくなってしまい、ユーザビリティの低下につながります。デザイン上どうしても変化させたくない場合を除き、フォントサイズは相対指定したほうがいいでしょう。

その際に%やemでの複利計算となる相対指定よりも、rootからの基準相対指定のremのほうが計算が単純で便利になります。

フォントの種類

Google Fontsのところで前述した通り、フォントの種類を指定するにはfont-familyプロパティを使用します。今回のサイトではfont-family:'游ゴシック', YuGothic, 'メイリオ', Verdana, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;とゴシック体・サンセリフ系での指定をしました。明朝体やセリフ系での指定をする場合はfont-family: '游明朝体', 'Yu Mincho','ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ', Meiryo, serif;などと指定します。  

 

カンマで区切って複数指定あるのは、指定したフォントがユーザーの環境にインストールされていない場合の次の候補として複数指定します。優先順位は先頭からで、記述してあるすべてのフォントがインストールされていない場合はブラウザで設定されたデフォルトのフォントが表示されます。値の中に日本語が含まれる場合や空白が含まれている場合はダブルクォーテーション("...")またはシングルクォーテーション('...')で囲むようにします。

背景やテキストの色

背景色はbackground-color、文字色はcolorプロパティで定義します。

body {
    color: #4c4c4c; /* 文字色 */
    background-color: #fdfcf6; /* 背景色 */
}

背景は画像を指定することができるbackground-imageもあり、background-colorと併用することもできます。background-imageは後のLessonで詳しく説明します。

リンクの文字色

リンク文字色の定義は「6.4 高度なセレクタ」で少し紹介した通り、a:linka:visitedなどの擬似クラスを使って定義します。それぞれの擬似クラスの値は次の通りです。

擬似クラス
a:link未訪問リンクの文字色
a:hoverリンクテキストにロールオーバーした状態の文字色
a:visited訪問済みリンクの文字色
a:activeリンクテキストをクリックして離すまでの文字色
行間や文字間隔

行の高さを指定するためにはline-heightプロパティを使用します。文字サイズが変わっても対応できるように、基本的に値にはpxなどの単位は付けず「1.6」などと数値のみで指定します。こうすることによって「1文字分の1.6倍(相対指定)」となって様々な文字サイズが混ざった文章でも均等に行間を保つことができます。

文字間隔(カーニング)を指定するにはletter-spacingを使用します。こちらは単位にemを指定し、親要素の文字サイズから相対指定します。あまり大きく開いても不自然なので0.1文字分となる0.1em(0は省略可能で.1emと指定したりします)で指定することが多いでしょう。

11.4 ヘッダーの作成1

ベースを理解できたところで、コンテンツの作成に進みましょう。最初のコンテンツはヘッダーにあたる「プロフィール」部分です。デザインと要素を確認します。

  • コンタクトにページ内リンクするボタン
  • タイトル
  • プロフィール写真
  • 自己紹介文

コンタクトにページ内リンクするボタン

まず最初にコンタクトのブロックにページ内リンク(同じページ内のコンテンツにリンク)する右上のボタン部分を書いていきましょう。

HTMLの<header>の中に書きます。

index.html

~~
    <header>
        <a href="#contact" class="button-contact"></a>
    </header>
~~

コンタクトブロックにリンクするので<a>タグを使って書きます。リンク先の指定はhref属性で指定します。別のページや外部のサイトにリンクする場合はhref="./contact"http://ドメイン名/contactと指定しますが特定の要素にリンクする場合は、その要素のもつid名を指定します。id名を指定する場合にはCSSのid名を書く場合と同じく#を使います。

今回の場合は同じページ内のコンタクトブロックの<section id="contact">へリンクしたいためhref="#contact"になります。もしも別のページの特定の要素へリンクしたい場合は./contact/index.html#contactと、.htmlの後に続けて書きます(この際のindex.htmlは省略しません)。

このリンクにCSSでスタイルを付けたいのでclass名をclass="button-contact"と付け加えます。

次に、アイコンフォントを使うために、Font Awesome 4.7.0を利用します。
※最新版である Font Awesome 5 が登場しましたが、多くのページで利用されているバージョン 4.7.0 を利用します。Font Awesome のトップページ から「Old 4.7.0 Docs」リンクをクリックして移動します。

以前にはFont Awesomeの公式サイトで手軽に利用できるCDNが提供されていたのですが、Font Awesomeにアカウントを登録しなければならなくなりましたので、別のCDNを利用します。CDNは、Contents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称です。CDNを使えば、Font AwesomeのCSSをダウンロードせずとも、下記コードのようにURLを指定することでFont AwesomeのCSSを利用できるようになります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

上記コードをhead要素内に記述するとFont Awesomeが使えるようになります。アイコンフォントはこのCSSファイル内で読み込むように指定してあります。アイコンごとにクラスでスタイルを定義してあるため、要素にそのクラスを適用するとアイコンフォントが表示されます。

次にFont Awesomeで使用するアイコンを探しにいきましょう。Font Awesome 4.7.0のページからメニューの Icons をクリックして、アイコン一覧ページへ移動します。Font Awesome 5のトップページ からは、まず「Old 4.7.0 Docs」リンクをクリックして 4.7.0 のページへ移動してください。

たくさんのアイコンが小さく並んでいるので一つ一つ探すのは大変です。検索窓にキーワードを入れるとフィルターをかけてくれます。ここでは「email」と入れてみましょう。

表示された結果から使いたいアイコンをクリックすると詳細ページへ移動するので、詳細ページに記載してあるコードをコピーしてHTMLの<a></a>の間にペーストします。これでアイコンフォントが表示されたはずです。

index.html

~~
    <header>
        <a href="#contact" class="button-contact"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
    </header>
~~

アイコンフォントは<i>タグで書かれていますが、アイコン = <i>というわけではありません。<i>タグは他と区別したいテキスト、印刷される際にイタリック体(斜体)となるようなテキストを表すものとされています。今回はFont Awesomeのサンプルコードに合わせてi要素を使いましたが、i要素でなければならないという決まりはないので、要素の定義に合わせたものを使うようにしましょう。

もうひとつ、一緒に記述されているaria-hidden属性に注目してください。これはWAI-ARIA(Accessible Rich Internet Applications)と呼ばれるスクリーンリーダーなどの視覚障がい支援技術に必要な情報を追加するための手法です。HTMLの各要素にWAI-ARIAの属性を加えることで、支援技術にその要素の適切な「役割」を伝え、Webサイトをよりアクセシブル(すべての人が平等にアクセスできるよう)にします。例えば、文書構造に合わせて適切なタグでマークアップしたり、画像にalt属性を使って適切な代替テキストを指定するのも、Webサイトをアクセシブルにするためです。

WAI-ARIAやスクリーンリーダーについてもっと詳しく知りたい方は下記を参考にしてください。

Web アプリケーションと ARIA の FAQ

Using WAI-ARIA in HTML

アクセシビリティBlog

コーディングWebアクセシビリティ – WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

aria-hiddenはその要素が非表示であることをブラウザに伝え、スクリーンリーダーなどで読み上げせずにスキップします。今回、Font Awesomeでこの属性が指定されていたのはアイコンが装飾目的として利用されることを前提としているためです。ただし今回は、装飾だけでなく「メールのアイコンである」ということを伝えなければいけません。読み上げをスキップさせると
<a href="#contact" class="button-contact"></a>と中身を持たない空タグになってしまうため、スクリーンリーダーを利用しているユーザーはどこへリンクするのか確認できなくなってしまいます。私たちもサイトを利用していて「お問い合わせはこちら」や「カートに入れる」などのテキストが書いていないただの四角いボタンがあってもクリックしようと思わないはずです。

そのため、今回はaria-hidden属性を削除してaria-labelに書き換えます。aria-label属性は要素にラベルをつけることができ、スクリーンリーダーが認識して読み上げてくれるようになります。今回は「お問い合わせ」というラベルをつけました。これで誰でも「お問い合わせ」へ移動するリンクだと認識できるようになりました。

index.html

~~
    <header>
        <a href="#contact" class="button-contact"><i class="fa fa-envelope-o" aria-label="お問い合わせ"></i></a>
    </header>
~~

それでは、アイコンだけのお問い合わせリンクをCSSでボタンのようにしましょう。

style.css

.button-contact
{
    font-size: 20px; /* フォントサイズ */
    line-height: 0; /* 行の高さ */

    display: block; /* ブロック要素のように扱う */
    float: right; /* 要素を右寄せ */

    width: 20px; /* 幅 */
    height: 20px; /* 高さ */
    margin: 20px 20px 0 0; /* 要素の外側の余白 */
    padding: 10px; /* 要素の内側の余白 */

    text-align: center; /* テキストの中央寄せ */

    color: #4c4c4c; /* 文字色 */
    border: 2px solid #4c4c4c; /* ボーダー */
    -webkit-border-radius: 4px; /* 角丸 */
       -moz-border-radius: 4px;
            border-radius: 4px;
}

アイコンフォントは、通常のテキストと同じくfont-sizeで大きさを変更することができます。読んでもらうテキストではなく、ボタンなのでpxで指定します。line-heightを「0」にしたのは、行の高さがあると、正方形の中で垂直方向の中央に表示されないため0でリセットしています。

widthは要素の幅を指定するプロパティで、heightは高さを指定します。ただし<a>などのインライン要素は、幅と高さの指定をしても無視されるため、displayプロパティでdisplay: block;として、ブロック要素のように扱います。display: block;で幅を指定しない場合は親要素いっぱい100%の幅になります。その指定した幅の中でテキストが中央寄せになるようにtext-align: center;を指定します。左寄せにする場合はtext-align: left;、右寄せにする場合はtext-align: right;となります。

次にmarginpaddingの書き方について見てみましょう。これは「ショートハンドプロパティ」といって上下左右のマージンやパディングをまとめて指定できるものです。例えば上下左右のマージンはmargin-topmargin-bottommargin-leftmargin-rightとひとつずつのプロパティで指定することもできますが、すべての値が同じ時などはまとめて書いた方が作業効率がよくなります。

書き方方向
margin: 10px上下左右に10pxずつ
margin: 10px 20px上下のmarginが10px、左右のmarginが20px
margin: 10px 20px 30px上が10px、左右が20px、下が30pxのmargin
margin: 10px 20px 30px 40px上が10px、右が20px、下が30px、左が40pxのmargin

paddingでも同じように指定することができます。値が「0」の場合は基本的にpxはつけません。

今回のCSSではmargin: 20px 20px 0 0;padding: 10px;としているため、marginが上に20px、右に20pxと、paddingが上下左右に10pxずつとなります。上から時計回りと覚えましょう。

ボーダーの指定もborder: 線幅 スタイル 線の色のように、同じくショートハンドプロパティで指定しています。この時、線幅・スタイル・色の順番はどのように書いても構いません。

個別に指定する場合は

幅:border-width: 2px;、スタイル:border−style: solid;、線の色:border-color: #4c4c4c

と指定します。

ボーダーのスタイルにはsoliddotteddashedの3種類があり、それぞれ以下のような表示になります。

最後に角丸にするためのプロパティborder-radiusについて見てみましょう。border-radiusの上に-webkit-border-radius-moz-border-radiusと同じような記述があります。これは「ベンダープレフィックス」と呼ばれるもので、ブラウザが独自の拡張機能を
実装する時や、新しい仕様を先行実装する場合に付ける識別子のことです。CSS3ではベンダープレフィックスをつけないと、実装できないプロパティがいくつかあります。

4つの角をすべて同じサイズで丸くする場合はborder-radius: 4px;とまとめて指定します。それぞれ違うサイズで指定する場合はborder-radius: 左上 右上 右下 左下の時計回りの順番となります。4つの角すべての丸のサイズを50%にすると正円になります。

それぞれのサイズを詳細に指定することもできますので、興味がある方は下記のリンクを参考にしてみてください。

MDN:border-radius

CSS3リファレンス:border-radius

11.5 ヘッダーの作成2

タイトル

続いてサイトタイトルを追加します。

index.html

~~
    <header>
        <a href="#contact" class="button-contact"><i class="fa fa-envelope-o" aria-label="お問い合わせ"></i></a>

        <!-- 追加  -->
        <div class="profile">
            <h1 class="site-title abel uppercase text-center">Web Designer <span>Taro Nurumayu</span></h1>
        </div>
    </header>
~~

<div class="profile">で囲った中に、大見出しの<h1>タグでサイトタイトルを追加します。デザインではすべて大文字で表示されていますが、HTMLでコーディングする際は必ず大文字と小文字の区別をつけて正しく表記します。すべて大文字で表記してしまうと、スクリーンリーダーなどで意図した通りに読まれない場合があります。例えば「Web Designer」と書けば「ウェブデザイナー」と読まれますが、「WEB DESIGNER」と書いてしまうと、「ダブリューイービー・・・」と一文字ずつ読まれる場合があります。大文字は基本的に「HTML(HyperText Markup Language)」や「CSS(Cascading Style Sheets)」などの略語に使います。小文字を大文字で表したい場合はCSSでtext-transform: uppercase;と指定しましょう。

style.css

.uppercase {
    text-transform: uppercase;
}

text-transform: uppercase;やテキスト中央寄せtext-align: center;など、サイトの中で何度も使う可能性があるものはわかりやすいクラス名を付けて使いまわせるようにしておきます。またはセレクタをカンマ(,)で区切って複数指定することもできます。

.uppercase,
section h2,
#skills h3,
#works .works-box a .works-box-inner .button-readmore
{
    text-transform: uppercase;
}

そのほかのスタイルも追加していきましょう。

style.css

.text-center {
    text-align: center;
}
.abel {
    font-family: 'Abel', sans-serif; /* Google Fontsの指定 */
}


header .profile
{
    clear: both; /* 上のメールボタンのfloatを解除 */

    width: 60%;
    margin: 0 auto; /* ボックスを中央寄せ */
    padding: 60px 0;
}
header .site-title
{
    font-size: 1.8rem;
    line-height: normal;
}
header .site-title span
{
    font-size: 4.2rem;

    display: block;

    color: #14c0c9;
}

<div class="profile">はユーザーが閲覧しているモニターのウィンドウ幅に対して60%の指定をしています。通常、テキストやブロックはデフォルトで左寄りに配置されるため、marginプロパティを使ってボックス自体を中央寄せにします。ブロック要素の中でインライン要素を中央寄せする場合はtext-align: center;で中央寄せにできますが、ブロック要素自体を中央寄せする場合はmargin-left: auto;margin-right: auto;と左右のマージンをautoに指定します。

今回のデザインでは名前の「Taro Nurumayu」の部分が改行され、「Web Designer」よりも大きく表示されています。この「Taro Nurumayu」の部分だけに別のスタイルを適用したいため、特に意味を持たない<span>要素で囲みました。<span>要素は特に意味を持っていませんが、今回のように要素の中で、他と区別したひとかたまりの範囲としたい場合などに使用します。
この<span>要素は本来はインライン要素のため、そのままではデザインのように改行されません。改行させる場合はdisplay: block;と、ブロック要素と同じ扱いにします。

写真と自己紹介文

次に写真と自己紹介文を追加しましょう。

index.html

~~
    <header>
        <a href="#contact" class="button-contact"><i class="fa fa-envelope-o" aria-label="お問い合わせ"></i></a>
        <div class="profile">
            <h1 class="site-title abel uppercase text-center">Web Designer <span>Taro Nurumayu</span></h1>

            <!-- 追加  -->
            <img src="./images/img_profile.jpg" alt="プロフィール写真" width="140" height="140" class="block-center profile-icon">

            <p>東京都在住のWebデザイナー、ぬるま湯 太郎です。オンラインスクールでWeb制作について学び、アパレル業界から憧れていたWebデザイナーへと転職活動中です。これからさらにWeb制作の技術や知識を身につけて、Webサイト運用や問題解決のアドバイスもできるデザイナーになりたいと思っています。</p>
        </div>
    </header>
~~

style.css

.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


header .profile-icon
{
    margin: 30px auto;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
header p
{
    font-size: 1.6rem;
}

img要素もインラインに分類されます。そのため中央寄せする場合には<div>などのブロック要素で囲みtext-align: center;を指定するか、display: block;marginを使って中央寄せします。今回はimg要素ひとつのため、余分なdivを増やさずにdisplay: block;marginを使って中央寄せしました。さらに、写真を丸くするためborder-radiusを50%に指定しました。

ここまででheaderコンテンツの中のコーディングが終わりました。デザインの通りに表示されてるでしょうか?続いて<main>要素の中を組み立てていきましょう。

11.6 メインコンテンツの作成1:スキル(Skills)

main要素の中に移動して「Skills」を完成させます。最初にコンテンツの幅を指定するために使うボックスとタイトルを設置します。

index.html

~~
    <section id="skills">
        <!-- 追加  -->
        <h2 class="text-center">Skills</h2>
        <div class="container">
        </div>
    </section>
~~

CSSではこの先の<section id="works"><section id="contact">にも共通するスタイルも定義しておきましょう。

style.css

section
{
    padding: 60px 0; /* section要素の余白を上下60pxで揃える */
}
section .container
{
    width: 90%; /* sectionの中のインナーボックスをウィンドウ幅に対して90%に */
}
section h2
{
    font-size: 3.2rem;/* section要素見出しを32pxで揃える */
}

それぞれの見出しで「Abel」を使用し、すべて大文字で揃えるため先に定義しておいたそれぞれのクラスに、section要素内の見出し(h2)セレクターを追加し、.containerブロックも中央寄せにするため、先に定義しておいた.block-centerにセレクターを追加します。

style.css

.block-center,
section .container
{
    display: block;

    margin-right: auto;
    margin-left: auto;
}

.abel,
section h2
{
    font-family: 'Abel', sans-serif;
}

.uppercase,
section h2
{
    text-transform: uppercase;
}

これで見出しのデザインを揃えて表示することができるようになりました。続いて先ほどHTMLを書いた.containerと見出しの追加スタイルを書き加えます。

style.css

#skills
{
    background-color: #bea300;
}
#skills .container
{
    display: -webkit-flex;
    display:         flex;

    justify-content: space-between;
}
#skills h2
{
    margin-bottom: 60px;
    color: #fdfcf6;
}

「Skills」の中の3つのボックスは幅と高さがすべて均等に横並びになっています。もちろんfloatプロパティでも実装することができますが、CSS3で新たに追加された「Flexbox(Flexible Box Layout Module)」を使うことで、より簡単で柔軟に横並びにすることができます。

floatプロパティを使用した場合とどう違うのか比べてみましょう。  

 

floatではボックスの高さを指定しなければ、それぞれの高さが揃えられず、コンテンツの増減によって細かい調整が必要になります。Flexboxでは、親要素にdisplay: flex;と指定するだけで、一番高い要素に合わせてすべての要素の高さを揃えてくれます。また、justify-contentプロパティを使って要素の並び方の位置を左・横・中央に揃えたり、等間隔で揃えて配置できるようになります。今回指定したjustify-content: space-between;は、両サイドのアイテムはそれぞれ端に、残りのアイテムを等間隔で配置します。

値ごとの表示の違いはこちらで確認してみてください。

justify-content | CSS-Tricks

この他にFlexboxには、より柔軟なコンテンツレイアウトを可能にするためのプロパティがたくさん用意されています。様々なプロパティを組み合わせて、どのように表示されるのか試してみてください。

CSS3 Flexible Box

 Flexboxは一部の古いブラウザでは対応していません(IE 10など)。そのようなブラウザに対応しなければいけない場合は、同じような振る舞いができるdisplay: tableを検討してみましょう。 ※自分が使いたいプロパティの対応状況を知りたい場合はCan I useで調べることができます。

3つのボックスを並べる準備ができたので、コンテンツを入れていきましょう。display: flexを定義した親要素の<div class="container">の中へ、<div class="skill-box">を追加して「Web」の内容を記述します。

index.html

~~
    <section id="skills">
        <h2 class="text-center">Skills</h2>
        <div class="container">

            <!-- 追加  -->
            <div class="skill-box">
                <i aria-hidden="true" class="skill-icon fa fa-laptop"></i>
                <h3 class="text-center">Web</h3>
                <p>HTML/CSSでのコーディングができます。JavaScript、PHP、WordPressも現在勉強中です。</p>
            </div>

        </div>
    </section>
~~

ここでもアイコンフォントを使います。今回は先ほどのメールアイコンとは違い、装飾のみの目的のためaria-hidden="true"のままにしておきます。この<div class="skill-box"> 〜 </div>の1ブロック分をコピペして残りの「Illust」と「English」も同じように追加しましょう。

index.html

~~
    <section id="skills">
        <h2 class="text-center">Skills</h2>
        <div class="container">
            <div class="skill-box">
                <i aria-hidden="true" class="skill-icon fa fa-laptop"></i>
                <h3 class="text-center">Web</h3>
                <p>HTML/CSSでのコーディングができます。JavaScript、PHP、WordPressも現在勉強中です。</p>
            </div>

            <!-- 追加  -->
            <div class="skill-box">
                <i aria-hidden="true" class="skill-icon fa fa-pencil"></i>
                <h3 class="text-center">Illust</h3>
                <p>キャラクターデザインなどのイラスト制作が得意です。専門学校在籍のときにXXの特別賞を受賞しました。</p>
            </div>
            <div class="skill-box">
                <i aria-hidden="true" class="skill-icon fa fa-ing-o"></i>
                <h3 class="text-center">English</h3>
                <p>16歳になるまでずっとアメリカにいたので英語が得意です。Webデザインも海外の記事を読んで勉強しています。</p>
            </div>

        </div>
    </section>
~~

この段階でブラウザで確認すると、親要素に指定したdisplay: flex;のおかげで3つのブロックがすでに横並びになっているのがわかります。この3つのボックスにスタイルを追加します。

style.css

#skills .skill-box
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-flex: 1;
            flex: 1;
    margin: 0px 10px;
    padding: 20px;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background-color: #fdfcf6;
}

box-sizingプロパティは、要素の幅と高さを計算するボックスモデルのルールを変更するために使います。値を変更すると次の図のように計算方法が変わります。

初期値であるbox-sizing: content-boxが通常のボックスモデルです。ボックス幅の300pxに上下左右の余白20pxと、ボーダーの10pxがプラスされ、最終的にボックスの幅は360pxになります。それに対してbox-sizing: border-boxは上下左右の余白、ボーダーも含めてボックス幅の300pxになるように計算されます。今回のように幅を%で指定する場合など、計算が楽になり直感的にそれぞれのサイズを決めることができます。box-sizingプロパティもベンダープレフィックスが必要になるので忘れないようにしましょう。

flexプロパティは、Flexboxでレイアウトした場合に横幅を指定することができます。横並びのFlexboxなので、 flex: 1; とすると、.skill-boxが全て1の横幅、つまり全て同じ幅になるように自動調整されます。flexプロパティも新しいプロパティとなるので、下位バージョンのブラウザ対応のためにはベンダープレフィックスが必要となります。

次にアイコン部分と見出しのスタイルを追加します。

style.css

#skills i
{
    font-size: 4.5rem;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    padding-top: 15px;

    text-align: center;

    color: #fff;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: #14c0c9;
}
#skills h3
{
    font-size: 2.4rem;
    font-weight: bold;

    margin-bottom: 10px;

    color: #14c0c9;
}

アイコンフォントはブロック要素へ変え、中央寄せにしたいので先に定義している.block-centerのところへ#skills iのセレクターを追加します。

style.css

.block-center,
section .container,
#skills i
{
    display: block;

    margin-right: auto;
    margin-left: auto;
}

先に定義していたクラスへ新しくセレクターを追加していくのは面倒に感じるかもしれませんが、セレクターごとに同じ内容のスタイルを書いていくと、大規模なサイトだとファイルサイズが肥大化したり、スタイルを変更した際はすべてのセレクターを書き直さなければなりません。同じスタイルはなるべくまとめて管理するようにしておきます。Lesson6で学習するSassを使うとこれらの指定も楽になります。

これで「Skills」のコンテンツが完成しました。

11.7 メインコンテンツの作成2:実績(Works)

「Skills」の下の「Works」コンテンツへ進みましょう。これまで通りタイトルを追加します。Worksの部分はウィンドウ幅いっぱいに表示させるため、インナーボックスは配置しません。

〜(以上、省略)〜
    <section id="works">
        <h2 class="text-center">Works</h2>
    </section>
〜(以下、省略)〜

続けて最初の実績を書いていきます。

〜(以上、省略)〜
    <section id="works">
        <h2 class="text-center">Works</h2>

        <!-- 追加  -->
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_site.png" alt="株式会社ぬるま湯 コーポレートサイト様 Webサイトデザイン">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>株式会社ぬるま湯 コーポレートサイト</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
〜(以下、省略)〜

<div class="works-box"> 〜 </div>が実績一つ分になります。今回はボックス全体にリンクを貼るために<a>タグで要素をすべて囲みます。ボックス全体に貼ったリンクにロールオーバーするとクライアント名、日付と、視覚的に用意した「Read More」のボタンを表示させるため、これらを<div class="works-box-inner">のインナーボックスの中へ配置します。

残りの5つの実績も同じように書き加えます。

index.html

〜(以上、省略)〜
    <section id="works">
        <h2 class="text-center">Works</h2>
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_site.png" alt="株式会社ぬるま湯 コーポレートサイト様 Webサイトデザイン">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>株式会社ぬるま湯 コーポレートサイト</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>

        <!-- 追加  -->
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_card.jpg" alt="ぬるま湯 太郎様 名刺デザイン">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>ぬるま湯 太郎様 名刺</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_blog.jpg" alt="WordPressオリジナルテーマ">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>ブログデザイン</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_card.jpg" alt="ぬるま湯 太郎様 名刺デザイン">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>ぬるま湯 太郎様 名刺</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_blog.jpg" alt="WordPressオリジナルテーマ">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>ブログデザイン</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="works-box">
            <a href="#">
                <img src="./images/img_work_site.png" alt="株式会社ぬるま湯 コーポレートサイト様 Webサイトデザイン">
                <div class="works-box-inner">
                    <div class="text-center">
                        <h3>株式会社ぬるま湯 コーポレートサイト</h3>
                        <small>2016.04.20</small>
                        <span class="button-readmore">Read More</span>
                    </div>
                </div>
            </a>
        </div>
    </section>
〜(以下、省略)〜

6つの要素を3つずつ横並びにします。

style.css

#works
{
    padding-bottom: 0;
}

#works h2
{
    margin-bottom: 50px;
}

#works .works-box
{
    float: left;

    width: 33.33333%;
    height: 100%;
}

#works::after
{
    display: block;
    clear: both;

    content: '';
}

.works-boxをウィンドウ幅100%に対して3つ並べるので、100%÷3 = 33.33333%という計算で幅を決めます。今回はfloatプロパティを使ったレイアウト方法を学習するためにFlexboxを使用しませんが、Flexboxのflex-wrapプロパティを使用することで、Flexboxでも複数行に渡ってのカラムレイアウトが可能になります。

flex-wrap

基本のところで学習した通り、floatプロパティは「「浮動化した要素は正しく高さを計算することができない」」という問題点があります。そのため、floatしている要素の親要素#worksclearfixを適用しておきましょう。これでコンテンツが3つずつ並んだレイアウトになりました。

次にロールオーバー時に.works-box-innerをサムネイル画像の上に重ねて表示させるためのスタイルを追加します。

style.css

#works .works-box a
{
    position: relative;

    display: block;
}
#works .works-box a .works-box-inner
{
    position: absolute;
    top: 0;
    left: 0;

    display: none;

    height: 100%;

    color: #fff;
    background-color: rgba(0, 0, 0, .7);
}

コンテンツ同士を重ねて表示させるためにpositionプロパティを使用します。positionプロパティはボックスの配置が、基準位置からの相対位置か絶対位置かを指定する場合に使用します。位置の指定にはtopbottomleftrightを組み合わせて、基準位置からの距離を設定します。

positionプロパティの値には初期値のstaticに加えてrelativeabsolutefixedの4つがあります。staticは特に配置方法を指定せず、topbottomleftrightは適用されません。relativeはこの値を指定した要素がabsolutefixedの基準位置となります。

absolutefixedは最初の2つに対して絶対位置へ配置するものです。absolutestatic以外の値が指定された親要素の左上を基準として、topbottomleftrightで指定した位置に絶対配置されます。もし、親要素にstatic以外の値が指定されていない場合は、ウィンドウの左上が基準位置になります。fixedabsoluteとほとんど変わりませんが、スクロールしても位置が固定されたままで表示されます。以下のCodePenで実際の動きを確認してみましょう。  

 

今回は要素の全体を囲っている#works .works-box aの左上を基準とするためにposition: relative;とし、<a>タグをブロック要素へと変えておきます。

上に重ねる#works .works-box a .works-box-innerposition: absolute;を設定し、基準点からの距離は左上から0としています。これでぴったりとサムネイル写真の上に重なるようになりました。

background-colorの値はRGBAカラーモデルで色を指定しています。RGBAカラーモデルとは、RGBカラーモデルのred・green・blueに加えてalphaで色の透明度を指定できるものです。RGBの色は0-255、または、0%-100%で指定し、#FFFFFFのような16進表記は使用できません。透明度は0(透明)〜1(不透明)の数値で表記します。例えば透明度80%であれば0.8と表記します。

今回はインナーボックスの中の要素の垂直方向への位置を指定するためにさらにdivを一つ入れ子にしています(<div class="works-box-inner">の中の<div class="text-center">の部分です)。このボックスは絶対配置している親要素の<div class="works-box-inner">の左上を基準点としてさらに絶対配置しています。

style.css

#works .works-box a .works-box-inner div
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    height: 40%;
    margin: auto;
    padding: 10px 20px;
}

絶対配置指定のボックスを上下左右の中央寄せにする場合はtopbottomleftrightの距離をすべて0にしておき、marginプロパティの値をautoにします。

続いてタイトルやボタンなどのスタイルを追加します。サムネイル写真はウィンドウ幅に応じて伸縮し、ボックスからはみ出さないようにwidth: 100%;を指定しておきます。

style.css

#works .works-box a .works-box-inner h3
{
    font-size: 1.6rem;
    font-weight: bold;

    margin: 0 0 5px;
}
#works .works-box a .works-box-inner small
{
    font-size: 1rem;

    display: block;

    margin-bottom: 15px;
}
#works .works-box a .works-box-inner .button-readmore
{
    font-size: 1rem;
    font-weight: bold;

    display: block;

    width: 180px;
    margin: auto;
    padding: 5px 0;

    text-align: center;

    color: #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background-color: #14c0c9;
}
#works .works-box img
{
    display: block;

    max-width: 100%;
}

ボタンの部分は、それぞれのセクションタイトルと同じく、Ableフォントを大文字で使用しています。そのため、.abel.uppercaseにそれぞれ.button-readmoreのセレクターを追加しておきましょう。

style.css

.abel,
section h2,
#skills h3,
#works .works-box a .works-box-inner .button-readmore
{
    font-family: 'Abel', sans-serif;
}

.uppercase,
section h2,
#skills h3,
#works .works-box a .works-box-inner .button-readmore
{
    text-transform: uppercase;
}

このインナーボックスは、ロールオーバーされるまで表示しません。そのため#works .works-box a .works-box-innerdisplayプロパティの値をnoneにして非表示にしておきましょう。

ロールオーバー時のスタイルを定義するには:hover擬似クラスを使用します。

style.css

#works .works-box a:hover .works-box-inner
{
    display: block;

    width: 100%;
}

#works .works-box a .works-box-inner .button-readmore:hover
{
    background-color: #0f949b;
}

全体を囲んでいる<a>要素に:hoverした際の.works-box-innerdisplayプロパティをnoneからblock;に変更して可視化できるようにします。

今回はボックス全体にリンクが貼ってあるため、<a>要素ではなく<span>要素で作った「Read More」のボタンですが、こちらもユーザーは普通のボタンとして認識するため、ロールオーバー時に背景色を変更して「押せる」ということが伝わるようにしておきます。

これで、ロールオーバーで表示が変化する「Works」のブロックの完成です。今後、実績が増えても<div class="works-box-inner"> 〜で増やせます。

11.8 メインコンテンツの作成3:連絡先(Contact)

メインコンテンツ内の最後のブロック、「Contact」です。まずは用意しているボックスの中にタイトルを追加します。

index.html

〜(以上、省略)〜
    <section id="contact">
        <h2 class="text-center">Contact</h2>
    </section>
〜(以下、省略)〜

連絡先として

  • メール
  • GitHub
  • Skype

の3つを、アイコンフォントを使って並べていきます。まずはこの3つを<ul><li>を使用してリストとして書きます。ul要素は「順不同リスト」と呼ばれ、含むリストアイテムに順序がない場合に使用します。同じリストタグのol要素は「順序付きリスト」と呼ばれ、順番を明確にする場合のリストに使用します。どちらを使用してもリストアイテムを記すタグはliになります。

〜(以上、省略)〜
    <section id="contact">
        <h2 class="text-center">Contact</h2>

        <!-- 追加  -->
        <ul>
          <li><a href="mailto:xxx@l-works.design"><i aria-label="メール" class="fa fa-envelope-o"></i></a></li>
          <li class="github"><a href="#"><i aria-label="GitHub" class="fa fa-github"></i></a></li>
          <li class="skype"><a href="#"><i aria-label="Skype" class="fa fa-skype"></i></a></li>
        </ul>
    </section>
〜(以下、省略)〜

メールの<a>要素に指定したhref属性の値を見てみましょう。href属性に指定できるリンク参照先はファイルやページだけではなく、今回のようにmailto: メールアドレスで、クリックするとメーラーを立ち上げ、メールを打てるように指定する方法もあります。メールアドレスの他にtel: 電話番号とすることでクリックすると電話がかけられるように設定もできます(主にモバイルサイトで使用します)。

これまでFlexbox、floatを使って横並びのレイアウトを実装してきましたが、今回はdisplay: inline-block;を使用してレイアウトします。display: inline-block;はブロック要素のものをインライン要素のように扱えるようにするものです。インライン要素で横並びにすると、親要素にtext-align: center;を指定するだけで簡単に項目の中央寄せができるようになります。

style.css

#contact ul
{
    margin-top: 60px;

    text-align: center;
}
#contact ul li
{
    font-size: 2.8rem;

    display: inline-block;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin-right: 20px;

    text-align: center;
    vertical-align: top;
}
#contact ul li:last-child
{
    margin-right: 0;
}

display: inline-block;で並べた要素をvertical-align: top;で上揃えします。vertical-alignプロパティは縦方向の整列方法をbaselinetext-toptext-bottommiddletopbottomなどの値で指定できます(インライン要素、またはテーブルセル要素のみ)。

今回はGitHubとSkypeのアイコンがメールアイコンよりも小さかったので、文字サイズを大きくして調整しました。そのため行の高さが変わってしまい、それぞれのボタンの位置がずれてしまったのでvertical-align: top;で上揃えして見た目を調整しています。

style.css

#contact ul .github,
#contact ul .skype
{
    font-size: 3.2rem;
}
#contact ul .github i
{
    margin-left: 2px;
}

最後に<a>要素に幅と高さを指定し、丸いボタンのスタイルにして完成です。

style.css

#contact ul a
{
    display: block;

    width: 50px;
    height: 50px;

    color: #fff;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: #14c0c9;
}
#contact ul a:hover
{
    background-color: #0f949b;
}

11.9 フッターの作成

メインコンテンツまですべて終わり、最後はフッターの作成です。<footer>の中にコピーライト表記を書きます。

index.html

〜(以上、省略)〜
    <footer>
        <small class="text-center abel uppercase">&copy; Taro Nurumayu, All Rights Reserved.</small>
    </footer>
〜(以下、省略)〜

コピーライトマーク(©)のような特殊文字や機種依存文字を使う場合は、必ず&copy;のような「実体参照」をコードに書きましょう。

HTMLの特殊文字

style.css

footer
{
    padding: 10px 0;

    text-align: center;

    color: #fff;
    background-color: #bea300;
}

これで、コーディングがすべて終わりました。

実際にコーディングされたファイルはこちらからダウンロード ››

メモ帳に、index.htmlにドラッグしてソースを確認しながら、意味を理解できるようになれば合格です。

実際の表示確認をする際には、index.htmlをブラウザ(Google Chrome)にドラッグして確認して下さい。