内職バイト節約生活

内職・バイトと節約生活ホームページ作成方法>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.クラス名{ この4つでクラス名つきでさらにくわしくデザインしています。
float: left; divやPを横に並べるときに使います。
float: left;を入れたものは、左よせで並びます。float: right;を入れたものは、右よせで並びます。
前【HTML・スタイルシート】へ   次【色・カラーの決め方】へ
TOP【コンテンツ】へ↑
HOME【内職・バイト・節約生活】へ

内職・バイト・節約生活はリンクフリーです。また、掲載している情報を利用し、いかなる損害があっても一切責任を負いません。また、当サイトの内容の全部または一部を無断転機・複製することは一切禁止です。悪質な場合、厳しい対処を致します。

相互リンクは、内職関係、バイト関係、節約関係に限ってTOPの掲示板にて募集中。

Copyright(C) 内職・バイト・節約生活 All rights reserved

アクセス解析