HTML等基本骨格

HTML5骨格貼り付け用

index.php内の記述 

<?php 
$title = "タイトル";
$pageid = "ディレクトリ";
?>
<!--<?php include "../header.php"; ?>ここから-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="<?php echo($title); ?>について解説しています。" />
<meta name="keywords" content="キーワード１、キーワード２" />
<meta name="author" content="wakabagari" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title><?php echo($title); ?></title>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--<?php include "../header.php"; ?>ここまで-->
<link rel="stylesheet" href="style.css" media="all" />
<link rel="canonical" href="https://kanri.nkdesk.com/" />
<link rel="shortcut icon" href="icon.ico" />
<link rel="apple-touch-icon" href="png/icon.png" />
</head>

<body>
<!--<?php include "../topber.php"; ?>ここから-->
<header></header>
<nav></nav>
<!--<?php include "../topber.php"; ?>ここまで-->
<div id="centents">
<article>
<section id="a1"></section>
</article>

<!--<?php include "../sideber.php"; ?>ここから-->
<aside></aside>
<!--<?php include "../sideber.php"; ?>ここまで-->
</div>

<!--<?php include "../footer.php"; ?>ここから-->
<footer>
<small>Copyright&copy;2006-2013 <a href="">サイト名</a> all right reserved.</small>
</footer>
<!--<?php include "../footer.php"; ?>ここまで-->

</body>
</html>
  • タイトルはmetaタグの後にしないとスクリプト実行の際白い画面になる。
  • link rel=canonicalは、重複コンテンツの防止タグ。wwwありとなしとか、携帯サイトとPCサイトを別々に作っている場合とかに、インデックスされるURLを一つに絞るため。（詳細）
  • http-equiv="X-UA-Compatible" content="IE=Edge"は互換モードにしてしまってレイアウトが崩れるのを防止する記述。
  • link rel=shortcut iconは、ブラウザのURLの左に現れたり、タブブラウザのタイトル左のアイコンを指定できる。

CSS3骨格貼り付け用

style.css内の記述 

@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	outline:0;
	font-family:Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size:16px;
	line-height:1.5;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	}
.clearfix {
	zoom:1;
	}
a {
	text-decoration:none;
	}
ul,ol {
	list-style:none;
	}
img {
	vertical-align:middle;
	max-width:100%;
	}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
	display:block;
	}
/*
html {
	background : url(../960_grid_12_col.png) repeat-y top center;
	}
*/
header,footer {
	width:100%;
	text-align:left;
	}
#contents {
	width:90%;
	margin:auto;
	text-align:left;
	}
/*768px/////////////////////////////////*/
@media screen and (min-width:768px){
#contents {
	width:960px;
	}
article {
	width:60%;
	float:left;
	}
aside {
	width:40%;
	float:right;
	}
	}
/*1024px////////////////////////////////*/
@media screen and (min-width:1024px){
	}
  • *ユニバーサルセレクタはスピードが低下するとのことで一つ一つスタイルのリセット。
  • font-familyは昔はメイリオだったが、最近は日本語は游ゴシックとか、英数字はVerdanaがいいみたい。
  • レスポンシブデザインにするならwidthは％指定で。
  • レスポンシブデザインではなく、モバイルサイトを別に用意するのであれば、携帯ブラウザへの対応を参照。こちらの利点はカスタマイズの自由度があること。レスポンシブデザインだとサイドメニューをそのまま下に配置するか、display:noneで見えなくするかしかないので。
  • imgにvertical-align:bottomとかを指定しないと画像の下に謎の空白（ディセンダー）が出現する。（詳細）
  • max-width:100%を指定すると、画像のはみ出しを防止することができる。大きい画像はブラウザの幅により自動縮小されて表示される。
  • 行間は黄金比を使うと良い。（黄金比、白銀比他）

クリアフィックス

clearfixは、クリアフィックスさせたい包括ブロックに対して、 

h1 {
	overflow:hidden;
	_zoom:1; /*IE6用*/
	}

を指定することでもOKとのこと。

ただし、最近の動的デザインではul要素とかでoverflow:hiddenを多用する場合は結構あって、競合や意図しないところでhiddenになってしまったりして不具合の原因となることも少なからずあるんで、やはり昔ながらのafter擬似要素のが無難。

メディアクエリ

IE8以下へのメディアクエリ対応は、html5への対応とともにhead内のjsファイルが解決。ただし、メディアクエリ内のタイプ属性は省略しない。モバイルファーストでの読み込み。

デスクトップファーストにする場合は、(min-width:768px)を(max-width:768px)とすると、768px以下のデバイス用スタイルを適用することができる。

IE9以下へのCSS3の対応とグラデーション等の作成ツールに関しては、CSSプロパティを参照。（PIE）

margin-topとmargin-bottomは数値の大きいほうが優先で適用される。（相殺）

デバイスピクセル比を考慮して、モバイル用の画像は倍のサイズで用意しておく。

グリッドの使用

htmlの背景に指定する960グリッド画像は、960 grid systemからDL後、解凍→Fireworksフォルダの中の960_grid_12_col.png画像を用いる。（12カラムでよいと思う）

同じく上記のファイルのphotoshopの中にある下記ファイルを開いて、

以下のように、表示からグリッドやガイドを表示させ、環境設定のグリッドのところで、グリッド線を10pixel、分割数を2として置く。（他のPhotoshop基本設定は事前に済ませる）

後は、デモページのように960pxの幅の中に適当なカラムを作って配置していくだけ。

配置が終わったら、画像をスライスツール（左に並ぶパレットにある）で単位毎に切り分けて保存する。

最近はCSS3で自由度の高いサイトを作れるのでそこまでする必要はなくなったかも。（CSSジェネレータ一覧）

モバイルユーザビリティ

平成26年11月くらいからGoogleがやけに強く指摘してきた。（モバイルユーザビリティ）

Flashの使用

モバイルではFlashを使用することができない。

ビューポートの設定

viewportタグを使用すること。つまり、リダイレクトに依存したページ切り替えではなく、レスポンシブ・デザインにしろということ。半ば強制的といっても過言ではない。

フォントサイズ

フォントサイズが小だと減点。

フォントサイズは基本16pxで。小は75％（12px）、大は125％（20px）。

タップ要素同士の距離

タップ要素同士が近すぎると減点。

重要なボタンやリンクの大きさは高さと幅が48px以上、重要じゃないものであっても、行間は32px以上開ける。line-height:2;以上？

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ