Lesson3 5. コーディング

デザインも完成したので次は最終段階のコーディングへ移ります。下の図のようにブロックごとに分けて説明します。

5.1 WEBサイトのフォルダ構成

今回は下記のようなファイルやフォルダ構成になります。portfolio フォルダの下に images フォルダ、 css フォルダ, index.html ファイルという風な階層構造になっています。

5.2 HTMLのベース部分

まずはすべてのHTMLファイルに共通する部分のコードは以下のようになっています。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- head要素エリア -->
    </head>
    <body>
        <!-- body要素エリア -->
    </body>
</html>

<!DOCTYPE html>から</html>までがHTML文書としてブラウザが認識する部分です。その中に<head> 〜 </head>と(head要素)、<body> 〜 </body>(body要素)という2つのブロックがあります。

head要素は主にブラウザだけが読み取る情報を入れるブロックです。ページのタイトルやページの内容を説明したり、ページで使用する文字のタイプを指定します。この中に記述する多くのものはブラウザには表示されません。表示されない部分ですが、情報を省略したり書き方を間違えてブラウザが正しく認識できないと表示が崩れたり、表示されなくなったりするので、正確に記述する必要があります。

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制作">
    </head>
    <body>

    </body>
</html>

上記のページのタイトル<title>や説明<meta name="description" 〜 >の部分は実際にページ上に表示されるものではありませんが、このタイトルや説明文は検索などをした際に表示される部分となります。ユーザーが検索した際にどんなサイトなのかを判断する素材になるので、適切な内容を書いておきます。<title><meta name="description" 〜>はSEO(検索エンジン最適化)でも特に重要な部分で丁寧に書くことが大事です。

そしてその下にあるbody要素がブラウザで表示されるコンテンツを入れるところです。このbody要素ではHTMLのルールに基づいて、ページの文書を正しく構造化する必要があります。それぞれの詳しい説明はLesson4で行いますので、まずは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制作">
    </head>
    <body>
        <header>
            <!-- プロフィールの内容が入るところです -->
        </header>
        <main>
            <!-- My Skill、Works、Contactのコンテンツが入るところです -->
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
</html>

body要素の中にheadermainfooter要素を追加しました。それぞれコンテンツを入れる空箱を置いたというイメージをしてください。<!-- -->の部分はコメントといって、ブラウザには表示させたくないけど、ちょっと記述しておきたいメモや注釈を書くことができます。今は箱の中にコメントしか書いていないので、ブラウザにも何も表示されません。

5.3 プロフィール部分のコーディング

では、プロフィール部分から表示させてみましょう。<header> 〜 </header>の中を以下のようにします。head要素の<head>と似ていますが、<header>はブラウザに表示され、ページのイントロダクションや主要なナビゲーション(グローバルナビゲーション)などを入れるために使います。  今後、ソースコードを中略する場合には、「〜〜」を使います。「〜〜」はhtmlやcssのファイルに含めないでください。

index.html

~~ <!-- 今後、ソースコードを中略する場合には、「〜〜」を使います。「〜〜」はhtmlやcssのファイルに含めないでください。 -->
    <body>
        <header>
            <a href="#contact" class="button-contact"><i aria-label="お問い合わせ" class="fa fa-envelope-o"></i></a>
        </header>
        <main>
            <!-- My Skill、Works、Contactのコンテンツが入るところです -->
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
</html>

追加したのは右上のメールのアイコン部分になります。ですが、ブラウザでプレビューしてみてもまだ何も表示されません。この部分はFont Awesomeのアイコンフォントを利用していますが、Font Awesomeのアイコンフォントは指定されたCSSファイルを読み込まなければ表示されないため再びhead要素へ戻り、CSSの読み込みコードを追加します。

<meta name="keywords" 〜の下に追加しましょう。

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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
~~

<link rel="stylesheet" href="https:// 〜の部分がCSSファイルを読み込んでいるところです。

無事にアイコンが表示されました。

続いて<header>の中に、名前と写真、自己紹介を入れるブロックを用意します。

index.html

~~
    <body>
        <header>
            <a href="#contact" class="button-contact"><i aria-label="お問い合わせ" class="fa fa-envelope-o"></i></a>
            <div class="profile">
                <!-- 名前や写真のコンテンツが入るところです -->
            </div>
        </header>
        <main>
            <!-- My Skill、Works、Contactのコンテンツが入るところです -->
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
~~

表示される順番に中身を入れていきます。

index.html

~~
    <body>
        <header>
            <a href="#contact" class="button-contact"><i aria-label="お問い合わせ" class="fa fa-envelope-o"></i></a>
            <div class="profile">
                <h1 class="site-title abel uppercase text-center">Web Designer <span>Taro nurumau</span></h1>
            </div>
        </header>
        <main>
            <!-- My Skill、Works、Contactのコンテンツが入るところです -->
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
~~

名前が表示されるようになりました。さらに以下のように追加してみます。

index.html

~~
    <body>
        <header>
            <a href="#contact" class="button-contact"><i aria-label="お問い合わせ" class="fa fa-envelope-o"></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>
        <main>
            <!-- My Skill、Works、Contactのコンテンツが入るところです -->
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
~~

プロフィール部分のすべての要素が表示されました。

ここからはCSSも追加してコンテンツを装飾をしながら確認していきましょう。CSSファイルを追加するにはFont Awesomeの時と同じく再びhead要素に戻って追加します。Font Awesome用のCSSファイルの上に追加しましょう。

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>
~~

style.cssが、これから自分たちで書いていくCSSファイルになります。最初に、ページ全体で使う共通のものを入れておきます。

style.css

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

@import  url('https://fonts.googleapis.com/css2?family=Abel&display=swap');    /* Google Fonts用の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;
}

a
{
    text-decoration: none;

    color: #14c0c9;
}
a:visited
{
    color: #0f949b;
}
a:hover
{
    color: #0f949b;
    text-decoration: underline;
}
a:active
{
    color: #16d6e0;
}

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

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

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

.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;
}

続けて<header>コンテンツの中で使うものを入れます。右上のメールボタン、タイトルと写真、自己紹介文の部分です。

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;
}
.button-contact:visited
{
    color: #4c4c4c;
}
.button-contact:hover,
.button-contact:active
{
    color: #fff;
    background-color: #4c4c4c;
}

header .profile
{
    clear: both;
    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;
}
header .profile-icon
{
    margin: 30px auto;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
header p
{
    font-size: 1.6rem;
}

メールのアイコン部分も含めてスタイルが適用されました。これでヘッダーとなるプロフィール部分の完成です。

5.4 Skills部分のコーディング

次はその下のスキルの部分です。プロフィール以下のコンテンツは<main>要素の中に入れていきます。まずは最初にスキル以外の部分もコンテンツを入れるブロックを用意しておきます。

index.html

~~
    <body>
        <header>
            <a href="#contact" class="button-contact"><i aria-label="お問い合わせ" class="fa fa-envelope-o"></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>
        <main>
            <section id="skills">
                <!-- スキルの内容が入るところです -->
            </section>
            <section id="works">
                <!-- 実績の内容が入るところです -->
            </section>
            <section id="contact">
                <!-- コンタクトの内容が入るところです -->
            </section>
        </main>
        <footer>
            <!-- コピーライトが入るところです -->
        </footer>
    </body>
~~

Skill、Works、Contactの3つのブロックが用意できました。スキルのタイトルを入れてみます。

index.html

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

<div class="container">はスキルの内容をさらに囲むインナーボックスです。この中に続いて「Web」の部分を入れていきます。

~~
    <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>
~~

<div class="skill-box"> 〜 </div>が一つのボックスの範囲です。残りの「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-commenting-o"></i>
                <h3 class="text-center">English</h3>
                <p>16歳になるまでずっとアメリカにいたので英語が得意です。Webデザインも海外の記事を読んで勉強しています。</p>
            </div>
        </div>
    </section>
~~

先ほどと同じくCSSを追加していきます。最初に<main>内で使う共通のところを追加します。

style.css

〜〜

section
{
    padding: 60px 0;
}
section .container
{
    width: 90%;
}
section h2
{
    font-size: 3.2rem;
}

次にスキルの中で使うものです。

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 .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;
}
#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;
}

5.5 Works部分のコーディング

次にSkillの下にあるWorks部分です。<section id="works"> 〜 </section>の中に追加していきます。まずはタイトルと、実績を1つだけ入れてみます。

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>
    </section>
~~

<div class="works-box"> 〜 </div>が一つのボックスの範囲です。かなりサムネイルの画像が大きくなってしまっていますが、これはRetinaなどの高解像度のディスプレイやサイズの大きなディスプレイ向けに実際の表示サイズより大きくした画像を用意しているためです。プロフィールで使用した写真も実際の表示サイズより大きなサイズで用意しています。

このままでは見えにくいので、先にCSSを追加します。

style.css

〜〜

#works
{
    padding-bottom: 0;
}
#works h2
{
    margin-bottom: 50px;
}
#works .works-box
{
    float: left;
    width: 33.33333%;
    height: 100%;
}

#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);
}
#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;
}
#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 a .works-box-inner .button-readmore:hover
{
    background-color: #0f949b;
}
#works .works-box a:hover .works-box-inner
{
    display: block;
    width: 100%;
}
#works .works-box img
{
    display: block;
    max-width: 100%;
}

#works::after
{
    display: block;
    clear: both;
    content: '';
}

Worksの部分は実績内容のテキストを隠しておき、画像の上にロールオーバーするとその内容を表示させる仕組みです。このような仕組みもCSSだけで実装できるようになります。

では、のこりの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つの実績が表示されました。ウィンドウ幅を変えても、要素も可変してウィンドウ幅ぴったりの大きさに調整されています。

5.6 Contact部分のコーディング

次にメインコンテンツ一番下のContactの部分です。<section id="contact"> 〜 </section>の中に追加していきます。

ブロックの中にまずはタイトルを入れます。

index.html

~~
    <section id="contact">
        <h2 class="text-center">Contact</h2>
    </section>
~~

続けて3つの連絡先を追加していきます。

index.html

~~
    <section id="contact">
        <h2 class="text-center">Contact</h2>
        <ul>
            <li><a href="mailto:design@live-publishing.jp"><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>
~~

この部分もアイコンフォントを使用しています。ブラウザの左端に小さくですが、きちんと表示されているのがわかります。

CSSを追加して丸いボタンにしてみます。

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;
}
#contact ul .github,
#contact ul .skype
{
    font-size: 3.2rem;
}
#contact ul .github i
{
    margin-left: 2px;
}
#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;
}

無事に表示されました。

5.7 footer部分のコーディング

次に一番下の<footer>へコピーライト表記をしてコンテンツは終わりです。<main>要素の下の<footer> 〜 </footer>の中へ書きます。

index.html

〜〜
    <footer>
        <small class="abel uppercase">&copy; Taro Nurumayu, All Rights Reserved.</small>
    </footer>
〜〜

style.css

〜〜

footer
{
    padding: 10px 0;
    text-align: center;
    color: #fff;
    background-color: #bea300;
}

これでデザインと同じ表示になりました。

これで一連のコーディングの流れはすべて終わりです。それぞれの解説はLesson4で行います。