ウェブマスター中級講座 -3「前回の復習と画像について」

■フォントの復習

body　で明朝に変更
　font-family: YuMincho,Yu Mincho,'游明朝',"ヒラギノ明朝 ProN W6",HiraMinProN-W6,"HG明朝E","ＭＳＰ明朝",MS PMincho,"MS 明朝",serif;

見出しタグのフォント変更（書体・色・太さなど）
　Google Font　　https://fonts.google.com/
　Web　色見本　　http://www.colordic.org/
span タグで　style=""　class=""（スタイルシートに作ったもの）を使って部分的にフォントのサイズと色を変更
　　　font-size: px; color: #;

■リンクについて

　アイコン画像を使ってトップに戻る
　　　　戻りたい位置へ　<a name="top"> </a>
　　　　<a href="#top"><img src="画像の場所と名前"></a>

■画像について

・フロンtページで使う写真は高画質（カメラで撮影）なものを必要に応じて縮小して使う
・フロンtページで大きい画像を使う場合、横縦の比率（3：2が多い）のままだと高さを取ってしまうので、必要に応じてトリミングする
・画像を並べて使う場合、比率を揃え、横位置・縦位置も揃える

・写真・画像と文字は　jpg（JPG）　グラフィックは　png （gif は使わない）の拡張子
・グラフィックのロゴは透過画像にする
・ツールバーのサイトタイトルの前に表示される favicon（ファビコン）は、テーマによって「カスタマイズ」で作れる
　　favicon.png という名称で正方形（32px程度）の画像を用意しておく
　（その機能のあるテーマで作ると、テーマが変わってもOK）

■画像に枠を付けたり影を付けてみる

　　背景の色を変えて、画像とのコントラストを確認

■背景画像に文章を載せてみる

■背景画像に文章部分にフィルターをかけてみる

　　画像とフィルターの色・透過度（0.1～0.9）・文字の色

■画像を3枚並べる

　　並べる時のポイント・・・サイズを揃える／画像間の余白
　　余白のタグ margin とスペースキー

　　画像置く位置は選択できる
　　　class="alignnone　　指定なし（回り込みなし）
　　　class="alignleft　　画像を左に置く（文章が右に回り込む）
　　　class="alignright　画像を右に置く（文章が左に回り込む）
　　　class="aligncenter　画像を真ん中に置く（両サイド回り込みなし）

　　編集画面で画像を並べる場合、class="alignnone（指定なし）を選択
　　テーマのスタイルシートで画像周りに余白を指示してない場合、スペースで調整することもある
　　半角スペースは一回のみ有効・全角スペースは回数分有効
　　（文字間・画像と文字も同じ）