つれづれ日記

２０１１年４月１日～８月１５日まで育児休業を取りしました。この期間の生活を日記のまとめです。また、育児休業期間が終わったので、他にも挑戦しているものや日常のメモなどもこの日記に載せようと思います。

カテゴリー「ｗｅｂサイト作成」の記事一覧

2024.05.18 [PR]
2011.10.13 20111013ｗｅｂサイト作成について　０７
2011.10.08 20111008ｗｅｂサイト作成について　０６
2011.10.03 20111003ｗｅｂサイト作成について　０５
2011.10.02 20111002ｗｅｂサイト作成について　０４
2011.10.02 20111002ｗｅｂサイト作成について　０３

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

(X)HTML,CSS覚書
～背景画像の設定について～

　とりあえず、まずは例文から。

h2 {
    background-image: url(../image/bar.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
}

　これはｈ２に対する設定であることは説明しないでもわかると思います。
　ですので、{　}内に書かれた部分の説明です。

☆background-imageプロパティは、どの画像ファイルを背景画像にするかを指定するプロパティです。次に指定しているアドレス(url・・・)の画像を背景画像として使うということを指定しています。

　url(../image/bar.gif)は、画像ファイルがあるフォルダーと画像ファイル名です。

　『..』というのは、一つ前（上位）のという意味です。何の一つ前かというと、この文章が書かれたＣＳＳファイルがあるフォルダーを基準として、一つ前のフォルダーに戻るという意味です。

　次の『/image/bar.gif』ですが、これはimageフォルダー内にあるbar.gifという画像ですということです。

　つまり、『../image/bar.gif』というのは、一つ前に戻ったところにある、imageフォルダー内にあるbar.gifファイルということです。

　何度も書きますが、基準はＣＳＳファイルがある場所です。その場所から、どういう位置にファイルが置かれているのかを指定してください。

☆background-repeatプロパティは、画像ファイルの繰り返し表示を指定するプロパティです。
　このプロパティの値は４種類指定されています。
・repeat-x     横方向に繰り返す
・repeat-y     縦方向に繰り返す
・repeat        縦横両方に繰り返す
・no-repeat 繰り返しをしない

☆background-positionプロパティは画像ファイルの表示開始位置を指定するプロパティです。用意された値と任意に数値の両方に対応しており、非常に細かい調節ができます。

　用意された値は「top」「right」「bottom」「left」「center」の５つです。
　任意の数値は％やｐｘ（ピクセル）といった単位を使って数字で指定します。

　位置の指定は「left top」のように「横方向　縦方向」の順番で記述します。例えば「10px 5px」と記述した場合には、「左から１０ｐｘ　上から５ｐｘ」という位置になります。

　こまめに試しながらようすを見た方が良さそうですね。

[0回]

20111008ｗｅｂサイト作成について　０６

(X)HTML,CSS覚書
～行間と文字間の設定について～

　全てのブラウザで同じように見えるための準備（おまじない）の後は、行間や文字間の設定です。

　ＣＳＳファイルに次のコードを記述します。

body {
line-height: 1.3;
letter-spacing: 0.04em;
}

　line-heightプロパティは行の高さを指定する場合に使用します。
　行の高さが高くなれば結果的に行間も開きます。
　値についてですが、ｐｘや％などの単位をつけることもありますが、ここではあえて単位をつけていません。
　詳しい話をすると長くなるので省略します。

　letter-spacingプロパティーは文字間を指定するためのプロパティです。
　こちらの値には、普通単位をつけます。
　文字間については適度な間隔を開けた方がいいのですが、間隔を開けすぎると逆効果になることが多いです。
　自分の目で見て確認してください。

　ちなみに今回の例では、二つのプロパティをbodyに指定しています。
　これは、<body>と</body>に挟んだ内容（つまり本文）全てに指定を適用するためです。
　ただ、今回紹介している２つのプロパティーは一度body内の文章全てに指定が有効ですが、プロパティーによってはその限りではないのもあります。
　今回はその詳しい説明までしません。後日いろいろと詳しく説明をすることもあると思います、

[0回]

20111003ｗｅｂサイト作成について　０５

(X)HTML,CSS覚書
～ＣＳＳファイルの下準備について～

　ＨＴＭＬなどの表示に関してブラウザごとに若干の違いがあり、それが見栄えの違いにつながることもよくあることです。そこで、その若干の違いをできるだけなくすため、ＣＳＳファイルに初期設定を行います。

@charset "Shift_JIS"
* {
margin: 0;
paddomg: 0;
}

　この記述が示す内容は、次の２つの内容です。

文字コードはシフトＪＩＳを使うという宣言文。文字化けしないためのおまじないです。
記述範囲の外側にも内側にも余白なしの状態をつくります。ブラウザ間の見栄えを同じにするおまじないです。

　とりあえずは、意味は分からず、お守りとして使っていいのではないかと思います。
　ただ、この初期設定を適用したＣＳＳであると、文字同士がぴったりとくっつき、ブラウザの端にも隙間がなくなってしまいます。

　つまり、ここから自分が思い描いたデザインになるよう、ＣＳＳでルールを決める必要があります。
　一から何でも決めることはある人にとっては面倒なことかもしれません。
　しかし、逆に捉えると、自由な発想で自分の思うように決められるので、楽しいものになると思います。
　なかなか思うようなデザインにならないかもしれませんが、挑戦してみる価値はあると思います。

[0回]

20111002ｗｅｂサイト作成について　０４

(X)HTML,CSS覚書
～文字の装飾について～

　ＣＳＳの書き方はとても簡単です。まずはテキストの装飾を説明します。

h1 {
    color:red;
    font-size:200%;
    font-family:Arial,Verdana,"MS ゴシック",sans-serif;
}

　色で示した部分を「セレクタ」といい、ＨＴＭＬのどこの部分に対する装飾なのかを記述しています。
　色で示した部分を「プロパティ」といい、セレクタの内容の何を変化させるのかを記述しています。
　色で示した部分を「値」といい、プロパティの設定をどうするのかを記述しています。

　これは、ＨＴＭＬファイルに記述した<h1></h1>タグに対する装飾の設定です。
　ＨＴＭＬファイルに記述した<h1>と</h1>に囲まれた文字を、

色：赤色
フォントサイズ：２００％の大きさにする
使用するフォント：優先順位が高い方から「Arial」→「Verdana」→「MS ゴシック」→「sans-serif」で、使用できるものを使う

　ということになります。

　また、今回の例のように、ｈ１に関する３つのプロパティを１つにまとめて記入することもできますし、別々に記入することもできます。
　見やすさの観点から、個人的にはこの例のようにまとめて記入するのがいいのではないかと思います。

　ちなみに、フォントについてですが、「sans-serif」というフォントはありません。もし指定されたフォントがない場合には「sans-serif」系統のフォントを使うようにする、おまじないのようなものです。
　それと、ＩＥ対策として、「sans-serif」の前に、ＭＳ系のフォントを指定しておかないと、文字化けすることがあるようです。

[0回]

20111002ｗｅｂサイト作成について　０３

(X)HTML,CSS覚書
～ＨＴＭＬとＣＳＳの連結について～

☆ＨＴＭＬとＣＳＳの歴史（超概略）
　ＨＴＭＬは、Ｗｅｂページを作成するために開発された言語です。
　Ｗｅｂの発展と共に、ＨＴＭＬに機能が追加されました。
　見栄えに関する要素も取り込まれてきましたが、ＣＳＳが考案されてからは、ＨＴＭＬには構造の記述を、ＣＳＳには見栄えの記述をというように、分離して書くようになってきました。

☆ＣＳＳについて
　ＣＳＳとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の頭文字を取ったもので、ウェブページのスタイルを指定するための言語です。
　ＣＳＳはスタイルシートですので、ＨＴＭＬと組み合わせて利用します。

　上に書いたように、ＨＴＭＬにも装飾に関する記述が使えますが、ブラウザを変更すると見栄えが変わったり、検索エンジンに正しく理解されなかったりすることがあり、せっかく書いた情報がうまく活用されないかもしれません。

　また、ＣＳＳを利用すると、簡単に見栄えを変えることができるという利点もあります。現在さまざまなホームページ作成サイトで色やフォントなどが簡単に変えられるようになっているのは、ＣＳＳを利用しているからです。

☆ＨＴＭＬファイルとＣＳＳファイルをつなげる

　作成したＣＳＳファイルを"test.css"とします。これをＣＳＳというフォルダー内に保存しておきます。
　これに文章を書いているＨＴＭＬファイルである"index.html"につなげるための記述内容をまとめておきます。

　"index.html"の中にある"<head>"と"</head>"の間の行に、次のことを記入します。

1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
3 <meta http-equiv="Content-Style-Type" content="text/css" />
4 <title>ページタイトル</title>
5 <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
6 </head>
　※上記１～６の番号は説明の都合上番号を割り振ったものであり、実際には書きません。

２行目：利用している文字コードの宣言
　ＷｉｎｄｏｗｓおよびＭａｃでＷｅｂページを作るとこれになります。
　ＵｎｉｘでＷｅｂページを作ると、"Shift_JIS"の部分が"euc-jp"または"utf-8"になることが多いようです。
　JISの場合は"iso-2022-jp"となります。

３行目：スタイルシート言語の宣言
　ＣＳＳが基本なので、記述しなくても問題ないそうです。
　ただ、いろいろなサイトを調べてみるとよく記述されています。
　また、いろいろなサイトやいくつかの書籍で調べてみると、３行目と５行目がセットになっているようです。

５行目：デフォルトスタイルシートの明示（パソコン画面，印刷用）

　実際自分の作ったＨＴＭＬに記入するときには、おそらく５行目を少し変更して対応となると思います。
　保存先やＣＳＳファイル名などを対応させる必要があるからです。

[0回]