各コンテンツのページが完成しているので、次はそのコンテンツページを使って、TOPページを作成します。profile.htmlを開いてindex.htmlと名前を付けて保存します。
コンテンツの配置が異なりますので、このTOPページ用のCSSを用意します。Sublime textを開いて何も記入せず、top.cssと名前を付けて保存します。index.htmlのheadタグ内にtop.cssへのリンクを記述します。
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MN Portfolio Site | 自己紹介</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/top.css"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="js/contact.js"></script> </head>
自己紹介のリンクを追加します。
<ul> <li>TOP</li> <li><a href="profile.html" title="">自己紹介</a></li> <li><a href="work01.html" title="">作品1</a></li> <li><a href="work02.html" title="">作品2</a></li> <li id="c_form">お問い合わせ</li> </ul>
コンテンツ部分ですが、横並びで3個のボックスを並べています。article要素をコピーして3個に増やします。中身の部分をわかりやすいように中身１（自己紹介）中身２（作品１）中身３（作品２）と修正します。コンテンツページで使った文章をコピーして作品１と作品２のp要素に記述します。アーティクル要素それぞれにtopという名前のクラス指定をします。画像サイズは幅のみ100pxで指定します。
<article class="top"><!-- 中身１ --> <h2>自己紹介</h2> <img src="images/img00.png" width="100" > <p>はじめましてMNです。HTMLやCSSを使ってホームページの作成をしています。jQueryやphpでのカスタマイズもできます。wordpressや他のCMSなども使うことができます。</p> </article> <article class="top"><!-- 中身２ --> <h2>作品１</h2> <img src="images/img00.png" width="100" > <p>はじめまして作ったHPです。画像の作成などいろいろ工夫しました。</p> </article> <article class="top"><!-- 中身３ --> <h2>作品２</h2> <img src="images/img00.png" width="100" > <p>レスポンシブを意識したサイトです。メディアクエリで苦労しました。</p> </article>
CSS側にtopクラスについての指定をしていきます。幅は33.3333%、displayはインラインブロックに、marginの上は150px 左右が―2px 下が0pxの指定をします。paddingはなし、高さの指定は最少で200px、背景は白を透明にします。（rgbaの最後の数字を0にします。）
h2要素については、行の高さを35px、paddingは0、marginは25px、中央揃えの指定をします。
p要素については、marginを15pxにします。
/* TOPページにのみ付加する設定です */
article.top {
width:33.3333%;
display:inline-block;
margin:300px -2px 0px;
padding:0;
min-height:200px;
background-color:rgba(255,255,255,0);
}
article.top h2 {
padding:0;
line-height:35px;
margin: 25px;
text-align:center;
}
article.top p {
margin:15px;
}
すべてを修正したら、htmlファイル、CSSファイルともに保存し、ブラウザで確認します。
今回のページ作成ではfloatではなくinline-blockに変更しています。
ここまででポートフォリオサイトが完成しました。今後作品が増えたらtopのarticle要素を追加したり、デザインを変えたりしながら追加していってください。
また、レスポンシブ対応に修正し、メディアクエリを使用してもいいかもしれません。
今回は簡単な画像作成から、ポートフォリオの作成をしてみました。
レンタルサーバーを借りて、HPをアップロードしてみてください。
今回のサンプルファイルは下記からDLできます。