③
「sample」→「css」から右クリックして「新規作成」→「テキストファイル」へ。
自主制作
自分で制作したい方のためにマニュアルをご用意しました。
1限～4限目に分けて最短1日で基本のHPが制作できるようにしました。
3時限目:スタイルシート（CSS）の書き方
★HP制作マニュアル－スタイルシート（CSS）の書き方－★
≪CSSの書き方≫
こちらをマスターすれば、ホームページのデザインに幅が広がる。
htmlタグ同様、沢山あるのでホームページマスターでもCSSの書き方を詳しく紹介されているから参考にしてほしい。
コピー＆ペーストできるCSSはこちら↓↓↓
※はみ出して表示された場合、左右にスクロールすることで確認できます。
※コビー＆ペーストできる部分は黄緑色で囲んだ部分（html,cssなど）で囲んであります。
※赤字の部分は変更OK
| body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } */テーブル設定 ------------------------------------------------------------------------*/ table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } */リスト設定 ------------------------------------------------------------------------*/ ol,ul { list-style:none; } */キャプション設定 ------------------------------------------------------------------------*/ caption,th { text-align:left; /左寄せ/ } h1,h2,h3,h4,h5,h6 { font-size:100% /文字サイズ/ font-weight:normal; /文字の太さ/ } q:before,q:after { content:''; } abbr,acronym { border:0; } |
よく記述するものをちょっとだけ解説していきます。
| width height |
width:横幅をの設定。%またはpxまたはautoで表記する。 height:高さを設定。%またはpxまたはautoで表記する。 |
|---|---|
| margin padding |
 margin:要素の外側の余白、padding：要素の内側の余白よく使うので覚えよう。 |
| margin: ○； [上下左右] | |
| margin: ○ ○； [上下][左右] | |
| margin: ○ ○ ○； [上][左右][下] | |
| margin: ○ ○ ○ ○； [上][右][下][左] | |
| margin-top: ○； [上] | |
| margin-right: ○； [右] | |
| margin-bottom: ○； [下] | |
| margin-left: ○； [左] | |
| padding: ○； [上下左右] | |
| padding: ○ ○； [上下][左右] | |
| padding: ○ ○ ○； [上][左右][下] | |
| padding: ○ ○ ○ ○； [上][右][下][左] | |
| padding-top: ○； [上] | |
| padding-right: ○； [右] | |
| padding-bottom: ○； [下] | |
| padding-left: ○； [左] | |
| align | 画像を左（left）・右（right）・中央（center）・下（bottom）に置きたい時に記述。 また、文章の時は、text-alignで記述 |
★HP制作マニュアル－ワイヤーフレームのCSSの書き方－★
≪ワイヤーフレームに関するプロパティ≫
CSSプロパティの記述順序を決めておくと、二重に指定することがなくなる。
コピー＆ペーストできるCSSはこちら↓↓↓
※はみ出して表示された場合、左右にスクロールすることで確認できます。
※コビー＆ペーストできる部分は黄緑色で囲んだ部分（html,cssなど）で囲んであります。
※赤字の部分は変更OK
| div#name { /* 表示・配置に関する設定 */ position: ; /配置方法/ top: ; right: ; bottom: ; left: ; z-index: ; /配置順位/ float: ; /回り込み/ clear: ; /回り込みの解除/ text-align: ; /文章の幅寄せ/ background: ; /背景/ /* 大きさ（ボックス）に関する設定 */ min-width: ; /最小幅/ width: ; /幅/ min-height: ; /最小高さ/ height: ; /高さ/ max-height: ; /最大高さ/ margin: ; padding: ; border: ; } |
≪一般的なclass属性≫
CSSプロパティの記述順序を決めておくと、二重に指定することがなくなる。
コピー＆ペーストできるCSSはこちら↓↓↓
※はみ出して表示された場合、左右にスクロールすることで確認できます。
※コビー＆ペーストできる部分は黄緑色で囲んだ部分（html,cssなど）で囲んであります。
※赤字の部分は変更OK
| .name { /* 表示・配置に関する設定 */ display: ; position: ; top: ; right: ; bottom: ; left: ; z-index: ; float: ; clear: ; overflow: ; /スクロール/ visibility: ; /ボックスの表示・非表示状態/ /* 大きさ（ボックス）に関する設定 */ min-width: ; width: ; max-width: ; min-height: ; height: ; max-height: ; vertical-align: ; /縦方向の位置揃え/ margin: ; padding: ; border: ; /* テキスト・背景に関する設定 */ color: ; font-family: ; /フォントの種類/ font-style: ; /フォントスタイル（normal,italic等）/ font-weight: ;/フォントの太さ/ font-size: ; /フォントのサイズ（1～7、または、px）/ text-indent: ; /2行目以降の文字下げ/ text-align: ; text-decoration: ; /テキストに下線・上線・打消し線等/ letter-spacing: ; /文字間隔/ line-height: ; /行の高さ/ background: ; } |
≪ワイヤーフレームと個別の指定≫
「ワイヤーフレーム」と「個別の指定」は同一CSS内で別に記述して管理が望ましい。
| <div id="header"> <h1>サイトタイトル</h1> </div> <!-- /#header --> <div id="contetns"> <h2>見出し</h2> <p>段落段落段落</p> </div><!-- /#contetns --> |
↓こちらのCSSは下記のように管理しましょう。
| /*wire frame **************************************/ div#header { width:800px; } div#contetns { width:780px; margin-top:10px; padding:10px; } /*#header **************************************/ div#header h1 { color:#6F86A3; } /*div#contetns **************************************/ div#contetns h2 { font-size:120%; } div#contetns p { margin:0 0 1em 0; } |
＝ワンランク上のCSS＝
メインとサブに同じタグがあった場合、それぞれにスタイルを変えたいと思ったとき、セレクタで設定するより、classやidで設定した方が処理が速い。
以下のpタグの例を見てみよう。
| <div id="main"> <h2>見出し</h2> <p>文章1</p> </div> <!-- /#main --> <div id="sub"> <h2>見出し</h2> <p>文章2</p> </div><!-- /#sub --> |
↓セレクタ設定
| #main p { margin:0 0 1em 0; } #sub p { margin:0 0 1em 10px; } |
↓class設定
| <div id="main"> <h2>見出し</h2> <p class="maintext">文章1</p> </div> <!-- /#main --> <div id="sub"> <h2>見出し</h2> <p class="subt ext">文章2</p> </div><!-- /#sub --> |
| .maintext p { margin:0 0 1em 0; } .subtext p { margin:0 0 1em 10px; } |
★練習★
先ほどのhtmlを編集してみましょう。
今回は、「背景色」・「文字色」「文字の配置」を行います。
まずは、htmlのおさらいから。
①
先ほど作成したindexのhtmlファイルを開いて上記htmlをコピペ・保存してみましょう。
②
Google Chromeを開いて（「index」を右クリック→「プログラムから開く」→「Google Chrome」）確認。同じ画像が出てきたら作成完了。
※文字の色や配置などはこの段階で気にしないでください。
cssを記述するファイルがなければ進めません。
④
「新しいテキストドキュメント」→「style」と名称変更。でも、まだ使えません。種類を「テキストドキュメント」→「テキストファイル」に変更が必要です。
⑤
styleを開き「ファイル」→「名前を付けて保存」と。
⑥
ファイル名「style.css」→「保存」と。
⑦
「テキストファイル」となっていれば準備完了。必要ない「テキストドキュメント」は削除。
では、下のサンプルをコピペしてstyleのフォルダに張り付けて保存。
コピー＆ペーストできるCSSはこちら↓↓↓
※はみ出して表示された場合、左右にスクロールすることで確認できます。
※コビー＆ペーストできる部分は黄緑色で囲んだ部分（html,cssなど）で囲んであります。
※赤字の部分は変更OK
| @charset "SHIFT_JIS";
/*PC・タブレット・スマホ共通設定 ------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*全体の設定 ---------------------------------------------------------------------------*/ body { margin: 0px; padding: 0px; color: #333; /*全体の文字色*/ background: #FFDDF7; /*背景色*/ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/ font-size: 16px; /*文字サイズ*/ line-height: 2; /*行間*/ -webkit-text-size-adjust: none; } /*ヘッダー（ロゴが入った最上段のブロック） ---------------------------------------------------------------------------*/ /*ヘッダーブロック*/ header h1 { width: 1000px; /*幅*/ margin: 0 auto; padding: 50px; /*文字の位置*/ overflow: hidden; text-align: center; /*中央寄せ*/ font-size: 40px; /*文字のサイズ*/ } |
さ、もう少しです。
現状はhtmlとcssは別々のファイルです。htmlでcssを呼び出すことが必要です。下記の赤字を追記。
| <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <link rel="stylesheet" href="css/style.css"> <title>自分のホームページ</title> </head> <body> <header> <h1>ホームページ制作おめでとう！</h1> </header> </body> </html> |
写真のようになればcss完成。
ここから色々とアレンジして．．．となっていきます。
NEXT 4時限目:ホームページをデザイン
↓ 当サイトの3サービス ↓
