カテゴリー: ＨＰの作成

開いているタブを閉じるときに以下の様なメッセージが表示される

　　（１）状況説明
　　　　・MicrosoftEdgeで発生する
　　　　　　GoogleChromeでは発生しない、

　　　　・JavaScriptのwindows.close命令で発生する
　　　　　　サイトを閉じるボタンを用意し、ボタン押下で発生する

　　（２）原因
　　　　セキュリティポリシーで禁止されている
　　　　　　自分でopenしたタブでなければ、closeｓしてはいけない
　　　　　　　　※「閉じる」と表示されてないボタンを押下して、閉じさせることができるから？

　　（３）必要性
　　　　・通常（ブラウザーの閉じるマーク（✖）を押す）の場合
　　　　　　連続して同じウィンドウに連続で重ねて表示させた場合、最初から全部閉じられてしまう

　　　　　　現在見ている画面だけを閉じたい場合に必要

　　　　・後処理が必要な場合
　　　　　　最終処理の確認を取る場合、初期化や書き戻しが必要な場合にクリックしてもらう
　　　　　　　　※押下しなかった場合への対応が必要となる

　　（４）対応策
　　　　　　close命令を　onclick=”window.open(‘about:blank’,’_self’).close()”　とする

　　認証の入力ダイアログを表示させずにサイトにアクセスする方法

　　ＢＡＳＩＣ認証が必要となるＷｅｂサイトにアクセスする場合
　　　　（１）ＵＲＬにＩＤとパスワードを埋め込んでアクセスする

　　 　　　http://user:password@192.168.0.1/
　　　　　　　　ユーザーＩＤ　＋　コロン　＋　パスワード

　　　　（２）ＰＨＰからアクセスする場合
　　　　　　【file_get_contents】にユーザーＩＤ　＋　コロン　＋　パスワードを指定する

　　　　　　$html = file_get_contents(“http://ユーザーＩＤ:パスワード@192.168.0.1”);
　　　　　　　　求められたhtmlを出力する（もしくは解析する）ことができる

　　　　（３）外部ＵＲＬを開けるようにする
　　　　　　【php.ini】が【allow_url_fopen = on】でないと外部ＵＲＬは開けない
　　　　　　　　通常はoff、他人のサイトはアクセスできないと考える
　

データベース移設（引越し）についての注意事項
　　ＷＰの移設には起きなかったエラーが発生する
　　　　入力チエックが貧弱なので、エラーデータが紛れ込んでいる

　　（１）和暦の年月日で２月２９日が存在するケース
　　　　１２７８－０２－２９　　　 弘安元年と改元
　　　　１５０１－０２－２９　　　 文亀元年と改元
　　　　１５０４－０２－３０　　　 永正元年と改元
　　　　　　※ＤＢ登録時には入力エラーとならない、移行時にエラーとなる

　　（２）小文字の【,】や【’】が紛れ込むケース
　　　　英文をコピーした場合
　　　　　　小文字のカンマはＣＳＶにとっては命取り、フォーマット相違（カラムずれ）エラーとなる
　　　　　　ＣＳＶファイルを表示した際に見苦しいので【”】で囲むことはしない
　　　　数字の位取りに使用した場合
　　　　　　全角での入力を心がけていはいるが、紛れ込むケースがある

サーバー移設（引越し）の「ＤＮＳ設定」について
　　「独自ドメインンの設定」が終了していること

　　（１）コントロールパネルに入る
　　　　「ドメイン操作」の「取得済みドメイン一覧」をクリックする

　　（２）変更できるドメインを選択する
　　　　取得済みドメイン一覧が表示されているので
　　　　　　設定変更するドメイン名の横の「緑色のＤＮＳ」をクリックする
　　　　　　　　ボタンの意味は「ＤＮＳレコードの変更/ＵＲＬ転送の変更」と示されている

　　（３）独自ドメインとサーバーを関連付けます
　　　　　　※これ以降、旧サーバーではなく新サーバーが本物になります
　　　　ここまで手順通りに進んでくると、設定値が既に表示されている
　　　　　　自動設定の文言の下に「サーバー名」を入力する
　　　　　　　　業者と契約した際に割り振られた「アカウント＠サーバー名」のサーバー名のこと
　　　　　　「保存する」をクリックする

　　（４）サーバー移設の完了
　　　　以上で全て完了です
　

サーバー移設（引越し）の「独自ドメインの設定」について
　　「ネームサーバーの変更」が終了していること

　　（１）コントロールパネルの左側メニューを見る
　　　　「ドメインの利用」の「ドメインウェブの設定」をクリックする

　　（２）独自ドメインの設定を行う
　　　　・Main欄にドメインを入力すると、public_htmlとドメインが同等になる
　　　　　　root直下がドメインの入り口になる
　　　　・Sub欄にドメインを入力すると、public_html内にドメインと同じフォルダが作成される
　　　　　　root直下にフォルダーが出来て、ここが入り口になる

　　　　・NoDirにはチェックを入れない

　　　　「ドメイン設定をする」をクリックする

　　（３）テストを続ける
　　　　サブドメインのテストなどが出来るようになる
　　　　　　※ここまでは新サーバーはテスト環境の様なもの
　　　　　　※但し、並行運用となるので旧サーバーの更新は必ず新サーバーに反映させること

　　（４）ＤＮＳ設定を行う
　　　　テストが完了すると
　　　　　　次に「サーバー移設（３）」に進む

サーバー移設（引越し）の「ネームサーバーの変更」について
　　取得した独自ドメインを活かして、別の業者のサーバーに移設する
　　　　移設作業は短時間で終了するが一度きりなので慎重に準備すること
　　　　　　※業者固有の手続きの部分もあるので一般的な移設手順ではない

　　（１）準備作業
　　　　新たに業者とサーバーのレンタル契約を結ぶ
　　　　　　新たに利用可能な「サブドメイン（ＵＲＬ）」が割り当てられる
　　　　　　ＩＰアドレスも割り振られ、自由に外部からアクセスできる状態になる

　　　　割り当てられたＵＲＬを使って、データ移行を行う
　　　　　　旧サーバーから新サーバーに順次プログラムやデータを移行する
　　　　　　事前テストも十分に行ってから、サーバー移設に取り掛かること
　　　　　　　　※「サーバー移設（３）」までは旧サーバーが本物、十分テストを繰り返すこと

　　（２）コントロールパネルの「ドメイン操作」に入る
　　　　「ネームサーバーの変更」をクリックする

　　（３）変更するドメインを指定する
　　　　「ネームサーバー変更」画面に所有するドメイン名が表示されている
　　　　　　該当する名前を選んで、「変更」をクリックする

　　（４）業者が用意したネームサーバーを設定する
　　　　汎用JPドメインの場合には、既に規定のネームサーバーが表示されている
　　　　確認したら「保存」をクリックして、作業は終了です

　　（５）独自ドメイン設定を行う
　　　　次に「サーバー移設（２）」に進む

ＣＭＳの選択基準を記述する
　　（１）代表的なＣＭＳ

　　（２）ＣＭＳを有効活用するには
　　　　・ＨＰを構築する際にＣＭＳを活用する
　　　　　　※どういったＣＭＳを使うかは、さほど重要ではない、

　　　　・他のサイトとの連携を上手に取ることが重要
　　　　　　自分自身のＨＰを活性化させ
　　　　　　　　外部のブログやＨＰと相互に連携させる
　　　　　　　　ＳＮＳを活用し、最新情報を手早く自分のＨＰに取込む
　　　　　　　　ＲＳＳを利用し、最新情報を手早く自分のＨＰに取込む

　　　　ＣＭＳを使って構築したＨＰによって
　　　　　　有効なコミュニケーションを図ることがＣＭＳの有効活用に繋がる
　

画像やリンクなどをクリックして、ウィンドウ内で画像を拡大表示する
　　画面が遷移せず、同一ウィンドウ内に表示されるのが特徴
　　　　無駄なクリック作業が無くなる

　　（１）【Lightbox2】のダウンロード
　　　　このサイトからダウンロードする　http://lokeshdhakar.com/projects/lightbox2/
　　　　　　ダウンロード完了後に解凍する

　　（２）Ｊａｖａスクリプトを設定する
　　　　スクリプトファイルをＨＴＭＬに施す
　　　　(例題）ダウンロードした中から探し出す
　　　　＜script src=”../js/jquery-1.11.0.min.js” type=”text/javascript”＞＜/script＞
　　　　＜script src=”../js/lightbox.js” type=”text/javascript”＞＜/script＞

　　　　必要な場所に設置し、ＨＴＭＬで定義する
　　　　　　指定する順序はこのまま

　　（３）ＣＳＳファイルを設定する
　　　　(例題）ダウンロードした中から探し出す
　　　　ＣＳＳファイルに定義を追加する　【@import url(‘lightbox.css’);】

　　（３）表示したい画像の定義
　　　　(例題）
　　　　＜a href=”img/image-1.jpg” data-lightbox=”group” data-title=”１枚目”＞写真１＜/a＞
　　　　＜a href=”img/image-2.jpg” data-lightbox=”group” data-title=”２枚目”＞写真２＜/a＞

　　　　【data-lightbox】を使ってグループ定義を施す
　　　　　　各々異なるモノを設定すると・・・・・・１個、１個個別に拡大表示される
　　　　　　　　※今回は統一した（１個なら個別表示、複数個なら連続表示となる）
　　　　　　同じモノを設定すると同一グループと見なされて、クリックすると次々と画像が表示される

　　　　通常は小さな画像を先に表示し、クリックして拡大表示する
　　　　　　※今回は小さな画像を作成する手間を省き、文字をクリックさせて画像を表示させる
　　　　　　必要なら＜img src=”../img/thumb-image-1.jpg”＞を「写真１」の所に入れる

パラメータ渡しの方法として【Ｇｅｔ】と【Ｐｏｓｔ】がある
　　【Ｇｅｔ】はＵＲＬに直接パラメータを記述して渡す方法
　　　　外部にパラメータの内容が見られてしまう
　　　　書き換えられると予期せぬ動きになる（入力チエックで防止する）
　　【Ｐｏｓｔ】はデータ部に格納してＵＲＬに渡す方法
　　　　外部にはパラメータの内容が見えない

　　今回のＤＢ移設に伴って【Ｇｅｔ】から【Ｐｏｓｔ】に切り替える
　　(例題）
　　　　＜a href=”#” onclick=”document.form11.submit();” target=”_self”＞アンカー用テキスト＜/a＞
　　　　＜form action=”index.htm” method=”post” name=”form11″＞
　　　　＜input type=”hidden” name=”パラメータＩＤ” value=”パラメータ内容”＞＜/form＞

　　　　アンカー部分をクリックするとｐｏｓｔでパラメータが渡される
　　　　複数個指定する場合にはペアを崩さずに数を増やせばよい

ＨＰで使用しているカラー見本を掲載する
　　時々、カラーコードを忘れてしまうので、備忘録として残す

通常、ＨＰのコンテンツは【DocumentRoot】配下のディレクトリに設置する必要がある
　　テスト環境等において、コンテンツの数が多くなるとホルダーの管理が煩わしくなる
　　【alias】機能を使って【DocumentRoot】の配下に配置されているかのように見せかける
　　　　※テスト環境の前提として【XAMPP】を使っていることにする
　　　　※本番環境にも使用できるが、却って覚えておくことが面倒なので本番環境には適用しない

　　（１）【httpd.conf】を探し出す
　　　　【XAMPP】配下の　apache　→　conf　配下の【httpd.conf】を探し出す

　　（２）【httpd.conf】を修正する
　　　　【】を探し出し【alias】を指定する
　　　　　　例として、【 include “F:/httpd-alias.ini”】の行を追加する
　　　　　　【alias】指定が多数なので別ファイルにしてまとめて読み込ませた
　　　　　　　　※直接に下記の様な【alias】指定を行うのもＯＫ

　　（３）【akias】指定ファイルを作成する
　　　　【Alias /元のフォルダー “F:/先のホルダー”】を複数記述する
　　　　　　※本来はこの形式で【httpd.conf】内に指定する

パスワードを暗号化する
　　ＩＤと（入力）パスワードを指定して、（設定）パスワードを作成する
　　通常のApache配下の場合とXAMPP配下の場合と作成方法が違うので注意すること
　　　　※XAMPPはローカル環境で個別テスト用に使われることが多い
　　　　　　ローカル環境下で基本認証が必要だとは思わないのだが念のために

先ずＡｐａｃｈｅ配下の場合
　　（１）パスワード作成サイトにアクセスする
　　　　・以下のサイトにアクセスする
　　　　　　htaccess による認証用　パスワード暗号化ツール
　　　　　　暗号化サービス
　　　　　　他　　にもあるので適当なサイトを探す

　　（２）設定するパスワードを求める
　　　　・ＩＤと（入力）パスワードを指定して、（設定）パスワードを求める
　　　　　　（入力）パスワードと（設定）パスワードを使い分けること
　　　　・ＩＤと（設定）パスワードの組み合わせを【.htpasswd】に記述する

　　注意点（１）
　　　　ＩＤと（入力）パスワードはBasic認証画面で手入力する値
　　　　ＩＤと（設定）パスワードは【.htpasswd】に設定する値

　　注意点（２）
　　　　パスワードの入力がどうやってもエラーになる場合
　　　　　　試しに下記のhtpasswd.exeを使って【.htpasswd】ファイルを作成してみるとよい
　　　　　　結果的に上手くいった

次にＸＡＭＰＰ配下の場合（作成方法が違うので注意すること）
　　（１）Apache付属のhtpasswd.exeを使ってパスワードファイルを作成する
　　　　cd F:\xampp\apache\bin
　　　　htpasswd.exe -bc {パスワード生成先のパス} {ID} {パスワード}
　　　　　　(例）cdコマンドでhtpasswd.exeが在る場所を特定する
　　　　　　　　F:/xampp/apache/bin>htpasswd.exe -bc .htpasswd UUUUUUUU PPPPPPP
　　　　　　　　　　特にパスを指定しなければ
　　　　　　　　　　F:\xampp\apache\binの中に【.htpasswd】ファイルが作成される

【.htpasswd】が存在する場所（絶対パス）を求める
　　【.htaccess】に【.htpasswd】ファイルの位置を記述する際に必要となる

（１）ＰＨＰプログラムを作成する
　　・以下のような内容で用意する
　　　　<?php
　　　　$cwd = getcwd();
　　　　$reqfile = strrchr($_SERVER[“REQUEST_URI”], “/”);
　　　　$urilen = strlen($_SERVER[“REQUEST_URI”]);
　　　　$reqfilelen = strlen($reqfile);
　　　　$reqdir = substr( $_SERVER[“REQUEST_URI”], 0, $urilen – $reqfilelen );
　　　　$current = $_SERVER[“HTTP_HOST”] . $reqdir;
　　　　echo “<p?>カレントディレクトリの絶対パス：$cwd</p?>”;
　　　　echo “<p?>カレントURL： http://$current/</p?>”;
　　　　?>

（２）絶対パスを表示させる
　　・ファイル名を【xxxxxxxx.php】として保存する
　　・調べたいサーバーのフォルダ配下にアップロードして設置する
　　・手動で当該プログラムを起動する

【.htaccess】を使用してパスワードによるアクセス制限が可能になる
　　設置したディレクトリ以下の全てのファイルにパスワード保護が適用される
　　クライアント側でブラウザを閉じるなどの操作が行われない限り
　　　　一度認証に成功したパスワードをブラウザで保持し
　　　　アクセスの度にユーザーがいちいち入力する手間を省く

（１）保護したいディレクトリの確認
　　必ず、パスワードで保護したいディレクトリを決めておく
　　　　各ディレクトリ単位で保護することもできるが、パスワード入力が煩わしくなるので
　　　　一般的にはサイト単位で設置する

（２）【htaccess.txt】の設定と作成
　　　　便宜的に拡張子を【.txt】として作成してから、作業完了後に【.txt】を削除する
　　・メモ帳またはエディタで作成する
　　・以下のようなアクセス制限を記入する（例）
　　　　AuthType Basic
　　　　AuthName “Input your ID and Password”
　　　　AuthUserFile /絶対アドレスを指定する/.htpasswd
　　　　　　※絶対アドレスの求め方は「Basic認証（.htpasswdの場所）」を参照
　　　　require valid-user
　　・【htaccess.txt】の名前でファイルを保存する

（３）【htpasswd.txt】の設定と作成
　　・ログイン用のユーザー名とパスワードを決める
　　　　※パスワードの決め方は「Basic認証（パスワードの暗号化）」を参照
　　・メモ帳またはエディタで作成する
　　・以下のようなユーザー名とパスワードを記入する
　　　　ユーザ名１:パスワード
　　　　ユーザ名２:パスワード
　　　　ユーザ名３:パスワード
　　・【htpasswd.txt】の名前でファイルを保存する

（４）【htaccess.txt】と【htpasswd.txt】をアップロードする
　　転送先のディレクトリは
　　　　サイト全体を保護する場合はindex.htmlと同じディレクトリにアップロードする

（５）ファイル名の変更
　　アップロードした【htaccess.txt】と【htpasswd.txt】のファイル名を変更する
　　　　【.htaccess】と【.htpasswd】に変更する

画像から文字を抜き出す（ＯＣＲ処理）ことが目的だが
　　さらに縦書き日本語を横書き日本語への変換を同時に行って欲しい
　　無論、有料のソフトでなく無料で変換できることが条件で探してみた

Googleドライブのドキュメント部分にＯＣＲ機能が有ることが分かった
　　通常はＷＯＲＤ文書の保存、編集などにGoogleドキュメントを使うことが多い
　　この中に、文書ファイルの代わりに画像ファイルをアップロードすると
　　　　完全に自動で画像の中の文字をテキスト文書として抜き出してくれる

　　（１）まず画像をＧｏｏｇｌｅドキュメントにアップロードする
　　　　・アップロード設定を忘れずに行うこと
　　　　　　アップロードの際に以下のような確認メッセージが表示されるので必ずチエックを入れる
　　　　　　「ＰＤＦや画像ファイルからテキストをＧｏｏｇｌｅドキュメントのドキュメントに変換する」

　　　　・画像ファイルの大きさは２Ｍ（メガ）を超えないこと
　　　　　　超えるとエラーになってアップロードできない
　　　　　　ＰＤＦファイルが２Ｍを超えている場合には下記の様なサービスを使ってファイルを分割する
　　　　　　　　http://foxyutils.com/blog/archive/

　　（２）Ｇｏｏｇｌｅドキュメント内で画像ファイルを開く
　　　　・ＰＤＦの場合だと、元のＰＤＦページの次に変換後の文字テキストページが表示される
　　　　　　変換結果を比較検証しやすいようになっているのが特徴である
　　　　　　コピーや貼り付けの作業が不要なのも特徴である

ＣＳＳ定義におけるプロパティーの並びをどうするかを決めておきます
　　個人的な好みによる並び順に関するメモです、標準化等の提案をするものではありません

　　　　position : relative ;
　　　　display : block ;
　　　　width : 50% ;
　　　　height : 100px ;
　　　　margin : 10px ;
　　　　border : 0 ;
　　　　padding : 10px ;
　　　　color : #ffffff ;
　　　　background : #000 ;

　　marginとpaddingは省略せず、上・右・下・左と記述する

CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
　　（１）border
　　　　・border-width　…　線の太さ
　　　　・border-style　…　線の種類
　　　　・border-color　…　線の色
　　　　　　組み合わせて使います
　　　　・border-top　…　上のボーダー
　　　　・border-right　…　右のボーダー
　　　　・border-bottom　…　下のボーダー
　　　　・border-left　…　左のボーダー

　　（２）background
　　　　・background-color　…　背景色
　　　　・background-image　…　背景画像
　　　　・background-repeat　…　背景画像の並べ方
　　　　　　repeatで繰り返し、no-repeatで繰り返しなし、repeat-xで横方向、repeat-yで縦方向
　　　　・background-position　…　背景画像の表示位置（水平方向、垂直方向の順で指定する）
　　　　・background-attachment　…　背景画像のスクロール

　　（３）font
　　　　・font-style　…　イタリック体と斜体の指定（初期値は標準）
　　　　・font-variant　…　スモールキャピタルを指定
　　　　・font-weight　…　フォントの太さ
　　　　・font-size　…　フォントサイズ
　　　　・line-height　…　行の高さ
　　　　・font-family　…　フォントの種類

　　（４）padding（CSSでのレイアウト作成を参照）
　　　　・padding-top　…　上の内側の余白
　　　　・padding-right　…　右の内側の余白
　　　　・padding-bottom　…　下の内側の余白
　　　　・padding-left　…　左の内側の余白

　　（５）margin（CSSでのレイアウト作成を参照）
　　　　・margin-top　…　上の外側の余白
　　　　・margin-right　…　右の外側の余白
　　　　・margin-bottom　…　下の外側の余白
　　　　・margin-left　…　左の外側の余白

　　（６）list-style
　　　　・list-style-type　…　マーカーの種類
　　　　・list-style-position　…　マーカーの表示位置
　　　　・list-style-image　…　マーカーを画像で表示

CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
　　（１）　*（アスタリスク）
　　　　 全ての要素にスタイルを適用する
　　　　　　* {color:red;}
　　　　　　　　全ての要素の色に赤色を適用する
　　　　　　p * {color:red;}
　　　　　　　　p（段落）として指定した要素全てに赤色を適用する

　　（２）　. （ピリオド）
　　　　指定したクラス名の要素にスタイルを適用する
　　　　　　.sample {font-size:18px; color:red;}
　　　　　　　　class=”sample”で指定した要素にサイズと色を適用する
　　　　　　p.sample {font-size:18px; color:red;}
　　　　　　　　<p class="sample"> にサイズと色を適用するが<div class="sample">には適用されない

　　（３）　# （シャープ）
　　　　指定したid名の要素にスタイルを適用する
　　　　　　　　idの場合は1つの要素にしか適用されない
　　　　　　　　idの場合はjavascriptやページ間の移動の際によく使われる
　　　　　　#sample {font-size:16px;}
　　　　　　　　id=”sample”で指定した要素にサイズを適用する

　　（４）   （スペース）
　　　　子や孫の要素にスタイルを適用する
　　　　　　　　セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用する
　　　　　　p strong {font-size:16px;}
　　　　　　　　pタグの中にあるstrong要素にサイズを適用する
　　　　　　.mago strong {font-size:16px;}
　　　　　　　　クラス名magoの中にあるstrong要素にサイズを適用する
　　　　　　p.mago strong
　　　　　　　　クラス名magoのp要素のなかにあるstrong要素にサイズを適用する

　　（５） > （不等号）
　　　　ある要素の直下の階層にある要素にスタイルを適用する
　　　　　　div.sample > a {font-size:18px;}
　　　　　　　　クラス名sampleの直下にあるa要素（リンク１）にのみサイズを適用する
　　　　　　　　　　<div class="sample">
                        <a href="#">リンク１<a/>
　　　　　　　　　　　 　<ul>
　　　　　　　　　　 　　　　<li><a href="#">リンク２<a/></li>
                           </ul>
　　　　　　　　　　<div>

　　（６） + （プラス）
　　　　隣接している要素にスタイルを適用する
　　　　　　h4 + p {color:red; font-weight:bold;}
　　　　　　　　h4の要素の隣にあるp（段落）のみに適用される
　　　　　　　　　　<h4>H4要素</h4>
　　　　　　　　　　<p>h4要素の隣です</p>　・・・・・　この要素にだけ赤色と太字を適用する
　　　　　　　　　　<p>h4要素の隣の隣です</p>

　　（７） ~　（～記号）
　　　　後ろにある要素にスタイルを適用する
　　　　　　h4 ~ p {color:red; font-weight:bold;}
　　　　　　<p>h4要素の前</p>　　　・・・・・　この要素には適用されない
　　　　　　　　<h4>H4要素</h4>
　　　　　　<p>h4要素の後</p>　　　・・・・・　この要素に赤色と太字を適用する
　　　　　　<p>h4要素の後</p>　　　・・・・・　この要素に赤色と太字を適用する

class属性とid属性を使い分けて要素を修飾します
　　・classの使い方
　　　　ｈｔｍｌには　<p class=“danraku“>見本</p>　と記述する
　　　　ｃｓｓには　.danraku { color: red; }　と記述する

　　・idの使い方
　　　　ｈｔｍｌには　<p id=”danraku”>見本</p>　と記述する
　　　　ｃｓｓには　#danraku { color: red; }　と記述する

　　上記の例では、単にピリオド記号とシャープ記号を使い分けているだけに見える
　　　　そして使用結果も同じ内容でなんら違いが現れてこない

classとidの違いは各々が果たす役割の違いになって現れてくる
　　・class
　　　　同じclass名を、１ページ中に何度でも使える
　　　　　　例えば段落（p）や文字種類(h1、h2）に使用する、何度でもページ中に現れてくる
　　　　　　何度でも現れるということは、サイト全体で文字の大きさなどが統一されることになる

　　・id
　　　　同じid名は、１ページ中に1度しか使えない
　　　　　　例えばheaderやsidebarやfooter等、ブックマーク（page-top）等、ページ中に１度しか現れない
　　　　　　一度しか現れないということは、修正箇所を素早く見つけられることになる

ＨＰの作成時におけるＰＦ１２の便利な使い方について
　　ブラウザーがＩＥの場合は、「Ｆ１２ 開発者ツール」といったキーワードで検索すればよい
　　　　ＩＥ１１になって「根本的に再設計され強化された開発者ツール」になったと述べられています
　　　　数ある機能の中で「ＤＯＭ　Explorer を使って要素を検査し、レイアウトとスタイルを変更する」部分に着目する
　　　　任意のページでＰＦ１２のキーを押下する、直ぐに開発用画面に切り替わります

　　ブラウザーがGoogle Chromeの場合は、「デベロッパーツール」といったキーワードで検索すればよい
　　　　任意のページでＰＦ１２のキーを押下する、直ぐに開発用画面に切り替わります
　　　　もしくは、任意のページで「ctlr + Shift + I」を押下する、直ぐに開発用画面に切り替わります

　　元のページの上に重なって上記のような開発画面が出ればＯＫです
　　　　HTML文書を修正しても、CSS文書を修正しても直ぐに元のページに反映されます
　　　　こうやって目で即座に確認しながらＨＰ作成に専念できます

ＣＳＳセレクタの種類に依って優先順位が付けられる
　　詳細度の高いセレクタが優先される
　　　　・ＩＤセレクタ（＃）
　　　　　　ＩＤ（1つの要素）にスタイルを適用させる指定
　　　　・クラスセレクタ（．）
　　　　　　クラス（分類）に対してスタイルを適用させる指定
　　　　・タイプセレクタ（要素型セレクタ）
　　　　　　特定の要素にスタイルを適用させる指定
　　　　・全称セレクタ（ユニバーサルセレクタ）
　　　　　　全ての要素にスタイルを適用させる指定

　　セレクタの優先度が同じ場合
　　　　より後の方に記述されたスタイルの指定が優先される

　　優先順位をＴＯＰにすることができる
　　　　【!important】を指定する
　　　　(例）p { color: green !important; }

スタイルシートが反映される優先順位に付いて
　　・固定スタイルシート
　　　　 <link href=”base.css” rel=”stylesheet” type=”text/css” />>
　　　　　　rel属性の値を「stylesheet」にし、かつtitle属性を指定しない（通常の指定方法）
　　　　　　スタイルシートは、常に適用される

　　・優先スタイルシート
　　　　<link title=”優先スタイル” href=”basic.css” rel=”stylesheet” type=”text/css” />
　　　　　　rel属性の値を「stylesheet」にし、かつtitle属性でスタイル名を指定する
　　　　　　スタイルシートは、「固定スタイルシート」と共に優先的に適用される

　　・代替スタイルシート
　　　　<link title=”代替スタイル” href=”alt.css” rel=”alternate stylesheet” type=”text/css” />
　　　　　　rel属性の値を「alternate stylesheet」にし、かつtitle属性でスタイル名を指定する
　　　　　　通常は適用されない、ブラウザで切替えた際に、「優先スタイルシート」の代わりとして適用される

以下のいずれかの組み合わせで使われる
　　固定スタイルシート　＋　優先スタイルシート　　　title指定が無い場合
　　固定スタイルシート　＋　代替スタイルシート　　　title指定との組み合わせの場合

複数のＣＳＳファイルを用意して、好みのスタイルシートに切り替える
　　HTMLのheader部で使用するＣＳＳファイルを指定する
　　　　<link rel=”stylesheet” type=”text/css” href=”basic.css” title=”標準”>
　　　　<link rel=”alternate stylesheet” type=”text/css” href=”alt1.css” title=”代替1″>
　　　　<link rel=”alternate stylesheet” type=”text/css” href=”alt2.css” title=”代替2″>
　　　　　　　　【alternate】を記述することで外部からＣＳＳファイルを切り替えることが出来る
　　　　　　　　【title】で名前を記述することで、名前を使って切り替えるＣＳＳファイルを指定できる

ブラウザでの切替方法
　　ブラウザーの　表示　→　スタイル　と進み、表示されたtitle名を選択する

スタイルシートを切替える機能が使えるブラウザー
　　Internet Explorer８以降、Firefox、Operaなどのブラウザのみ
　　Google Chrome、Safariなどのブラウザには機能が見当たらない

参考：スタイルシートの優先順位を確認しておくこと

スマートフォンへの対応について整理しておく
　　スマホ対応において使われるサイト構築技術について記述する

　　（１）文字サイズを大きめに設定する
　　　　１４pt～１５ptにする、ＰＣサイトよりも大きめにする
　　　　　　外出先や移動中でも見ることができる大きさにする

　　（２）文字数を少なくする
　　　　表示可能な領域がＰＣと比べると小さいので、極力文字数を少なくする

　　（３）ボタンを大きくする
　　　　デザイン性のある大きなボタンや、画面の横幅いっぱいのボタンを配置する

　　（４）リンクはリスト化する
　　　　リンクが複数並ぶような時は、リスト化する
　　　　　　リスト化とはリンク項目に一覧性を持たせて並べることです
　　　　　　アイコン化して並べるのもリスト化の一方法です

　　（５）画像の使用を減らす
　　　　不必要な画像（ボタンやアイコンも含む）はＣＳＳ３を使うことにより極力減らす
　　　　　　ＣＳＳ３は角丸や影（シャドウ）の表現にも活かせる

　　（６）ブックマークを使用する
　　　　ブックマークを用意して、スクロールの代わりにページ内でジャンプし易くする

　　（７）文章を折りたたむ
　　　　記事は折りたたんで置き、必要に応じて開ける様にする

　　（８）メニューにはタブを使用する
　　　　画面遷移の状況が目に見えるので複数のコンテンツを上手にコントロールできる

　　（９）問合せ先や地図を用意する
　　　　機動性が高いといった特徴を活かして、電話番号や地図を載せて繋がりやすくする

　　（１０）ＳＮＳとの繋がりを意識する
　　　　数多くのコミュニティを図るために、ＳＮＳへ簡単に繋がる仕組みを設置しておく

　　（１１）位置情報を活用する
　　　　位置情報と連携させることによって、提供サービスの幅が広がる

スマートフォンへの対応について整理しておく
　　技術的な作成上の観点ではなく、デザインする際の基本的な考え方を記述する

　　（１）スマホ優先かＰＣ優先かを検討する
　　　　　　スマホ優先・・・移動中にアクセスされるか、戸外で使用されるか
　　　　　　ＰＣ優先・・・・じっくり家からアクセスされるので、内容に興味を持たせたり、画像を沢山用意して多彩な表現をするか
　　　　こういった点を考慮した上で、スマホ優先での対応を決定することにする

　　（２）常にシンプルな構造にする
　　　　通信環境は比較的改善されてはいるが、通信に必要なデータ量を多くしない
　　　　　　メニューやボタンは画像だけでなく、ＣＳＳを使いなるべくデータ量を少なくする
　　　　　　画面の表示要素をシンプルにする
　　　　　　　　フッターやサイドバーなどを思い切って無くすことも考える
　　　　　　　　便利さよりシンプルさを強調して、使いやすくする
　　　　サイトの階層を複雑にしない
　　　　　　一度の読み込みでできるだけ多くの情報が読み込めるように工夫をする
　　　　段組を使わない
　　　　　　横幅に限界があるので、サイドバーは設けない

　　（３）リンクは一目で分かるようにする
　　　　タッチパネル操作であることを考慮する
　　　　　　マウスポインタが表示されず、ロールオーバー（マウスオーバー）機能は使えない
　　　　　　　　マウスを文字の上に置くと、コメントが浮かび上がったり、文字の色が変わったりする機能
　　　　　　一目でリンクだとわかるように工夫する必要がある

　　（４）タッチ操作に最適な行間や余白をとる
　　　　タッチ操作が誤操作しない様に、文字や画像の行間を見直す
　　　　　　入力を求める場合には、キーボード入力しやすい工夫を施す
　　　　　　選択を求める場合には、選択しやすくボタン等にも配慮する

　　（５）リキッド（可変幅）でデザインする
　　　　縦長の画面と横長の画面の双方でアクセスされる、固定幅でデザインはしない
　　　　　　文節で区切って改行するのではなく、段落で区切って改行する
　　　　リキッド（可変幅）デザインにして、デザインが崩れていないかどうかをチェックする

　　（６）便利なソフトは使わない、見慣れた画面にする
　　　　Flashは使わずに代替手段を考える
　　　　　　可能であればアニメーションgifで代用する
　　　　　　動画をアップロードして、YouTube等の動画サイトへ繋げる
　　　　スマホのＯＳや標準アプリの操作性と一致させたデザインにする
　　　　　　操作の感覚がＯＳと似ていれば取っ付きやすくて分かりやすくなる
　　　　　　角丸で四角形のアイコンを使う、グラデーションの背景に大きなボタンを配置する

　　（７）ＨＴＭＬ５とＣＳＳ３を活用する
　　　　できるだけシンプルなデザインにして、ＣＳＳ３で表現力を高める
　　　　　　ＩＥは徐々に追い着いて来ているので、バージョンを気にする必要もなくなる

　　（８）画面のデザインをスホ用ＯＳに合わせる
　　　　スマホの操作性と一致させることによって、誰にでも簡単に操作に馴染んでもらう
　　　　　　角丸で四角形のアイコンを配置する
　　　　　　グラデーションの背景に大きなボタンを配置する

実際、ＰＣ用画面ににモバイル用の画面を切替えてみた
　　初めてということもあり、試行錯誤を繰り返しながら時間がかなり掛かった

　　いくら修正とテストを続けても一向に完成しないことに気付いた

　　レスポンシブなデザインにして、viewportを使えば
　　　　ＰＣ用でもモバイル用でも共有できるＨＴＭＬソースとＣＳＳソースが出来上がるのは分かった
　　　　これは技術的に可能だと言うことであって、必ずしも満足するモノに仕上がるとは限らない
　　　　双方を満足させようとしたら、時間が幾ら有っても足りないことに気付いた

以下のサンプルを使って説明します

スマホ画面

※※※　スマホの場合は左側の内容が画面いっぱいに表示されます
※※※　　　これ以上、表示項目を増やすと画面が煩雑になると思われた
※※※　パソコンの場合は右側の画面がスカスカ状態で表示されます
※※※　　　かといって表示項目を増やせばスマホ画面が煩雑になってしまう

※※※　要するに、それぞれに適した画面を個別に作成するのが一番良くて
※※※　　　作成者は効率よく作成でき、ユーザは使い勝手が良くなると分かりました

以下のように方針を決めて今後は対応する
　　スマホ対応の進め方（方針編）を参照してください

実際にHTMLやスタイルシートを変更して、どういった画面表示になるかを試してみる
　　基本方針としてはＣＳＳの変更のみで対応することにする

切替え作業に着手する前の状態は以下の通り
　　横幅を固定し、２カラムで作成したサイトを切替えの対象とする
　　最上段はheader部、中央はmain部と右横にsidebar部、最下段はfooter部となっている
　　横幅８００pxの固定幅で定義している

１．スマホの試行テストを開始する
スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　８００pxの固定幅画面全体を忠実にスマホ画面に表示する
　　　　　　文字は小さくて読みづらい、ピンチアウト（拡大）操作すれば読めるようにはなる

ＨＴＭＬを修正する（全ページのheader部の修正となるが、限定的なので方針内とする）
　　・ＨＴＭＬに【viewport】を追加する
　　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　【initial-scale】を指定したにも関わらず、数倍に拡大されたものが表示される
　　　　　　sidebar部はオーバーフローしmain部の下方に回りこんで表示されている
　　　　　　文字は小さくて読みづらい、画面下方にはスライドバーが表示されている
　　　　ピンチイン（縮小）操作すれば読めるようにはなる、画面下方のスライドバーも見えなくなる

スマホ用のスタイルシートを用意する
　　・ＨＴＭＬに【link】を追加し、新たにスマホ用ＣＳＳを指定する
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” type=”text/css”/>
　　　　従来のＰＣ用ＣＳＳ定義の行の次に挿入する
　　　　　　共通のスタイルシートを先に、個別のスタイルシートを後に定義する
　　　　　　　　※ｌｉｎｋ命令と@import命令の読込み順位は不明、だが経験値としてこの順でないといけない

　　・ＣＳＳファイルを新たに用意する
　　　　【@import】命令で共通のスタイルシートを呼び出しておく
　　　　【width】で定義してある固定幅の値を１００％と上書き訂正する（当然複数箇所の対応となる）

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　違和感は有るが、ＨＴＭＬとＣＳＳの値が反映され始めていると確信する
　　　　後は、ＣＳＳの微調整を繰り返して行い、気長に表示画面をスマホ用にするだけとなる

修正手順を整理しながら、少しづつ進める（実際には、行きつ戻りつの試行錯誤を何度と無く繰り返す）
　　・ＨＴＭＬの修正は以下の様にする・・・・・・表示幅の大きいモノから順に並べて定義する
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1″ / >
　　　　<link rel=”stylesheet” href=”css/pc.css” type=”text/css” media=”screen and (min-width: 1024px)”/>
　　　　<link rel=”stylesheet” href=”css/tablet.css” type=”text/css” media=”screen and (min-width:768px) and (max-width:1023px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_l.css” type=”text/css” media=”screen and (min-width:480px) and (max-width:767px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_s.css” type=”text/css” media=”screen and (max-width:479px)”/>

　　　　値の設定はスマホは320px x 480px、タブレットは768px x 1024pxと想定している

　　・ＣＳＳの修正は以下の様にする
　　　　【width】を１００％にする、画面横幅いっぱいに表示されると想定する
　　　　【background-color】を使って各ＣＳＳごとに色を変えた、ＣＳＳ定義の反映状況の確認に使用する
　　　　　　HTMLの記述やＣＳＳの定義に自信が無い初期段階での表示テストには有効であった

スマホの表示をテストする
　　　　縦にして表示すると
　　　　　　特定のブロックだけが右に飛び出している
　　　　　　背景の色を見て、修正した縦型ＣＳＳが反映されていると確信する
　　　　横にして表示すると
　　　　　　画面からはみ出さずにピッタリと収まっている
　　　　　　文字の大きさがアンバランスな感じ、途中で切れている部分もある
　　　　　　背景の色を見て、修正した横型ＣＳＳが反映されていると確信する
　　　　縦で表示してから横にすると
　　　　　　文字も大きくなり、画面からはみ出してしまう、ピッタリ収まっていたのに・・・・かなり長時間悩んだ
　　　　　　　　収まらなくなった原因は【inirtial-scale】はページを読み込んだ時のみ有効と分かる
　　　　　　　　読み込んだ後で縦横を変化させても、ページの再読み込みは行わないため
　　　　　　　　320px分を480pxにして表示したため、１．５倍の大きさになって表示されたと分かる

　　ここまでのテストで基本的な動きが保障されたので、後はＣＳＳの微調整だと割り切る
　　　　デバイスの表示幅の範囲に合わせて最適な固定幅を定義をしたり
　　　　デバイスの物理属性に合わせて最適なＣＳＳを選んだり
　　　　試行テストの種類にはまだ先がある、が一旦ここで打ち切ってＣＳＳの微調整を行って収束させる

２．タブレットの試行テストを開始する
タブレットの表示をテストする（８００pxの固定のまま）
　　　　横にして表示すると
　　　　　　画面からはみ出さずにこじんまりと中央に収まっている
　　　　　　背景の色は、タブレット用に指定した色ではなくて、ＰＣ用の色が反映されている

　　タブレットはＰＣ用のＣＳＳで賄えると判断し、タブレットのテストは終了させる

モバイル端末用に表示を切替える（試行編、対応編）も必ず読んでください

ＰＣサイトをモバイル端末用サイトに変換する方法
　　・ＷＰで構築したサイトはプラグインを使って切替える方法
　　　　【WPtouch】等のプラグインを使って、ＰＣサイトを変換する
　　　　PCサイトとのデザインの統合が取りにくい
　　・ＰＣサイトをサービスを使って切替える方法
　　　　【shutto】等のサービスを使って、ＰＣサイトを変換する
　　　　PCサイトから、パーツやコンテンツをドラッグアンドドロップして簡単に構築できる
　　・レスポンシブWebデザインへ切替える方法
　　　　スクリーンの横幅に合わせてスタイルシートを切り替える方法、手軽に対応できる
　　　　CSS3のメディアクエリを使って、ＰＣサイトを変換する
　　　　端末に合わせて、ファイルサイズやユーザインタフェースが最適化されるわけではない
　　・スマホ向けフレームワークを使って再構築する方法
　　　　オープンソースのスマホ向けフレームワークを利用して再構築する
　　　　【jQuery Mobile】等を使って、ＰＣサイトを変換する
　　・HTML5とCSS3で新たに構築する方法
　　　　モバイル端末用のサイトをゼロから構築する、ＰＣサイトは残す
　　　　デザインやレイアウトの自由度が最も高く、いちばん習得しやすい方法
　　　　ＰＣサイトと更新の同期をとる必要が発生する

「レスポンシブWebデザイン」での方法を記述する

ＨＴＭＬソースを修正する（その１）
　　HTMLヘッターのタグ部分に【viewport】を設定する
　　デバイスの横幅で表示する、という意味である

　　モバイル対応を施さないと
　　　　何も対応せずにPC 向けのサイトを表示すると、９８０pxの前提で表示するので
　　　　結果として、文字が小さくなって表示され読みにくくなる

　　デバイスの横幅で表示すると
　　　　<meta name=”viewport” content=”width=device-width”>
　　　　横向きにした時に、縦向きの画面を横に引き伸ばして表示しようとするので
　　　　結果として、表示される文字数は同じで、各文字が拡大表示され読みにくくなる

　　横向きの時は一行の文字数を増やすと
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
　　　　横向きにした時に、横に引き伸ばさずに等倍（１．０）で表示するので
　　　　結果として、横１行に表示される文字の数は多くなる
　　　　但し、ピンチによる拡大・縮小ができないという大きな弱点が生じる

　　ピンチを可能にする
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >
　　　　ピンチは可能で横向きにした時に１行の文字数も増える

　　最後に
　　　　文字のサイズを固定化したいなら、CSS に次の様に指定する
　　　　　　body {
　　　　　　-webkit-text-size-adjust: 100%;
　　　　　　}

ＨＴＭＬソースを修正する（その２）
　　外部スタイルシートをLink要素と【media】を用いて互いに適用させる
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” />
　　　　<link rel=”stylesheet” href=”css/tablet.css” media=”screen and (min-width: 501px) and (max-width: 800px)” />
　　　　<link rel=”stylesheet” href=”css/style.css” type=”text/css” />

　　　　１行目は、最大５００px（４８０pxのスマートフォンとする）の場合のＣＳＳを指定する
　　　　２行目は、５０１px～８００px（タブレットとする）の場合のＣＳＳを指定する
　　　　３行目は、それ以上（ＰＣとする）の場合のＣＳＳを指定する

ＨＴＭＬソースを追加修正する（その３）
　　画像の制御などは横幅に左右されるので、正確な対応が必要である
　　　　画像の横幅を指定しなかったり、１００%で指定する等等
　　　　対応しないと、横スクロールしようとするので見難くなる

スタイルシート（ＣＳＳ）を修正する
　　フレキシブルレイアウトを適用する場合には
　　　　要素の単位を%で指定したり、最小幅と最大幅を指定して微調整を図る

フロートを使った場合の配置ルール
　（１）左にフロートされたボックスの左外辺（マージンがある場合はマージンの左辺）が
　　　包含ブロックの左辺より左側にあってはならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　つまり包含ブロックからははみ出ないということ

　（２）左にフロートされたボックスの後ろに、別の左にフロートさせたボックスがある場合
　　　後ろのボックスは前のボックスの右側に配置されるか、下に配置されなければならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　右に空いてるスペースにより、収まりきれれば右側に、収まりきれなければカラム落ちになるということ

　（３）左にフロートされたボックスの右外辺（マージンがある場合はマージンの右辺）が
　　　右側にフロートされたボックスの左外辺より右にあってはならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　フロートしたボックス同士は重ならないということ

　（４）フロートされたボックスの上外辺は
　　　包含ブロックの上辺より上にあってはならない
　　　　　包含ブロックからははみ出せないということ

　（５）フロートされたボックスの上外辺（マージンがある場合はマージンの上辺）は
　　　それ以前の要素が生成したブロックボックス、またはフロートボックスの上外辺より上にあってはならない
　　　　　２番目にフロートしたボックスが、先にフロートしたボックスの上辺より上にくることはないということ

　（６）フロートされたボックスの上外辺（マージンがある場合はマージンの上辺）は
　　　それ以前の要素が生成したボックス内の行ボックスの上辺より上にあってはならない
　　　　　２カラムレイアウトで考えれば分かりやすい

　（７）左にフロートされたボックスの後に、別に左にフロートされたボックスがある場合
　　　後ろのボックスの右外辺が包含ブロックの右辺より右にあってはならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　包含ブロックからははみ出すことはできない、幅が入りきらなければ下にレイアウトされるということ

　（８）フロートされたボックスは出来る限り上に配置されなければならない
　　　　　余分な空白はできずに、可能な限り上に配置されるということ

　（９）左にフロートされたボックスは、出来る限り左側に配置されなければならない
　　　右にフロートされたボックスは、出来る限り右側に配置されなければならない
　　　　　後に続くフロートされたボックスよりも、優先的に上方に配置される
　　　　　　　カラム落ちするのであれば、後から配置された方が下に、先に配置された方が上に配置されるということ

　（１０）フロートされたボックスに clear プロパティーが適用される場合
　　　そのボックスの上辺は
　　　　　　「clear:left」の場合はそれ以前の全ての左にフロートされたボックスの、
　　　　　　「clear:right」の場合はそれ以前の全ての右にフロートされたボックスの
　　　　　　「clear:both」の場合は左右両方にフロートされたボックスの
　　　　　下外辺よりも下に配置されなければならない
　　　　　クリア したボックスは、フロートしたボックスよりも下に配置されるということ

Webデザインのレイアウトをまとめる
　　レスポンシブwebデザイン(Responsive Web Design)
　　　　一つのソースでディスプレイの幅に合わせてデザインを最適化する方法
　　　　CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更する
　　エラスティックレイアウト(Erastic Layout)
　　　　要素の単位をemで指定する
　　　　emは1文字分の幅なので文字の大きさを自由に変えてレイアウト幅を変更する
　　リキッドレイアウト(Liquid Layout)
　　　　要素の単位を%で指定する
　　　　ブラウザサイズによって相対的・可変的に幅が変わり、サイズに合わせて情報を提供できる
　　フレキシブルレイアウト(Flexible Layout)
　　　　リキッドレイアウトと同じで要素の単位を%で指定する、最小幅と最大幅を指定する
　　　　最大値と最小幅を指定してるため可読性やレイアウトの崩れをコントロールできる
　　固定幅レイアウト(Fixed Layout)
　　　　要素の単位をpxで指定する
　　　　レイアウト幅が固定され、意図した通りのレイアウトで表示される
　　グリッドレイアウト(Grid Layout)
　　　　架空の縦横線を下地とし、そこに出来たブロックごとに文字や画像などの要素を配置する
　　　　整った安定感のあるレイアウトになるが、多くのサイトで使われているので見慣れたレイアウトになる
　　可変グリッドレイアウト(Fluid Grid Layout)
　　　　グリッドベースのpxを%に変えて、グリッドの仕組を可変レイアウトにする
　　　　ブラウザサイズに合わせて整った要素が再配置されるので、正確に情報を伝えられる

ブラウザにはデフォルトスタイルシートというモノがあり、あらかじめスタイルシートが定義されている
　　通常HTMLで文章を記述すれば、ＣＳＳの指定が無くても適度な間隔や大きさで文章が表示される
　　便利では有るが、CSSで明確に指定しないので、ブラウザ間の表示の様子に差が出てくる

リセットCSSとは、初期値化したＣＳＳを使用することで、各ブラウザの設定内容を無効化するもの
　　全ての要素が全てのブラウザで同一のスタイルで統一されて表示される様になる
　　　　要素セレクタごとに各々リセット値を記述する
　　　　デフォルトで使っていた機能がリセットされ無くなるので、省略していた記述が新たに必要となる
　　リセットCSSを提案しているサービスは多くある、一番有名なのは【Yahoo! UI Library】である

ノーマライズCSSとは、ブラウザごとのＣＳＳの差を埋めてくれるもの
　　デフォルトスタイルシートを維持したまま、ブラウザごとの整合性をとってくれているＣＳＳです
　　　　各ブラウザの差を埋めるだけの必要最低限の記述で済ましている（機能的に不足した状態である）
　　　　そのままリセットCSSとして使用するのは止めた方が良い
　　　　　　各ブラウザ対応する際に参考程度に利用するのが良いと思われる

CSSでは、各要素が生成する四角い領域のことをボックスと呼ぶ

それぞれの名称 　　content・・・・・・内容 　　border・・・・・・境界線 　　padding・・・・・内容とボーダーの間の余白 　　margin・・・・・・ボーダーと他のボックスとの間の余白

marginとpaddingの考え方
　　全ての要素は二つのブロックから構成された一番内側に入っていると考える
　　　　外側のブロックは他の領域との堺を作り出している
　　　　内側のブロックは外側のブロックと距離を置くことによって他の領域と離れた位置に置かれる
　　　　　　これがmargin、これによって他の境界線（border）と自らの境界線（border）が重ならなくなる
　　　　要素は内側のブロックと距離を置くことによって境界線と離れた位置に置かれる
　　　　　　これがpadding、これによって要素が自らの境界線（border）と重ならなくなる

次に、<div>と<p>とで入れ子になった包含ブロックを考えてみる

親要素の<div> のパディングの内側に<p>が配置される 　　<p> 要素の幅は、親要素の<div> のパディングの内側いっぱいに広がる 　　斜線の部分を、<div>が作り出した包含ブロック（コンテナブロック）と言う 　　　　こうやって、より外側のブロックが内包するブロックの場所と大きさを決めることになる

次に、ブロックボックスとインラインボックスの違いについて

ブロックボックスは、独立したかたまりとして、どんどん下にレイアウトされていく 　　インラインボックスは、行内の一部として、順次横にレイアウトされていく

隣り合うブロックでのマージン相殺について
　　上下に隣り合っているボックス間では、マージンの相殺が起こります
　　　　上のボックスで「margin-bottom: 50px」を指定し、
　　　　下のボックスで「margin-top: 30px」を指定した場合
　　　　　　大きい方の値「50px」が採用される
　　　　※入れ子になった様な複雑な場合は
　　　　　　互いにborder（境界線）を引くと境界が明確になり相殺が起きなくなる
　　左右に隣り合っているボックス間では、マージンの相殺は起こらない