内職・バイトと節約生活＞ホームページ作成方法＞html/スタイルシート
このサイトで利用しているHTML・スタイルシートの紹介〜内職〜
html/スタイルシート
ここでhtml/スタイルシートは、このサイト内職バイト節約暮らし生活で使用中のhtmlとスタイルシートを紹介します。いちお激戦キーワードの上位にまでいけたので、参考にしてください。
html/スタイルシート情報！
html
文書を並べるときの記号
スタイルシート
文章のデザインを記述するときの記号
と思っています。
html
ものすごく少ないタグ数です。自分でも驚きました。基本的なタグはたった5個でした。
| !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN" | htmlの一番上に書かないといけないようです。htmlのバージョンと記述方法。 |
| HTML lang=ja | htmlの最初という意味で、言語は日本語ということ。 |
| HEAD | headとheadの間に全体的な書き方や書いたことの説明を書きます。 |
| META http-equiv=Content-Type content=text/html charset=Shift_JIS | htmlのテキストで文字は、Shift_JISで書いています。 |
| TITLEページの名前/TITLE | ？のところにサイトタイトル |
| META name="description" content="ページの説明" | ？のところにページの説明 |
| META name="keywords" content="ページのキーワード" | ？のところにページのキーワード |
| META http-equiv="Content-Style-Type" content="text/css" | スタイルシートのタイプだと思う。 |
| META http-equiv="Content-Script-Type" content="text/javascript" | スクリプトに何を使うか。 |
| LINK rel="stylesheet" href="ファイル名.css" type="text/css" | スタイルシートを使うという宣言とそのファイルがどこにあるか、どんな型で書かれえているか。 ？のところに、？.cssで保存したスタイルシートファイルのファイル名 |
| BODY | htmlの中身をいれる場所の最初 |
| DIV class="クラス名" style="スタイルシート" | 範囲を区切るタグ。枠を付けて表のようにしたり、自在。 class=""のなかに、スタイルシートのクラス名という個別の名前をいれます。 style=""のなかに、スタイルシートに付け加えるものがあるときにかきます。 |
| SPAN class="クラス名" | 文章中で、言葉に特徴を持たせるときに使う。見出しとして使っています。 |
| A href="リンク先URL" | リンクを貼るときに使う。 |
| P class="クラス名" | 文章はこの中にいれる。 |
| BR | 行を変えるときにつかう。 |
| SCRIPT type="text/javascript" | アクセス解析のタグ。 |
| IMG src="?" alt="画像の説明" width="広さ" height="高さ" | アクセス解析のタグ。alt、width、heightが必要。 |
スタイルシート
クラスは多いですが、基本的なものは14個なので覚えるときは時間かかったけどつかってるものはあまり大きな容量ではないようです。今思うとなぜ使えるまで苦労したのかが不思議です。
| body {} div{} p{} span{} table{} td{} ul{} a:link {} a:visited {} strong {} | この10個のスタイルを定義しています。{ }のなかに色とか形を決めて入れる。 |
| background-color: 色 ; | 背景 |
| color :色; | 文字色 |
| background-image:url("img/ファイル名"); | 背景の画像 |
| font-size:大きさpx; | 文字の大きさ |
| line-height: 高さpx; | 列の高さ |
| border-style: solid; | 文字の形。dotted点線とsolid普通の線を使っています。 |
| border-width:枠の幅px; | 枠の幅。上下左右個別に決めることができます。 |
| border-color: 色; | 枠の色。border: solid 0px #ffffff;のようにして、枠を一度に決めることもできる |
| text-align:left; | テキストを左left、真ん中center、右rightに寄せる |
| margin: 隣のコンテンツまでの距離px; | 隣のコンテンツまでの距離 |
| width: 広さpx; | 広さ |
| background-repeat: no-repeat; background-position: left center; |
背景画像を繰り返さず、左側の真ん中に置くということ。画像つきの見出しに使っています。 |
| padding-left: 枠から内容までの距離px; | 枠から内容までの距離 |
| font-weight: 文字の厚さ; | 文字の厚さ |
| div.クラス名 {} p.クラス名{} span.クラス名 {} ul.クラス名{ | この４つでクラス名つきでさらにくわしくデザインしています。 |
| float: left; | divやPを横に並べるときに使います。 float: left;を入れたものは、左よせで並びます。float: right;を入れたものは、右よせで並びます。 |