HTML、CSSの基本的なことが分かった状態で、今度はPhotoshopで作った画像を使い、ポートフォリオサイトを作成していきましょう。
作成手順は、HTMLファイルでのマークアップ→その部分へのCSSでのコーディング、jQueryのためのマークアップ→javascript作成（php作成）となります。
Photoshop10 デザインカンプからスライス機能で画像を切り出す で作成したパーツを使います。まだ作成していない場合は、Photoshopの項目で、デザインカンプの作成を学ばれてください。
デザインカンプからスライスした画像はまとめて「images」フォルダにあると思います。このフォルダをphotoshopというフォルダを作成した中に移動させます。（これは、今回photoshopで作成したサイトなので、暫定でつけている名前です。わかりやすければどのタイトルでも構いません。）
最初に、自己紹介のコンテンツページから作成していきましょう。
Sublime textを開いて、HTML宣言から記述していきます。文字コードは「utf-8」を指定します。
必要な要素を中身の記述なしで書き出していきます。今回は内容が単体で完結するセクションであることを示す<article>タグを使ってコンテンツを作成します。 このファイルをplofile.htmlと名前を付けて保存します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> </title> </head> <body> <header><!-- ヘッダー --> <nav> </nav> </header><!-- ヘッダここまでー --> <article><!-- 中身 --> </article> <footer><!-- フッター --> </footer><!-- フッター --> </body> </html>
次に、CSSファイルを準備していきます。今回のページは、topページと各コンテンツページのデザインが大きく異なっている部分があるため、2種類のスタイルシートを準備します。ひとつにまとめてもかまいませんが、今回はわかりやすく理解できるように2種類に分けます。このようにスタイルシートを2種類使う場合は、CSSフォルダを作成し、その中にCSSファイルを作成します。リンクもフォルダ内へのリンクになります。
ヘッダー、フッターは共通事項として作成します。こちらはbase.cssとして作成しましょう。このbase.cssにコンテンツページのスタイルを書き込みましょう。
base.cssの最初に全体の設定を書き込みます。今回は、全体を一枚に見えるような配置にします。
文字色は#090487（photoshopでカンプを作る際に使った色と同じ色にしてください）、全体に背景画像を使っているので、bodyプロパティにbackground-imageで切り出した背景画像を指定します。
背景がきちんと表示されるようにpositionを指定します。今回は中央上部に位置する指定を記述しています。背景は繰り返ししないよう no-repeatを指定します。
ここまで下記のように記述したら、base.cssとして保存します。
/* 全体の共通設定 */
* {
color:#090487;
box-sizing:border-box;
}
body {
background-image:url(../images/bg.jpg);
background-position:top center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
margin:0;
padding:0;
}
headタグ内に base.cssへのリンクを追記します。タイトルはPhotoshop10 デザインカンプからスライス機能で画像を切り出す 上記で作成したパーツのタイトルを記述し、| で区切り 自己紹介と記述しましょう。
今回のページはそれぞれにタイトルをつけて、サイトのどのページかがわかるようにしていきます。
<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"> </head>
次にヘッダー部分を記述していきます。
<h1>要素に画像を配置し、番号なしリストで「Top」「自己紹介」「作品１」「作品２」「問い合わせ」と記述します。
略---- <body> <header><!-- ヘッダー --> <h1><img src="images/logo.png" height="100" alt="MN Portfolio Site"></h1> <nav> <ul> <li>TOP</li> <li>自己紹介</li> <li>作品1</li> <li>作品2</li> <li>お問い合わせ</li> </ul> </nav> </header><!-- ヘッダここまでー --> 略----
base.cssでヘッダー部分のコーディングをしていきます。h1要素は、marginは取らず、paddingで10pxの余白を設定します。高さは画像が表示されるように、120pxに指定します。
ナビゲーションとなるリスト要素内のul要素のリストマークはなし、paddingは0 marginは上下10px 左右はautoにします。inline-blockで横に並ぶように指定します。リスト要素に1px 文字と同じ色の直線を指定します。paddingは上下10px 左右20pxに指定します。cursorはpointerを指定しています。
下記のようにCSSが記述できたら、上書き保存します。
/* ヘッダーの設定 */
header h1 {
margin:0;
padding:10px;
height:120px;
}
/* ナビゲーションの設定 */
nav ul {
list-style:none;
margin:10px auto;
padding:0;
}
nav ul li {
display:inline-block;
padding:10px 20px;
border-right:1px solid #090487;
cursor: pointer;
}
ここまで記述した状態をWebブラウザで確認します。
ヘッダーコンテンツが左に寄っているので、デザインカンプどおりにヘッダーを中央揃えにします。ヘッダー内にwidthspaceというクラスのdivを記述します。このwidthspaceというプロパティに、CSSで中央揃えになるよう記述していきます。
幅を740pxに指定し、左右のmargin autoで指定していきます。上下のmarginは0に指定します。
<header><!-- ヘッダー --> <div class="widthspace"> <h1><img src="images/logo.png" height="100" alt="MN Portfolio Site"></h1> <nav> <ul> <li><a href="index.html" title="">TOP</a></li> <li>自己紹介</li> <li><a href="work01.html" title="">作品1</a></li> <li><a href="work02.html" title="">作品2</a></li> <li>お問い合わせ</li> </ul> </nav> </div> </header><!-- ヘッダここまでー -->
/* コンテンツを中央にそろえる */
.widthspace {
width:740px;
margin:0 auto;
}
それぞれのファイルを保存し、ブラウザで確認してください。
タイトルとナビが中央に配置されています。
次に自己紹介文の部分を作っていきます。イメージ画像を配置します。footerの<span>タグ内にCopyright サイト名 と記述します。
<article><!-- 中身 --> <h2>自己紹介</h2> <img src="images/img00.png" height="259" width="376" > <p>はじめましてMNです。HTMLやCSSを使ってホームページの作成をしています。jQueryやphpでのカスタマイズもできます。wordpressや他のCMSなども使うことができます。</p> </article> <footer><!-- フッター --> <span>Copyright mn portfolio site</span> </footer><!-- フッター -->
その後、自己紹介文をpタグ内に記述してファイルを保存します。
CSSでコンテンツ部分からコーディングしていきます。幅は740px、高さをmin-heightで最小450pxになるようにします。min-heightプロパティは、 <img>・ <input>・ <textarea>・ <select>などの領域の高さの最小値を指定する際に使用します。 最小値を指定することで、これらの要素の高さを一定範囲内に収めることができます。似たような指定としてmax-heightやmax-widthなど最大値を指定する方法もあります。
指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法があります。
コンテンツ部分は背景を白の透過で0.7（70%）にするため、rgbaで指定します。（255,255,255,0.7）
marginは上下0px、左右autoに指定します。paddingを20pxにします。overflowはhiddenを指定します。
h2要素は 上下左右のmarginは10px 下に1px 文字色と同じ色の直線を記述します。
img要素は、左回りでテキストを表示するようにします。marginは上下左右20pxで指定します。
footerは幅740px marginは上下0px 左右auto、文字は中央揃え、文字フォントの大きさを11pxに指定します。
/* 記事の設定 */
article {
width:740px;
min-height:450px;
background-color:rgba(255,255,255,0.7);
margin:0px auto;
padding:20px;
overflow:hidden;
}
article h2 {
margin:10px;
border-bottom:1px solid #090487;
}
article img {
float:left;
margin:20px;
}
/* フッターの設定 */
footer {
width:740px;
margin:10px auto;
text-align:center;
font-size:11px;
}
上記のように記述したらCSSファイルを保存し、profile.htmlをブラウザで確認します。
次に問い合わせフォームを作成します。問い合わせフォームはモーダル（クリックで表示される仕様）で表示させるため、jQueryを活用します。
フォームを閉じるボタンを作成するのに、フリーのアイコンフォントであるawesomeを利用します。使用するアイコンはfa-times-ciscleです。
awesomeは多用されるアイコンのフォントになっています。上記リンクの他にもたくさんのアイコンが用意されています。現場で使う場合がありますので、使用方法を理解しておきましょう。
headタグ内に
<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>
上記のリンクを追記します。
今回はjQueryをDLしないで、リンクで呼び出す方法で使用します。
awesome、jQueryともにDLして使うことも可能ですので、詳しくはWebアイコン使用方法やjQuery使用方法などで検索して覚えておいてください。javascriptもjsフォルダを作成し、その中に保存します。javascriptについては、のちほど学習していきますので、今回はタグをそのままコピーしてcontact.jsとして保存しておいてください。
//「お問い合わせ」ボタンが押されたときに
//「#contact」を表示してください
$(function() {
$('#c_form').click(function() {
var preview = $('.contact').css('display');
if (preview == 'none') {
$('.contact').slideDown('fast');
}else{
$('.contact').slideUp('fast');
};
});
$('#close').click(function() {
$('.contact').slideUp('fast');
});
});
リンクでスクリプトを読み込むようにheadタグ内にjsファイルへのリンクを書き込みます。
<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 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>
contact要素内に、p要素で囲った、fa-times-circleクラスのi要素を配置します。そのあとにformタグで名前、メールアドレス、問い合わせ内容、送信の各フォームを記述していきます。
今回はmail.phpへ情報を送信するようにしています。
MailForm01_utf8 (1)をダウンロードして、photoshopフォルダ内にmail.phpを保存してください。mail.phpはフリーのphpコードです。phpについてものちほど勉強しますので、今回はmail.php内の33行目あたりの必須項目に必要事項のみを記入し、そのまま使用してください。phpを勉強されたり、ファイルを見てカスタマイズをしたい場合は、説明に沿ってカスタマイズしても良いです。
//--------------------------- 必須設定 必ず設定してください ----------------------- //サイトのトップページのURL ※デフォルトでは送信完了後に「トップページへ戻る」ボタンが表示されますので $site_top = " "; // 管理者メールアドレス ※メールを受け取るメールアドレス(複数指定する場合は「,」で区切ってください 例 $to = "aa@aa.aa,bb@bb.bb";) $to = " "; //フォームのメールアドレス入力箇所のname属性の値（name="○○" の○○部分） $Email = "Email"; /*------------------------------------------------------------------------------------------------ 以下スパム防止のための設定 ※有効にするにはこのファイルとフォームページが同一ドメイン内にある必要があります ------------------------------------------------------------------------------------------------*/
また、awesomeのアイコンを押したらcontactを隠すようにjavascriptで指定するため、p要素へid=”close”を追加し、CSSのためclass=”txt-r”を追記します。
<div class="contact">
<p id="close" class="txt-r"><i class="fa fa-times-circle"></i></p>
<form method="post" action="mail.php">
<p>お名前<br><input type="text" name="name" size="40"></p>
<p>メールアドレス<br><input type="text" name="mailadress" size="40"></p>
<p>お問い合わせ内容<br><textarea name="text" rows="10" cols="40"></textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</div>
contact要素のCSSを追記していきます。
contactプロパティの背景は白（#fff）、positionは絶対位置「absolute」を指定します。絶対位置は上から30%、右から33%の位置にします。paddingを上下左右20pxにして、全体を角丸四角形で囲みます。
txt-cプロパティは、中央揃えに、アイコンのtxt-rプロパティは右上表示にpadding 上下左右10px 幅20pxで指定します。
/* コンタクトフォーム用 */
.contact {
background-color:#fff;
position:absolute;
top:30%;
right:33%;
padding:20px;
border-radius:5px;
display:none;
}
.txt-c {
text-align:center;
}
#contact.txt-r {
padding: 10px;
text-align:right;
width: 50px;
color: gray;
}
お問い合わせフォームの位置ですが、画像などによってきちんと中央になるよう配置してください。（今回はサンプルのため、ざっと配置しております。）
今回は初心者用ということで、paddingなど細かく設定していますが、同じmarginやpaddingを設定する場合、txt-r,txt-cなど、何回も同じプロパティを書かなくて済むよう、複数クラスを指定する方法もあります。
CSS 複数クラス で検索してみてください。
ここまで完成したら、作品１、作品２のページを作成します。作品１のページはwork01.html、作品２のページはwork02.htmlと名前を変えて保存します。内容の記述をそれぞれ変えていきます。（h2要素、img要素、p要素）
それぞれのリンクを各HTMLファイル内に記述していきます。
<nav> <ul> <li><a href="index.html" title="">TOP</a></li> <li>自己紹介</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> </nav>
<nav> <ul> <li><a href="index.html" title="">TOP</a></li> <li><a href="profile.html" title="">自己紹介</a></li> <li>作品1</li> <li><a href="work02.html" title="">作品2</a></li> <li id="c_form">お問い合わせ</li> </ul> </nav>
<nav> <ul> <li><a href="index.html" title="">TOP</a></li> <li><a href="profile.html" title="">自己紹介</a></li> <li><a href="work01.html" title="">作品1</a></li> <li>作品2</li> <li id="c_form">お問い合わせ</li> </ul> </nav>
各ページのリンク部分での挙動 a:link a:hover などでリンクに対してのアクションを変更したCSSを追記してみてもいいかもしれません。
現在のページでは、とどまっているページ以外にリンクがある状態で、下線が表示されます。