東京の三多摩でＤＴＰの制作を中心にホームページ作成、データベース作成が主な仕事です

Top / レスポンシブWEB

レスポンシブWEBデザイン

ＱＨＭがQHM haikとなりました。このhaikについては様々な意見があるようですが、ＱＨＭのデザインテンプレートとして使えるということですが、そのデザインテンプレートの数は８種類と数が少ないので、きっと同じようなデザインのホームページがかぶってしまうんでしょうね。

デザインテンプレートが自分で好きなように出来ないと、私の場合は仕事にならないので、haikを使ってという訳にはいかないので、独自でレスポンシブWEBデザインの勉強を始めました。

まずは、旧haikで作成したサンプルＨＰ。比べて見て頂きたいのは独自で作ったサンプルＨＰの２つです
どちらもレスポンシブWEBデザイン対応です。簡単に作れるのは旧haikで作成したサンプルＨＰ。ＱＨＭの編集画面とは違いますが、それなりに使えます。話はhaikではなくＱＨＭにbootstrapを使って独自のレスポンシブWEBデザイン対応のホームページをつくろうというほうに。
ここからbootstrapをダウンロードして、jsフォルダにbootstrap.min.jsをFTPを使ってアップします。リンクしてますので「ここから」をクリックしてダウンロードしてください。

 <script type="text/javascript" src="js/bootstrap.min.js"></script>

を設定→サイト情報の設定→アクセス解析タグにコピーします。

これで準備完了です。次にmain.cssを編集します。
最初の1行目に　@import url("bootstrap.css");　を追加します。
次に

@media only screen and (min-width:768px){
main.cssで書かれているスタイルファイルのままです
}

@media only screen and (max-width:767px){
スマホ、iPhoneで表示される設定ファイルを新規で作成します
}

/* スマートフォン 横(ランドスケープ) */

@media only screen and (max-width:640px){
#header{
 margin-left: auto;
 margin-right: auto;
}
	#header h1,.logo,.info{text-align:center;}
	
	.logo,.info{
	clear:both;
	width:100%;
	float:none;
	margin:0;
	}
	
	.box img{
	float:left;
	margin-right:5px;
	}
	
	.box h3{padding-top:0;}

  #qhm_eyecatch p {
	width:100%;
	font-size: 7px;
	width:100%;
	margin:-20px 0;
	}
 .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
	
	#gallery .grid{float:left;}
}

/* スマートフォン 縦(ポートレート) */

 @media only screen and (max-width:480px){
	.grid{width:70%;}
	.box img{max-width:70px;}
	#mainBanner h2,#mainBanner p{font-size:70%;}
	#sidebar p{text-align:center;}
}