ホームページ作成プランニング前半では、ユーザ目線でのホームページ作成に係わることについて考えてみました。
ここでは、製作するにあたって、どのようにコーディングしていくか、順序たてて考えていこうと思います。
具体的なものがないとイメージがつきにくいので、以下のような題材を用意いたしました。
尚、以下の題材は、宿として現存しないものとして、ご了承ください。
- サイト名
- ロッジウッドペッカー
- コーディング
- cmsではない、静的ページとしてコーディングする。html5に準拠したものにする。
- サイトの内容
- 新潟県妙高高原にある以下のような内容をクローズアップした宿の紹介ページになります。
宿は、妙高山山麓の森に囲まれた傾斜地に立地しています。収容人数が20名以下のこじんまりした宿です。ここでは、農業体験や、森林セラピーなどの体験イベントを開催しております。冬はスキー場のゲレンデ内であるため、スキーゲレンデの宿となります。 - 見出しと段落、画像、リンクなど、文脈に沿って正しく配置されているか。
- 伝えたい内容が、備わっているか。
- スマボ・タブレット・pcそれぞれ上記のようにセットした全体のデザインを確認する。
- <meta charset=”UTF-8″> 重要 文字円コーディングを設定する。html文の先頭に近い、titleタグより前に記述する必要あり。
- <meta name=”viewport” content=”width=device-width, initial-scale=1″> レスポンシブデザインにするには必要である。
- <title>HTML文書のタイトルを表すメタデータ</title> 重要
- <link rel=”stylesheet” href=”css/mystyle.css”> cssファイルの読み込み
- <script src=”helloWorld.js”></script> javascriptファイルの読み込み
- <noscript>JavaScript が利用できません。</noscript> javascriptファイルが読み込めないときの表示
- <meta name=”description” content=”ページの概要”> 検索ロボットに拾われることが多い内容
- <meta name=”robots” content=”noindex,nofollow”> 検索ロボットに対して登録 、リンク追跡を拒否する。
- 1.#site-intro 行間調整
- title-logo,site-titleをsite-brandingクラスで囲う。
- 2. .title-logoと.site-titleの位置関係、大きさを調整
- 3. h-navのアンダーラインを消し、リンク領域をブロック全体に広げる。タブレット・pc画面では、ナビゲーションの横並び、後ろ順に均等揃えをする。
- 4. パンくずリストのコードを加筆、なるべく左にくるように横並びにする。
- 5. 見出しをメインカラーでクローズアップする。アイコンでアクセントをつける。
- 背景画像をいれる。
- サイトマップのリンクホバー時の色を白色に変える。
- タブレット・PC画面ではサイトマップ項目を横並びにする。
- サイトマップ項目の位置調整をする。
- さらに、外部リンクを追加する。
- プライバシーポリシー以下の項目の位置調整をする。
- h2見出しの配置を装飾を検討する。
- プロフィールの画像を調整する。
- snsボタンのタグを追加する。
- snsボタンを装飾する。
- 見出し2の調整と装飾
- 見出し3の調整と装飾
- 画像の調整
- 各コンテナ間のスペースは適切であるか。
- ページ全体の色バランスは保たれているか。
- リンク誤りやリンク切れをしていないか。
- どのメディアタイプ（スマートフォン・タブレット・PC）でも適切に表示されている。
- どのブラウザ（FireFox Chrome InternetExprolerなど）でも適切に表示されている。
- 間違ったhtmlタグ、css記述がされていないか。
- 見やすい、メンテナンスしやすい記述がされているか。
- 下層ページの製作
- seo対策
- データベースの利用
- ページの多言語化
- 地図の表示
- webフォントの利用
- ページのcms化
- 問い合わせフォーム送信・アンケート調査等、動的コンテンツの導入
- ページスクロールやスライドトグル等、DOMの操作によるユーザインターフェースの強化
目次
ワイヤーフレームを作る。
pc画面2カラム、スマホタブレット画面1カラムのレスポンシブレイアウトとして構想してみました。
ワイヤーフレームを作る段階では、あくまでも、構想であるので、このあと、製作を進めていくにあたり、変更はありえます。そういうことから、この段階で、内容をつめすぎる必要は無いと思います。
pc画面のワイヤーフレーム上部レイアウト
pc画面のワイヤーフレーム下部レイアウト
スマホ・タブレット画面のワイヤーフレーム
素材を用意する。
上図のワイヤーフレームより、以下の番号に対応する素材を用意します。
２．タイトルロゴ
８．地球に優しく生きたいの見出しに対応する文章（200から400字程度）
９．地球に優しく生きたいの見出しに対応する画像（横1000px以上のpng画像）
１０、妙高杉ノ原スキー場ゲレンデの中の宿ですに対応する文章 （200から400字程度）
１１． 妙高杉ノ原スキー場ゲレンデの中の宿ですに対応する 画像（横1000px以上のpng画像）
１２．農業をやっています の見出しに対応する文章（200から400字程度）
１３． 農業をやっています の見出しに対応する 画像（横1000px以上のpng画像）
１４．自然食です の見出しに対応する文章（200から400字程度）
１５． 自然食です の見出しに対応する 画像（横1000px以上のpng画像）
１６．プロフィール見出しの文章（100字程度）と画像（横200px以内）
２０、区切りイラスト（縦30pxぐらい）
html5基本構造を考える。
現在、ページ作成に使われるHTML5がウェブ標準となっています。
web文章は、テキストに構造と意味 (セマンティクスともいう) を与え、ブラウザーが正しく表示できるようにすることです。
HTML5 においては、この構造と意味をhtmlタグとして、より明確に位置づけ、ルール化されたものとなっております。そのことにより、文書構造に一貫性を持たせ、解釈しやすくすることにより、どの階層の人でもストレス無く見ることが出来るアクセスビリティ向上に結びつくものとなっております。
具体的には、以下のようなhtml文構造になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>page title</title>
</head>
<body>
<!-- ヘッダ -->
<header>
<h1>ページ見出し1</h1>
</header><!-- ヘッダend -->
<!-- メインコンテンツ -->
<main role="main">
<section>
<h2>section見出し2</h2>
<article>
<h3>article見出し３</h3>
</article>
</section>
</main><!-- メインコンテンツend -->
<!-- サブコンテンツ -->
<asidde>
<section>
<h2>section見出し2</h2>
</section>
</aside><!-- サブコンテンツend -->
<!-- フッタ -->
<footer>
<small>Copyright</small>
</footer><!-- フッタend -->
</body>
</html> html5では、各要素タグがコンテンツモデルとして定義されております。
コンテンツモデルとは、要素を、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類 に分類し、定義したものです。
headタグ
画面表示されないメタデータが定義されます。
title、meta、script、link、styleなどの要素が入ります。
bodyタグ
画面表示される要素が定義されます。この中には、ページ構造にかかわるものである、セクションコンテンツとして、article、aside、nav、sectionや ヘッディング コンテンツである、見出し階層を示す、h1からh6などの要素が入ります。
また、本文の大まかな文書構造を表す、header、main、aside、footerはフローコンテンツに分類されている。
header main aside footerタグ
これらは、コンテンツの大まかな区分けを定義しています。header上図ワイヤーフレームの1から7になります。ファーストビューになるところです。mainこのページに固有のコンテンツ用です。ページごとに 1 回だけの使用となります。body以外のタグに入れ子することはできません。8から15になりますが、asideまでふくめることもあるようです。aside関連・補足的な情報・広告などになります。16から19になります。footerページの最後に念を押して伝えたいこと、headerやasideの繰り返しまたは形を変えたもの、著作権表示などが入ります。２０から２４になります。
mainタグ以外は、ページごとに同じ内容のものが表示される事が一般的ですが、後述するsectionやarticleタグ内に使われることもあります。
section articleタグ
sectionは、一般的な章・節・項などであることを示す要素をあらわします。
articleは、その名のとおり、一つの独立した記事を示します。
sectionの中にarticleがあったり、articleのみが使われたりする使い方となっております。但し、一般的には、どちらも見出しとセットとなっています。
navタグ
各ページへのリンクに対して使用されますが、単一のリンクについては使用しません。アクセスビリティを向上させる為に、ページ内に複数定義されることもあります。
h1からh6タグ
見出しを定義します。セマンティックなwebにする為にも、階層的な使い方が推奨されています。h1はその頂点に当たるため、各ページ内で一回だけ定義することになります。
＜参考＞
素材を大雑把に配置しボックスで区切る
htmlに上記の基本構造に沿って素材を配置する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>妙高高原の宿・ロッジウッドペッカー｜トップページ</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<!-- ヘッダ -->
<header class="h-container" style="border-width : 4px;border-style : solid;border-color : Red;">
<p>ロッジウッドペッカーは自然派の宿です。</p>
<p>ロッジウッドペッカー</p>
<nav>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="basic.html">基本情報</a></li>
<li><a href="infomation.html">宿泊の案内</a></li>
<li><a href="charge.html">宿泊料金</a></li>
<li>・・・・・</li>
</ul>
</nav>
<p>address</p>
<ol>
<li>ぱんくずリスト</li>
</ol>
<h1>自然派の宿Top</h1>
</header><!-- ヘッダend -->
<!-- ラッピング -->
<div class="wrapper">
<!-- メインコンテンツ -->
<div class="m-container" style="border-width : 4px;border-style : solid;border-color : Red;">
<main role="main">
<section>
<h2>大自然の中で暮らしたい。</h2>
<article>
<h3>地球に優しく行きたい</h3>
<p>「地球に優しく生きる」というコンセプトを基に始めた宿です。・・・</p>
</article>
<article>
<h3>妙高杉ノ原スキー場ゲレンデの中の宿です</h3>
<p>一年の半分近くは雪に閉ざされ、この時期は宿の周りはスキーゲレンデ（妙高杉ノ原スキー場）に様変わりします。・・・</p>
</article>
</section>
<section>
<h2>お財布に優しい料金</h2>
<h3>一泊3000円（素泊まり）から宿泊できます。</h3>
<p>グリーンシーズンは日本百名山である妙高山・火打山登山口にちかく、登山基地として使えます。</p>
<h3>宿泊料金が基本料金から割り引かれます。</h3>
<ul>
<li><a href="charge.html#kodomo-otoku">子供料金が半額になります。</a></li>
<li><a href="plan.html">スキー場セットプラン・森林セラピープランなどセット割引があります。</a></li>
</ul>
</section>
</main>
</div><!-- メインコンテンツend -->
<!-- サブコンテンツ -->
<aside class="s-container" style="border-width : 4px;border-style : solid;border-color : Red;">
<section>
<h2>ロッジオーナープロフィール</h2>
<figure>
<img src="#" alt="オーナーの顔写真">
<figcaption>1993年宿を開業、同時に長野県信濃町で農業を始めました。趣味は山歩きや釣りなどアウトドア大好き人間です。</figcaption>
</figure>
</section>
<section>
<h2>フェースブックタイムライン</h2>
</section>
</aside><!-- サブコンテンツend -->
</div><!-- ラッピングend -->
<!-- フッタ -->
<footer class="f-container" style="border-width : 4px;border-style : solid;border-color : Red;">
<small>Copyright 2015</small>
</footer><!-- フッタend -->
</body>
</html>ボックスを定義する。
画面は、ヘッダー領域、メイン領域、サイド領域、フッター領域に分けることが出来ます。html文においては、それぞれ、h-container、m-container、s-container、f-containerというクラス名をつけ、ボックスのレイアウト操作をすることになります。
pc画面は2カラムにするため、m-containerとs-containerを囲い込むwrapperクラス名を持つdivタグが定義されております。
Reset.cssを適用する。
<link rel="stylesheet" href="css/reset.css">インターネット上で見られている画面は、閲覧者ごとに使っているブラウザやバージョンが異なっているため、同じページでも見え方が違う場合があります。
reset.cssはこのようなブラウザのデフォルトのcssの差異を上書きすることにより、表示を統一する役目を果たしています。
ここでは、一般的に使われている物の中から、「A Modern CSS Reset」のreset.cssを採用してみました。
下図のようにFirefoxでのデフォルトの表示が替わっていることがわかります。
レスポンシブデザインを適用する。
レスポンスデザインを適用するには、headタグ内に以下のようなmeta情報を記述する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1">Viewport を設定することにより、 ページの幅やさまざまな端末での拡大縮小を制御できるようになります。「width=device-width」は デバイスの横幅に合わせてコンテンツを表示する ということであり、その初期拡大率initial-scaleは端末の種類に係わらず、「１」すなわち端末に対して、拡大も縮小もされずに端末サイズに合わせた表示ということになります。（設定しない場合は初期拡大率が0.25であり、より小さな表示となる。）
各ボックスにはコンテナ名として以下のようなクラス名をつけ、mystyle.cssでスタイルを定義することとします。
<body>
<!-- ヘッダ -->
<header class="h-container">
</header>
<!-- ラッピング -->
<div class="wrapper">
<!-- メインコンテンツ -->
<div class="m-container">
</div><!-- メインコンテンツend -->
<!-- サブコンテンツ -->
<aside class="s-container">
</aside><!-- サブコンテンツend -->
</div><!-- ラッピングend -->
<!-- フッタ -->
<footer class="f-container">
</footer><!-- フッタend -->
</body>
<link rel="stylesheet" href="css/mystyle.css">cssへの記述はモバイルファーストとしたほうが直感的にスタイル設定しやすいといわれております。モバイルファーストとは、スマホ画面のcssを記述し、画面幅を広げていくにしたがって、その変更箇所を上書き設定するというやり方です。
ここでは、ブレークポイント (レイアウトを切り替える画面サイズの値) を、スマホからタブレットへは599px、タブレットからpcへは959pxの画面幅としました。
pc画面においては2カラム表示になるので、「@media screen and (min-width:959px)」において、m-containerボックスの横にs-containerボックスがくるようにスタイルシートをコーディングします。
mystyle.css
@media screen and (min-width:959px) {
/*横に並べる*/
.wrapper{
display: flex;
}
.s-container{
flex: 0 0 300px;
order: 2;
}
.m-container{
flex: 1 1 auto;
order: 1;
}
}flexboxレイアウトモジュールでは、横に並べるボックスの親要素であるwrapperクラスにflexコンテナーを適用すれば、デフォルトで横並びになります。
.s-containerと.m-containerにはflexアイテムが設定されています。それぞれ 「flex:grow」相対伸び率、「flex: shrink」相対縮み率、「flex: basis」ベースの幅が示されております。s-containerは伸びることも、縮むことも無いので伸び率、縮み率ともに０になり、ベース幅が300px固定値に設定されております。
m-containerはベース幅は画面幅におおじて幅が変わるのでautoになります。伸び率、縮み率はブロック幅の中に相対的に変動するボックスがほかに無いので相対幅全体を占有する設定になっております。
＜参考＞
基本となる配色を考える。
webサイトのテーマカラーは、 ベースカラー７０％、メインカラー２５％、アクセントカラー５％の比率で 配色すると、全体的にまとまりのあるデザインになるということがいわれております。
各カラーの役割と使い方は以下のようになっております。
メインカラー
サイトを印象付ける、最初に決めるべきカラーです。下図で示されているように、「どういう印象を与えたいか。」で色の選択が決まります。
ロゴ部分や見出し、キャッチフレーズなど、見る人にとって目にとまりやすい箇所に使用します。文字やイラストを際立たせる為には、明度を下げてた方がしっくりいくとされています。
ただし、赤、白、黒、緑などの原色は、信号機や警告マークなどのすでに定番として印象付けられている色なので、オーバーラップされない為にもさけるべきと言われております。
ベースカラー
サイトの背景色になる色になります。白やライトグレーなどの明度の高い色が使われる場合が多いです。ベースカラーの明度を上げた、薄い色を使うとバランスよくまとまります。
アクセントカラー
商品購入ボタンやおすすめ商品のアンダーライン、背景など、特に注目させてたいポイントとなるものに使われます。メインカラーの反対色を使うとその効果が増大されるといわれております。
色がサイトの印象付ける具体例（wordpress管理画面）
「ダッシュボード -> ユーザー -> プロフィール -> 官吏画面の配色」の画面を開くと下図のように画面構成比の配色がみられます。
デフォルト
ライト
ブルー
コーヒー
エクトプラズム
ミッドナイト
オーシャン
サンライズ
ページの配色を決める
宿のコンセプトは、キーワードとして「自然派」という言葉があります。ここではこの言葉に連想される色をメインカラーにしたいと思います。
メインカラーmain
ベースカラーbase
アクセントカラーaccent1accent2
＜参考＞
全体のデザインを調整する。
スタイルシートに全体のレイアウト、共通のスタイル、背景色・背景画像の項目を区切り（コメント表示で区切る）、各項目ごとに記述をします。
全体のレイアウト
mystyle.css
/* ---------------
全体のレイアウト
----------------*/
.h-container,
.wrapper,
.f-container {
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
@media screen and (min-width:599px) {
.h-container,
.wrapper,
.f-container {
width: 90%;
}
}
@media screen and (min-width:959px) {
/*横に並べる*/
.wrapper {
display: flex;
}
.s-container {
flex: 0 0 300px;
order: 2;
}
.m-container {
flex: 1 1 auto;
order: 1;
}
}
/* パディングの設定 */
.h-container,
.m-container,
.s-container,
.f-container {
padding: 0 2%;
}コンテンツの表示領域（width）は、スマホ画面では95％、タブレット・pcでは90％とし、1200px幅までを上限（max-width）としています。
そして、コンテンツが画面中央に来るように（margin: 0 auto）収めることとします。
左右の余白はコンテンツボックス内の余白（padding）として、左右2%としています。
共通のスタイル
mystyle.css
/* -------------
共通のスタイル
---------------*/
/* フォントサイズ設定 */
body {
color: #444;
font-size: 15px; /* 全体の文字サイズ */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/
line-height: 2; /*行間*/
}
@media screen and (min-width:959px) {
.h-container,
.m-container,
.f-container {
font-size: 1.2em;
}
}
/* link a */
a:hover {
color: #ffa500;
text-decoration: none;
}文字サイズ（font-size）はスマホ・タブレットでは15pxで、pcではその1.2倍（1.2em）としています。
行間は標準（1.5）より少し広めの（line-height: 2）になっています。
リンク文字色はデフォルトのままの青色で、カーソルを近づけたとき（a:hover）にオレンジ色になり、下線（text-decoration）が消えます。この部分は強調したい為にアクセントカラーとしています。
背景色・背景画像
mystyle.css
/* -------------
背景色・背景画像
---------------*/
/* ボックスの背景設定 */
body {
background-color: #cfc
}ページ全体の背景色（backgrount-color）はベースカラーとしています。
すべての素材をhtml文に配置する。
スタイルシートを適用していない、スマボ画面で表示してみます。
ここでは、上部から下に向かって内容を読み進め、以下の点をチェックします。
headタグ内を作る
headタグ内では、ページのメタ情報やスタイルシートファイル、javasceiptファイル等の取り込み記述情報など、画面表示されない情報が記述されます。よく使われるものとして、以下のようなものがあります。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>妙高高原の宿・ロッジウッドペッカー｜トップページ</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mystyle.css">
</head>headerのデザイン
変更箇所は以下のようになります。
html
<!-- ヘッダ -->
<header class="h-container">
<p id="site-intro">自給自足・自然食・森林セラピー 自然派の宿のサイトです</p>
<div class="site-branding">
<div class="title-logo">
<img src="./img/lodgephoto_web.png" alt="ロッジ外観">
</div>
<p class="site-title">
<a href="#">ロッジウッドペッカー</a>
</p>
</div>
<p class="addr">
345-6789 新潟県妙高高原町杉野沢
</p>
<nav>
<ul id="h-nav">
<li><a href="index.html">トップページ</a></li>
<li><a href="basic.html">基本情報</a></li>
<li><a href="infomation.html">宿泊の案内</a></li>
<li><a href="charge.html">宿泊料金プラン</a></li>
<li><a href="taiken.html">体験情報</a></li>
</ul>
</nav>
<!-- パンくずリスト -->
<div class="breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<!-- 1つめ -->
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="ホームのURL">
<span itemprop="name">ホーム</span>
</a>
<meta itemprop="position" content="1" />
</li>
<!-- 2つめ -->
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="次の階層のURL">
<span itemprop="name">次の階層名</span>
</a>
<meta itemprop="position" content="2" />
</li>
</ol>
</div><!-- パンくずリストend -->
<!-- 見出し1 -->
<h1>自然派の宿です。</h1>
</header><!-- ヘッダend -->mystyle.css
/* -------------
ヘッダー
---------------*/
#site-intro {
line-height: 1;
}
/* .site-branding */
.site-branding {
position: relative;
}
.title-logo {
width: 37%;
}
.title-logo img {
border-radius: 30%;
}
.site-title {
font-size: 1.8em;
font-weight: bold;
line-height: 1;
position: absolute;
top: 30px;
left: 35%;
}
.site-title a {
text-decoration: none;
color: #000;
}
.addr {
margin-left: 5%;
}
@media screen and (min-width:599px) {
.site-title {
font-size: 2.2em;
left: 150px;
}
}
/* h-nav */
#h-nav {
list-style-type: none;
}
#h-nav a {
display: block;
}
@media screen and (min-width:599px) {
#h-nav {
display: flex;
justify-content: flex-end;
}
#h-nav li {
width: 150px;
}
}
/* パンくずリスト */
.breadcrumb {
margin-left: -30px;
}
.breadcrumb li {
display: inline;/*横に並ぶように*/
list-style: none;
}
.breadcrumb li:after {/* >を表示*/
content: '>';
padding: 0 0.2em;
color: #555;
}
.breadcrumb li:last-child:after {
content: '';
}
/* 見出し１ */
h1 {
color: #fff;
text-align: center;
font-size: 1.7em;
margin-top: 60px;
margin-bottom: 30px;
padding: 4%;
background: -webkit-radial-gradient(60px 50px, 40px 40px, white, #007b00);
background: radial-gradient(circle 40px at 60px 50px, white, #007b00);
}
h1::after {
content: url(../img/hati_s.png);
}
@media screen and (min-width:599px) {
h1 {
font-size: 2em;
background: -webkit-radial-gradient(100px 50px, 80px 80px, white, #007b00);
background: radial-gradient(circle 100px at 80px 50px, white, #007b00);
}
h1::after {
content: url(../img/hati.png);
}
}footerのデザイン
変更箇所は以下のようになります 。
html
<!-- フッター -->
<footer class="f-container">
<h2>サイトマップ</h2>
<nav class="fnav">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="base.html">基本情報</a></li>
<li><a href="information.html">宿泊の案内</a>
<ul>
<li><a href="information.html#facility">施設について</a></li>
<li><a href="information.html#meal">食事について</a></li>
<li><a href="information.html#reserve">ご予約について</a></li>
</ul>
</li>
</ul>
<ul class="sitemap">
<li><a href="charge.html">宿泊料金プラン</a>
<ul>
<li><a href="charge.html#base">通常料金</a></li>
<li><a href="charge.html#g-plan">グリーンシーズンプラン</a></li>
<li><a href="charge.html#s-plan">スキーシーズンプラン</a></li>
</ul>
</li>
</ul>
<ul class="blog">
<li><a href="taiken.php">体験情報ブログ</a></li>
<li><a href="https://www.kankoukyoukai.net/index.php">観光協会ブログ</a></li>
<li><a href="blog.php">宿情報ブログ</a></li>
</ul>
</nav>
<div class="copyright_etc">
<a href="privacy.html"><p>プライバシーポリシー</p></a>
<small>Copyright (C)2015 by takai All right reserved.</small>
<a href="#site-intro"><span> 上へ</span></a>
</div>
</footer><!-- フッタend -->mystyle.cssへ追記
/* -------------
背景色・背景画像
---------------*/
/* ボックスの背景設定 */
body {
background-color: #cfc
}
.f-container {
background-image: url(../img/bg-.png);
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}mystyle.css
/* -------------
フッターコンテンツ
---------------*/
.f-container {
margin-top: 50px;
}
/* fnav */
.fnav {
margin: 0 auto;
padding-left: 20px;
}
.fnav a:hover {
color: #fff;
}
@media screen and (min-width:599px) {
.fnav {
display: flex;
justify-content: space-around;
text-align: left;
}
}
/* .copyright_etc */
.copyright_etc {
text-align: right;
}
.copyright_etc a {
color: #000;
}
small {
display: block;
font-weight: bold;
}
asideのデザイン
変更箇所は以下のようになります。
html
<!-- サブコンテンツ -->
<aside class="s-container">
<section id="profile">
<h2>プロフィール</h2>
<figure>
<img src="./img/owner-avator.png" alt="オーナーの顔写真">
<figcaption>1993年宿を開業、同時に長野県信濃町で農業を始めました。山歩きや釣りなどアウトドア大好き人間です。</figcaption>
</figure>
</section>
<section>
<h2>フェースブック</h2>
<a href="#">フェースブックタイムライン</a>
</section>
<section>
<h2>ツイッター</h2>
<a href="#">ツイッタータイムライン</a>
</section>
<section>
<h2>snsボタン</h2>
<ul class="snsbtn">
<li><a href="TwitterのプロフィールURL" class="fl_tw2"><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="インスタのプロフィールURL" class=" insta_btn2"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="fl_fb2"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="fl_fd2"><i class="fas fa-rss"></i><span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="fl_pk2"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="fl_hb2"><i class="fas fa-bold">!</i><span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="fl_yu2"><i class="fab fa-youtube"></i><span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/ラインのアカウント" class="fl_li2"><i class="fab fa-line"></i><span>LINE＠</span></a></li>
<li><a href="お問い合わせ先のURL" class="fl_ma2"><i class="far fa-envelope"></i><span>Email</span></a></li>
</ul>
</section>
<section>
<h2>バナー</h2>
<div class="banner">
<a href="#"><img src="banner1.png" alt=""></a>
<a href="#"><img src="banner2.png" alt=""></a>
<a href="#"><img src="banner3.png" alt=""></a>
</div>
</section>
</aside><!-- サブコンテンツend -->mystyle.css
/* -------------
サイドコンテンツ
---------------*/
.s-container {
margin-bottom: 80px;
}
.s-container h2:before {
content: url(../img/icon.png);
}
#profile img {
margin: 0 auto;
width: 50%;
max-width: 200px;
}
/* snsボタン共通 */
.snsbtn li a {
font-family: 'Verdana',sans-serif;
border-radius: 4px;
display: inline-block;
width: 100%;
font-size: 1.2em;
text-align: center;
transition: .4s;
text-decoration: none;
}
.snsbtn li a:hover {
color: #fff;
text-decoration: none;
}
/* Twitter */
.fl_tw2 {
border: solid 1px #55acee;
color: #55acee;
}
/* Twitterマウスホバー時 */
.fl_tw2:hover {
border: solid 1px #55acee;
background: #55acee;
}
/* Instagram */
.insta_btn2 {
border: solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.insta_btn2:hover {
border: solid 1px #c6529a;
background: #c6529a;
}
/* Facebook */
.fl_fb2 {
border: solid 1px #3b5998;
color: #3b5998;
}
/* Facebookマウスホバー時 */
.fl_fb2:hover {
border: solid 1px #3b5998;
background: #3b5998;
}
/* Feedly */
.fl_fd2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.fl_fd2:hover {
border: solid 1px #6cc655;
background: #6cc655;
}
/* Pocket */
.fl_pk2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.fl_pk2:hover {
border: solid 1px #ef3f56;
background: #ef3f56;
}
/* はてブ */
.fl_hb2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.fl_hb2:hover {
border: solid 1px #1ba5dc;
background: #1ba5dc;
}
/* YouTube */
.fl_yu2 {
border: solid 1px #fc0d1c;
color: #fc0d1c;
}
/* YouTubeマウスホバー時 */
.fl_yu2:hover {
border: solid 1px #fc0d1c;
background: #fc0d1c;
}
/* LINE */
.fl_li2 {
border: solid 1px #00c300;
color: #00c300;
}
/* LINEマウスホバー時 */
.fl_li2:hover {
border: solid 1px #00c300;
background: #00c300;
}
/* メールアイコン */
.fl_ma2 {
border: solid 1px #f3981d;
color: #f3981d;
}
/* メールアイコンマウスホバー時 */
.fl_ma2:hover {
border: solid 1px #f3981d;
background: #f3981d;
}
mainのデザイン
変更箇所は以下のようになります。
html
<!-- メインコンテンツ -->
<div class="m-container">
<main role="main">
<section>
<h2>大自然の中で暮らしたい。</h2>
<article class="arti">
<h3 class="balloon2">地球に優しく生きたい</h3>
<p class="img-wide"><img src="./img/_091010inekari.jpg" alt="ロッジ外患"></p>
<p class="text">「地球に優しく生きる」というコンセプトを基に始めた宿です。<br>建物は山麓の木々に同化するがごとく、こじんまりとした山小屋になっております。<br>妙高山に抱かれた自然環境の中、宿周辺は春夏秋冬それぞれ異なった表情をみせます。<br>
宿はその中腹標高９００メートルの所に建っております。
</p>
</article>
<article class="arti">
<h3 class="balloon2">妙高杉ノ原スキー場ゲレンデの中の宿です</h3>
<p class="img-wide"><img src="./img/_100330yado.jpg" alt="ロッジゲレンデ風景">
</p>
<p class="text">一年の半分近くは雪に閉ざされ、この時期は宿の周りはスキーゲレンデ（妙高杉ノ原スキー場）に様変わりします。<br>人間社会の喧噪から解き放されたモノトーンの世界が広がります。<br>
スキー場の二つのコースに挟まれたゲレンデサイドにあるため板やボードを担ぐことなく真っ先にゲレンデにでる事ができます。道がない為宿へはスキー板またはスノーモービルが交通の足になります。<br>
尚、お得な<a href="winter_pln.html">宿泊とリフト券セットの各種プラン</a>あり。
冬は、レストランとしても営業しております。
</p>
</article>
<article class="arti">
<h3 class="balloon2">農業をやっています。</h3>
<p class="img-wide">
<img src="./img/_05.5.26ta.jpg" alt="長野県信濃町たんぼ">
</p>
<p class="text">
長野県信濃町（隣町）で無農薬有機栽培で農業をやっています。<br>米もそばも野菜もほとんど自給しております。<br>最近は農業体験などもぼちぼちとやっております。<br>山々に囲まれた豊かな自然環境の中での農業はすがすがしい気持ちになれますが、同時に自然環境の厳しさを感じる今日この頃です。
宿に宿泊しながら、<a href="taiken.html">農業体験</a>もやっております。
</p>
</article>
<article class="arti">
<h3 class="balloon2">自然食です。</h3>
<p class="img-wide">
<img src="./img/_2004.9.24dinner.jpg" alt="夕食で出されているメニュー">
</p>
<p class="text">自給用食材、地の魚介類を使った完全地消地産食事を提供しております。<br>冬はお代わり自由カレー（700円）、ぜんざい（100円）、夏は手打ち蕎麦、天然酵母パン、玄米自然食がおすすめです。<br>安心安全な食材をつかっているのでアレルギー対応もできます。<br>
詳細は<a href="meal.html">宿の食事について</a>をご覧下さい。
</p>
</article>
</section>
<section>
<h2>お財布に優しい料金</h2>
<h3>一泊3000円（素泊まり）から宿泊できます。</h3>
<p>グリーンシーズンは日本百名山である妙高山・火打山登山口にちかく、<a href="charge.html#base">リーズナブルな宿泊料金</a>で登山基地として使えます。</p>
<h3>宿泊料金が基本料金から割り引かれます。</h3>
<ul>
<li><a href="charge.html#kodomo-otoku">子供料金が半額になります。</a></li>
<li><a href="plan.html">スキー場セットプラン・森林セラピープランなどセット割引があります。</a></li>
</ul>
</section>
</main>
</div><!-- メインコンテンツ end -->mystyle.css
/* -------------
メインコンテンツ
---------------*/
.m-container h2 {
margin-bottom: 30px;
}
.m-container h2:before {
content: url(../img/icon.png);
}
/* article */
.arti {
margin: 30px 0;
}
.arti h3 {
margin-left: 2%;
}
.img-wide {
width: 80%;
height: auto;
margin: 0 auto;
}
.arti .text {
margin: 1% 3%;
}
/* balloon */
.balloon2 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #FFF;
border: solid 3px #555;
box-sizing: border-box;
border-radius: 10px;
}
.balloon2:before {
content: "";
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #FFF;
z-index: 2;
}
.balloon2:after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #555;
z-index: 1;
}
.balloon2 p {
margin: 0;
padding: 0;
}
ページを仕上げる。
htmlページとして仕上げるには、ページの表示部分とhtml・css文の記述内容について考える必要があります。
適切にバランスよく表示されているか。
一つのページをいろいろなデバイスで表示することになるので、そのデバイスの表示サイズに合わせて、確認する必要があります。メジャーなブラウザにはレスポンシブデザインモードがあるので、それらを利用できます。
ResetCssの項目で示されているように、ブラウザの違いを吸収したページ作成を進めてきましたが、実は、html5を取り入れていない、古いバージョンのブラウザに関しては考慮していません。htmlのタグは解釈されなければ、無視されるという考え方から、テキストの箇所が解釈できれば、考慮する必要がないと割り切ってしまうということでもいいと思います。或いは、古いバージョン使用を考慮して記述をするようなこともあります。 このことをどのようにとらえるのか、作成者の考え方によるものと思われます 。
適切なhtml文・css文になっているか。
html文・css文の誤りはチェックツールにより確認することが出来ます。
正しい記述がされていれば、どんなに煩雑なソースコードでもきちんと表示されます。但し、きちんとインデントされたもの、連想しやすいクラス・id名、ファイル名はその後の修正作業のしやすさに係わる点であります。wordpressやgoogleなどのコーディングスタンダードを参考に統一された書き方があるのもそういうことだとおもいます。このことは、検索ロボットがページを解釈するなどのseo対策や、アクセスビリティにも関係することなので考慮すべきことと思われます。
＜参考＞
さらに手を入れる内容について
今回はトップページを想定して製作を進めてきました。一般的には、下層ページはトップページのサイドとフッターの部分はそのままで、ヘッダーもトップページのものに即して使われることが多いです。製作者は、下層ページを作る場合、ページ内容ごとにメインコンテンツに製作を傾けることになります。
SEOとは Search Engine Optimization の略語で直訳すると「検索エンジンの最適化」ということになります。メジャーな検索エンジンといえばグーグルですが、このエンジンに作成したページを適切に解釈してもらい、検索結果の上位に掲載されることにより、サイト運営者は多くのインターネット利用者に見てもらうことを目的としています。この適切に解釈してもらうページ作成作業がseo対策ということになります。
webページは、単にhtml文をサーバが送り出すだけの処理によるものだけではありません。サーバでユーザからのアクションを受け、処理をし、html文として組み立てたり、クライアントにおいてhtml文タグの階層構造（DOM）を操作することにより、インタラクティブな表示をしたりする処理をほどこしたページも広くみうけられます。ページのcms化、問い合わせフォーム送信処理、DOMを操作することによるユーザインターフェース強化はこれらの技術を利用したものです。
最近は、javascriptの外部ライブラリーやwebサービスを利用して、web製作につかわれてきています。地図の表示やwebフォントの利用、DOM操作はこういったものを利用して実現させております。
ウェブにおけるアクセスビリティとは「ページにアクセスして、ストレス無く閲覧できること。」と考えます。狭義には「障害者や高齢者など、心身の機能に制約のある人でもウェブで提供されている 情報に問題なくアクセスし利用できること」独立行政法人 情報通信研究機構 とされており、上記の事と少しニアンスが異なっております。「ページの多言語化」は狭義の解釈ではなく、「世界中の人に見てもらえるページにする」ということからすると、広いほうの解釈に入ります。アクセスビリティ向上のための技術的なものもありますが、いずれにしろ、html5に準拠して適切にコーディング製作することがアクセスビリティ向上につながっていくことになることとおもいます。
近年、スマートフォンの普及、snsの利用が進んできております。行政のit化もさけばれております。ますますweb製作の社会生活におけるウエイトが増してきているようです。それに伴い、web製作にかかわるツールも多く出回るようになり、htmlの細かい知識を知らずしてページが出来てしまうようになってきています。むしろ、そのツールを使いこなすことに労力をそそぐという製作のやり方も一般的なこととして認知されているようです。但し、基本は、htmlそのものとそれに係わる、web技術であります。それらの習得の前提の上で制作活動につなげていけば、より良いコンテンツとして、認知されることと考えます。
web製作と呼称していますが、ホームページ製作はweb製作の中に含まれるものです。web技術の世界は日々進化してきています。こういう風に作るべきであるとかの概念はないようです。製作者はこのような進化の流れに遅れないように、最新の情報を吸収していく努力をおしまず、日々、まい進していかなければいけないとおもいます。
完成コードは「 github 」から参照できます。
記事へのコメント “ホームページ作成プランニング(前半)”