二回目－－文字や画像の高さ、幅、背景の色、タグとクラス名－－
今回は文字や画像の引き続きとタグに関してとなります。
前回の文字の
・色＝color: カラーコード;
・大きさ＝font-size: 数値px;
・種類(書体)＝font-family: 書体名;
に引き続き文字について学びました。
今回は『高さ、幅、背景の色、それからタグ名』についてとなります。
<h1>を使い変えられるじゃないかと思うでしょうが、このプログラムを使うことで画像の大きさや文字の大きさを自由に変えられるようになるのです。
また、<h1>は『見出し』なので本文を記入する機能ではありません。
１．文字の高さと幅(縦と横)を指定する
前回と同じく、こちらも『html』でプログラムした物を『css』を使い指定してレイアウトすることとなります。
それと、どちらも大きさなので単位は『px』なので気を付ける必要があります。
高さ(縦幅)＝height
幅(横幅)＝width
この二つを使い指定するのですが、基本は前回と同じなので『color』が置き換わると思えば良いです。
例
『HTML』
<h1>あきらめたらそこで試合終了ですよ</h1>
<img src=”url”>
『CSS』
h1 {
height: 50px;
width:100px;
}
img {
height: 100px;
width: 300px;
}
これで<h1>で指定した文章『あきらめたらそこで試合終了ですよ』は【高さ50px、幅100px】で表示される様になります。
同じく画像は【高さ100px、幅300px】で表示されます。
注意点も前回と同じく【:;】や【px】をつけ忘れないことです。
また、打ち込んでいて思うこととして『英語のケアレスミス』をしないこと。小説を書くのと同じく、誤字、に気を付けるということです。
それでは次に移ります。
２．背景の色を指定する
先に言いますが、こちらも基本となることは変わらず、プログラムも単語が変わるだけに過ぎません。
その英語を覚えるのが苦労なんですが、テストや試験でないと思えば何度も使っているうちに覚えられるでしょう……多分。
使うプロパティ(属性、使用する単語？)は
背景＝background-color: カラーコード;
バックグラウンド――そのまま背景と訳せます。
その後に色の指定ですから『color』を用いるので
『color』に『background』が付いていると思っていいでしょう。
例
『HTML』は先ほどの物を流用します。
『CSS』も殆ど流用となり
h1 {
height: 50px;
width:100px;
background-color: #ff000;
}
高さと幅の下に一行増えただけに過ぎません。
注意点も言うまでもなく同じです。
当然ですが、画像に背景の色を指定しても意味はないです(使い方次第でしょうが)。
毎回覚えるのがこの程度なら楽なのですが、物事は万事簡単には済まないのが世のつれ。覚えることは多くあり、これからも増えていくことでしょう。
３．タグに名前を付ける
『タグ』が何か覚えていますか？
そう、なろうでいうサブタイトルやしおりの様なものです。
HTMLで『タグ』というと<>で囲まれた文字のことを示します。
h1、a、p、liのことです。
今回はその『タグ』で表示する文字の色を指定し、名前を付けることで個別に適用するプログラムを作ります。
例
『HTML』
<ul>
<li>バスケットボール</li>
<li>バレーボール</li>
<li>サッカーボール</li>
</ul>
『CSS』
li {
color: #ff0000;
}
説明しますと、『HTML』で『・』のリスト項目を作り
『CSS』で字を赤にした、ということです。
この辺は<h1>や<p>の色や大きさを変えた時と変わりありません。
ですが、これでは三つ全てのリストが赤色になってしまいます。
もし、野外スポーツだけを赤にしたい、逆にそれ以外を青にしたい
そう思った時もう一工夫必要となってきます。
それが『名前を付けて個別に指定する』ということです。
使うのは『class』＝クラスです。
『class』を付けることで識別させ、個別に『CSS』を適用させます。
これで困ることなく野外スポーツだけを色変更できるということです。
先の例を流用し、サッカーボールだけを赤字にする
『HTML』
<ul>
<li>バスケットボール</li>
<li>バレーボール</li>
<li class=”open”>サッカーボール</li>
</ul>
『CSS』
.open {
color: #ff0000;
}
以上の様な形となります。
変わったのは
『HTML』の<li class=”open”>サッカーボール</li>
『CSS』の.open {
この二カ所となります。
注意点は
・『class』は<>内に書くこと
・『class』名は名称なので【””】が必須
・何よりも『CSS』で指定する際の『class』名には【.「。」】を必ずつけなければならない
最後の項目は忘れやすいと思うので一番気を付けなければなりません。
また、
<li class=”open”>バスケットボール</li>
<li class=”open”>バレーボール</li>
.open {
color: #0000ff;
}
このように複数を指定すると複数の色を変えることが出来ます。
最後にもう一度言いますが、『CSS』で指定する『class』名には頭に【.】を付けなければなりません。そうでなければ適用されませんので。
『タグ』には不要ですが、『class』には必要と覚えておけばいいはずです。
以上が第二回目で学んだ全てとなります。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど」を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
