ゆるくはじめるWordPress.

テーマをレスポンシブにするためのHTML5の書き方【WordPressテーマ作り STEP1】

responsivedsign

PC、タブレット、スマホなど様々な画面サイズのデバイスでの表示を1つのHTMLファイルで対応できるよう、HTMLとCSSを書いていきます。まずはHTML編。
今から作るならHTML5でよいと思うので、HTML5を使ってできる限りシンプルに。を意識して作りました。<head>~</head>内の書き方なども併せてまとめています。

ちなみにモダンブラウザ向けにコーディングしたので、HTML5に対応していないIE8なんかでの表示が必要な場合は別途調整用のコードを書き足してください。
と言ってもすでにIE8は2016年1月12日でサポートが終了しているので、特別な事情が無い限り、個人のブログでは対応させる必要は無いかなと思います。
そこはサイトの内容やアクセス解析の結果を見たりしてご判断を。

基本のHTML5マークアップ

最低限必要な物だけでHTMLを書くと以下のようになります。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sitename</title>
</head>
<body>
<!-- Start your code here -->

<!-- End your code here -->
</body>
</html>

HTML5では<!DOCTYPE html>とすればHTML5で書くよという宣言になるそうなので、これだけでOK。<meta charset="">部分はWordPressでは勝手にUTF-8になります。


<head>~</head>内に必要な物を書き込む

上記の物以外にも必要なタグを書き込んでいきます。この部分はWordPressに持って行った後で大半が専用のタグに置き換わるのですが、内容を把握するためにも形だけはしっかりと。

HTML

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sitename</title>
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="" type="text/css" media="screen">
</head>

meta http-equiv:IEの互換モードで表示されるのを防ぐために入れてます。content="IE=edge"で最新バージョンの標準モードでの表示を指定。

meta name="viewport":レスポンシブデザインには必要な記述。content="width=device-width"でアクセスしている端末の画面幅に合わせて表示。となります。そしてinitial-scale=1は初期のズーム倍率の指定なので1としてあります。
このビューポートとcssのメディアクエリを利用してレスポンシブ対応させていきます。

HTMLの基礎については下記サイトがとても参考になりました。

HTMLクイックリファレンス

中身の大枠をマークアップ

ヘッダー部分は<header>を、フッターには<footer>を使ったりして構造の一番外側の枠を作ります。クラス名は自由にどうぞ。
右側にサイドバーがある形の2カラムのブログを想定して組みました。スマホなどの横幅の狭い画面ではコンテンツの下にサイドバーの内容が下りて縦並びになるようにしたいと思います。
<body>~</body>内に下記を入れたらHTML編は終了。CSS編に続きます。

HTML

<header class="header">
  <p>header</p>
</header><!-- header-->
 
<div class="wrapper">
<div class="content">
  <p>content</p>
</div><!--content -->
</div><!--wrapper -->
 
<div class="sidebar">
  <p>sidebar</p>
</div><!-- sidebar -->
 
<footer class="footer">
  <p>footer</p>
</footer><!-- footer -->

スポンサーリンク

公開日:2016-1-17