最短ホームページテンプレートのカスタマイズはどこまで出来る?

レスポンシブWEBデザイン

この最短ホームページテンプレートをレスポンシブにするより白紙から作成した方が早い!

少なくとも私ことMYUが作成するなら・・ですが

という事で何となく見た目を最短風に?作成してみようかなぁ~~~と思いました

最短テンプの基本①は幅が780pxなのでブレイクポイントを780に・・ではちょっと狭いので960に・・

まずヘッダーから作成開始です(head内は少し変更)

HTML/head内の記述

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>タイトルをここに入れる</title>

<meta name="viewport" content="width=device-width">

<meta name="keywords" content="ここにキーワードを入れる">

<meta name="description" content="ここにホームページの紹介文を入れる">

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

</head>

レスポンシブの特徴

最短HPはまずPCサイトがあって、次にスマホサイトという考えです(言い切っていいのかな?)

レスポンシブの場合はどちらから作成してもいいのですが、基本的に一つのHTMLをCSSで見せ方を設定するため、スマホから作成した方がいいかもしれません

もうここまでくると最短HPテンプレートの影も形もなくなってしまいますね(><)

スマホで縦へ縦へと並べた項目をPCでは所々横に並べる(CSSに記述)

下の図がシッカリ頭に入っていればレスポンシブは怖くない!(ホント?w)

モバイルでは幅の指定はしない→100%、90%などが一般的

PCでは固定幅(ブレイクポイント使用)を指定→その中のそれぞれを指定(pxなど)

作成の準備

モバイルから作成しますが、画像と文章が混じっているとややこしいので、画像だけにしてみます

ここで使用する画像はパソコンのブレイクポイント幅に合わせて960px 高さは540pxです

画像6枚必要ですが、面倒なので6枚とも全部同じ画像にします ※因みにこちらで用意した画像→

画像のファイル名はimage-01.jpgです