« ど初心者のレスポンシブウェブデザイン(HTML 実践編) | トップページ | 旧頁のhtml5及びレスポンシブ化の際のcss小技覚書 »

旧頁のhtml5及びレスポンシブ化の作業順序覚書

htmlの一番上に

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

を入れる。

その下に

<link rel="stylesheet" href="../spa_phone.css" type="text/css" media="screen and (max-width: 480px)">
<link rel="stylesheet" href="../spa_pc.css" type="text/css" media="screen and (min-width: 481px)">
<link rel="stylesheet" href="../print.css" media="print" type="text/css" />

を入れる。

その下に

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes">

を入れる。

以上チェック。

中身は基本的にコピーするが、修正箇所を羅列する。

  1. <meta name="description" content・・をその温泉の説明に
  2. <title>をその温泉に
  3. ヘッダーの<h1>をその温泉に
  4. ヘッダーの<h2>にその温泉の一行キャッチコピーを
  5. ヘッダーの<ul>にその温泉の情報を
  6. ヘッダーの一番下にその温泉のデータ更新日を
  7. ナビのメニューの<ul>に地域の変更があれば修正
  8. ナビのメニューの「共有」リンクのリンク先とテキストの修正
  9. セクションのコンテンツの<ul>にその温泉の☆を
  10. セクションのコンテンツの<h2>をその温泉に
  11. コンテンツ内の画像は、横に二枚並べるときは<div class="spaphoto">で囲う
  12. コンテンツ内の画像を一枚使う、または縦張りするときは<div class="spaphoto">で囲わずに、タグ内に class="alignleft"を入れる
  13. コンテンツ内のテキストは段落ごとに<p>でまとめる(<br>より行間が空く)
  14. コンテンツ内の<div class="spamap">の部分の<h2>をその温泉に
  15. コンテンツ内の<div class="spamap">の<div class="pconly">にgooglemapの歯車をクリックしてその温泉の所在地の埋め込み表示(サイズ小)を入手して貼る
  16. コンテンツ内の<div class="spamap">の<div class="phoneonly">にgooglemapの歯車をクリックしてその温泉の所在地のURL(埋め込みに非ず)の短縮アドレスを入手してリンクの形で貼る
  17. コンテンツ内の<article>を必要に応じて増減し、「この温泉を訪問した時の子連れ旅行記」「近隣の子連れ遊び場情報」「混浴攻略法」などを入れる
  18. ファイル名は過去のファイルのf枠に上書きする

たぶんこれでいけるんじゃないかなぁ。基本はコピー、コピーになると思うけど、地図の張替と、共有のリンクの張替を忘れそうなので注意。

|

« ど初心者のレスポンシブウェブデザイン(HTML 実践編) | トップページ | 旧頁のhtml5及びレスポンシブ化の際のcss小技覚書 »

web」カテゴリの記事

パソコン・インターネット」カテゴリの記事

メモ」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事