HTML/CSS6-2 スマホサイト作成 HTMLマークアップ編
上記で作成したindex.htmlにCSSでコーディングをしていきます。
Sublime Textのショートカットキーは下記を参考にしてください。
http://www.starlod.net/sublime-text-3-shortcutkey.html
画像ファイルはimagesからDLしてください。リセットCSSとslicknav用のCSSフォルダもcssからDLしてください。
index.htmlと同じフォルダ内に展開しておいてください。
それではCSSを書き出していきます。
まず、cssフォルダ内にある、html5reset-1.6.1.cssをタイトルタグ下にリンクさせます。
これはGoogleから配布されているリセットCSSです。
リセットCSSについては、いろいろなところから配布されていますので、あとでリンク先などで調べて覚えておいてください。
さらに、Sublime Textでcssフォルダ内にcommon.cssを作成し、リンクさせます。
今回はこのcommon.cssにソースを書き込んでいきます。
略 <title>Web Design</title> <link rel="stylesheet" href="css/html5reset-1.6.1.css"> <link rel="stylesheet" href="css/common.css"> 略
最初にコメントオフ（/* */）で全体指定と記述していきます。
スマホはサイズが機種によって異なるので、html、bodyともに高さを100%というパーセント指定にします。
CSS3では、同じような指定をしたいときは、，（コンマ）で区切って指定できます。
bodyタグ内の装飾をしていきます。
文字色は白に黒は補色となり、見えづらいので #666（グレー）を指定します。
フォントファミリーはひげなし文字の sans-serif を指定します。
次に、imgですが、スマホ表示でフィックスさせたいのでこちらも幅は100%指定します。高さは幅に合わせるようにauto指定します。
pタグの指定をしていきます。スマホは機種によって文字の大きさが異なり、px指定すると思わぬ表示になってしまうため
remの単位で文字の大きさを指定します。今回は機種のデフォルトの文字サイズより少し小さめの0.8remを指定しましょう。
行間は少し空けたいので、1.2remに指定します。
remについてはフォントサイズの指定はCSS3の「rem」が便利そうで確認してください。
行間の調節 CSS line-height: 行間がわからない方はリンク先で学習しましょう。
article全体にpaddingを指定します。こちらもスマホ対応なので%指定します。今回は3%にしてみましょう。
sectionにはmargin-bottomを指定します。こちらもrem指定で 1.4remにしてみましょう。
h2タグの指定をします
文字をセンター揃えに、フォントのサイズは1.2rem、色は #F75E40 margin-bottomは少し詰めて0.6remに指定します。
/*全体指定*/
html, body {
height: 100%;
}
body {
color: #666;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
p {
font-size: 0.8rem;
line-height: 1.2rem;
}
article {
padding: 3%;
}
section {
margin-bottom: 1.4rem;
}
h2 {
text-align: center;
font-size: 1.2rem;
color: #F75E40;
margin-bottom: 0.6rem;
}
ここまで記述したらいったん保存しておきましょう。ブラウザのエミュレーターでチェックするとcssでスタイル指定していなかったときよりもだいぶ見やすくなっていると思います。
次にヘッダーの記述をしていきます。
先ほどと同じようにコメントオフ内にheaderと記述します。
そのあとheaderの指定をしていきます。スマホサイトなので、ヘッダーを固定にします。
positionの「absolute」「relative」「fixed」のリファレンス
相対位置への配置を指定します。背景色は#4D559F を、さらに背景画像として
このheader_top.jpgを繰り返しなしで指定します。
背景画像の場所を中央にして一度エミュレーターで確認してみましょう。
青の部分とボタンの配置がずれています。少し背景画像の位置を上にしましょう。
-20pxの指定を追記してみます。もう一度エミュレーターで確認してみます。画像が少し上に上がりました。
うまく青い部分の中にボタンがおさまる配置になりました。
このようにモバイルサイトやレスポンシブサイト作成の場合
エミュレーターや、ブラウザの大きさを変えながら微調整して作成していきます。
通常の手順とは異なり、最適な状態を手探りで見つけながらコーディングを
していくことを覚えておいてください。
vertical-alignプロパティで、行のなかでのテキストや画像などの縦方向の揃え位置を指定します。
今回はbottomで下に配置させましょう。次にbackground-sizeを指定します。
CSS3 スマホサイト制作にかかせないbackground-sizeについて
スマホサイト制作において、AppleのRetinaディスプレイが登場して以来、画像は端末の解像度を考慮し、表示させる2倍以上のサイズで制作するのがほぼ一般的になっています。
今回は2倍まで大きくせず、160%に指定します。幅に合わせて高さは自動調整されるように指定します。
header全体の高さを60%に指定します。
左右と上のmaginは0にします。
/*header*/
header {
position: relative;
background: #4D559F url(../images/header_top.jpg) no-repeat;
background-position:center -20px;
vertical-align: bottom;
background-repeat:no-repeat;
background-size:160% auto;
height: 60%;
right: 0;
left: 0;
top: 0;
}
ここまででいったん保存します。実務でも、ある程度の段階ごとにこまめに保存するようにしていると、前行った作業がおかしかったりしても、すぐに元に戻せます。
次にheader内の各タグのスタイルを指定します。
h1タグは表示させないように
display: none;
で指定します。
pタグは絶対的な配置にします。上から40%の場所に配置させ、左右の指定は0にします。marginは自動で配置させます。幅は90%にしましょう。
ここでいったん保存して、そのままbtn要素のスタイルを指定していきましょう。
btnも絶対配置を指定します。上から84%、左右は指定0、下から14%までの指定をします。
marginは同じく自動配置にします。幅は全体の70% 高さは文字 2.8remで指定します。
行間も2.8remにしましょう。
文字は中央揃え、文字のサイズは1.3remにします。
周りを0.14rem の直線でかこいましょう。 色は、#DB4C47にします。
マウスオーバーの指定もしていきます。
リンクの装飾はなし、ブロック要素にしてスマホでタッチしやすくします。文字色は白にしましょう。
マウスオーバー時にうすい白になるように指定します。
CSS3では、RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。
alphaは色の透明度の指定です。
255,255,255 のように、リンクになっている部分がrgbでの指定です。リンク先で3ケタの数字を入れるとrgb変換できます。
そのあとの0.5が透過度です。1は透過なしとなります。
今回は0.5透過させます。
header h1 {
display: none;
}
header p {
position: absolute;
top:40%;
left: 0;
right: 0;
margin:auto;
width:90%;
}
.btn {
position: absolute;
top: 84%;
left: 0;
right: 0;
bottom: 14%;
margin: auto;
width: 70%;
height: 2.8rem;
line-height: 2.8rem;
text-align: center;
font-size: 1.3rem;
border: 0.14rem solid #DB4C47;
}
.btn a {
text-decoration: none;
display: block;
color: #FFF;
}
.btn a:hover {
background-color: rgba(255,255,255,0.5);
}
ここまでできたら、ブラウザで確認してください。エミュレーターでは挙動確認できない場合があります。その場合、エミュレーターを解除して、通常のブラウザ表示でマウスオーバーで白くなるか、確認します。
ブラウザのサイズを小さくして、動作確認してもかまいません。
次はナビゲーション部分のスタイルを指定していきます。
コメントオフでnavとわかるように記述してからCSSを書き始めましょう。
nav内のh2 は絶対配置にして 上と左から0.5remの場所に配置させます。
幅は34%程度にします。
idのmenu要素も 表示させないように
display: none;
で指定します。（あとでjQueryのslicknavで表示させるので今は非表示にしておきます。）
/*nav*/
nav h2 {
position: absolute;
top:0.5rem;
left: 0.5rem;
width: 34%;
}
#menu {
display: none;
}
ここまでできたら、保存して再度エミュレーターで確認しましょう。
このように三つのロゴの図柄が上に表示されれば大丈夫です。
次にメインコンテンツ内のスタイルを指定します。
コメントオフでmainの記述であることを書き出してCSS記述を始めましょう。
id course内の pタグ は margin-bottom で 一文字分（1rem）間隔を空けます。
main article section 内のh3 については、
文字の配置は中央揃え、フォントサイズは1.2rem pタグと同じく margin-bottom で 一文字分（1rem）間隔を空けます。
main article section figure に対して padding 上下 1.4rem 左右 3rem の余白を作ります。
/*main*/
#course p {
margin-bottom: 1rem;
}
main article section h3 {
text-align: center;
font-size: 1.2rem;
margin-bottom: 1rem;
}
main article section figure {
padding:1.4rem 3rem;
}
いったん保存して、エミュレーターで確認します。
上記のように、h3要素が中央揃えになり、文字の間隔が空いていれば大丈夫です。
次は、お問い合わせフォームのスタイルを指定していきます。