二回目－－『CSS』、色の指定『color: カラーコード;』、大きさの指定『font-size: 数値px;』、種類の指定『font-family:フォント名;』－－
今回は『文字』に関することです。
WordやExcelではよく使う機能をプログラムで表していく方法となります。
第一回目では
●HTML&CSSについての説明
●<h1>○○</h1>という『見出し』、数字の意味(大きさ)
●<p>○○</p>という『段落』、文章を改行する
●<a>○○</a>という『リンク』
<a href=”url”>で『URL』先へ飛ぶ事が可能
●<img src=”url”>で『画像』を表示
※『href』はページ自体に、『src』はページの一部に関連する
●リスト項目の<li>、『・』で表す<ul>、『数字』で表す<ol>
テキストを有する『終了タグ』には【/】を使う
URL等には【””】で囲むこと
空白を作り、字を下げ読みやすいようにするなど注意点
以上が学んだこととなります。
今の段階で私が感じている実感は、
『サイトで学び、課題を熟し、同時にコピー用紙に写し、なろうを利用して復習してもきっちり覚えられるものではない』
ということです。
元々記憶力が良い方ではないので学生時代の暗記物はテスト週間中に難解も書いて覚えていました。苦痛ではあったのですがそうしないと覚えられませんし、点も取れないのでやらないといけない方法でしたね。今ではいい思い出です。
そんな経験があるので、このプログラミングも何度と打ち込んで覚えて行こうと思っています。まあ、当時と異なり意欲とモチベーションは高いので持続することが出来れば目的・目標の達成も出来ることでしょう(願望)。
それでは第二回目を始めていきたいと思います。
今回は『CSS』について学んでいきます。
以前にも言いましたが、『HTML』……
この単語を聞いたことのある人は多く、説明できる人は少ない。
では『CSS』……
殆どの人が聞いたことがないのではないでしょうか。
疎いだけかもしれませんが、かくいう私も知りませんでした。
そこで詳しく調べてみた所納得できる内容が分かりました。
『HTML』とは【Webページを作る為の言語】
『CSS』とは【色、大きさ、配置等をデザインする言語】
ということです。
分かりやすく説明すると
『HTML』で文字や画像の表示を指定し
『CSS』で文字の色や大きさ、画像の配置を決め、Webページやサイトのレイアウトを整えるということ。
即ち、部屋の模様替えをして華やかにしましょう、ということですね。
模様替えなんてしたことないですけど。
それでは早速触れてみます。
１．『HTML』と『CSS』のファイルは別
エディタを起動して試すと分かるのですが、『HTML』のファイルと『CSS』のファイルがあります。タブが違うので分かると思います。
問題は『エディタ』って何？
『ファイル』ってあの書類を挟むやつ？
『タブ』ってタグの間違いじゃ……という疑問です。
私は思いましたね。
上記の単語は聞いたことはあるんですよ。
ですが、詳しい意味や用途までは分からず、『HTML』の話と同じ感じでした。
私自身あまり理解できていないのですが、調べて纏めてみました。
『エディタ』＝どうやら文字専用の編集ソフトらしいです。
プログラムを書き込む画面ですね。
『ファイル』＝今も使っている画面の事です。
ただ画面全体ではなく画面の枠のことのようですね。
『タブ』＝開いているページの名前なりが書かれたもの。
ファイルの上部にある奴で、ファイルを増やすと増えていく切り替えできるボタンですね。
ウィンドウ→ファイル→タブという順でしょうか。
それを踏まえて次に続きます。
２．『CSS』で文字に色を指定する
Wordで色を付けたいなら、文字をドラッグして「ホーム」の「フォント」にある「フォントの色」というボタンを押せばいいだけです。
これをプログラムで行おう、ということですね。
『CSS』＝色、大きさ、配置等を指定するプログラム
『HTML』で書き込んだプログラムに対して
【どこの】
【何を】
【どうする】
を指定するということです。
ビジネス用語の「5W1H」と同じようなものですか。
では、先に例から書きます。
『HTML』――index.html(ファイル名)
<h1>新世界の神になる</h1>
『CSS』――stylesheet.css(ファイル名)
h1 { ※【{}】必須
color: red; ※【:;】必須
}
意味
【どこの】＝h1(新世界の神になるの)
【何を】＝color(色を)
【どうする】＝red(赤にする)
これで今までは黒一色だった文字『プログラマーになる』が、赤色で表示されるということです。
※ファイル名は自動で決まるようです
※『stylesheet』というのはCSSのSSが該当します
※【{}(Shiftキーと「と」「む」】で括ることを忘れないこと
※『color』の後は【:(コロン、「け」)】
『red(指定色)』の後は【;(セミコロン、「れ」)】を忘れないこと
また、全ての色を英語で表すのは困難な為、基本的に主要な色(赤や青)以外は16進数のカラーコード……と言ってもなんやそれ？ ですよね。
分かりやすく言うと、日常で使う『1～10』を10進数と呼び
そこに5を加えた15を【全て1ケタ】で表したもの16進数と呼びます。
そして、それ以降が10～となり、19以降は1Aとなりの繰り返しです。
1、2、3、4、5、6、7、8、9、A(10)、B(11)、C(12)、D(13)、E(14)、F(15)、10(16)、11(17)、1A(26)、31(1F)……ってな感じです。
まあ、カラーコードは調べたら普通に出てきますし、色をコードで言う人は専門の人ぐらいなので気にしないで構わないでしょう。私も知りませんし。
以上が文字の色の付け方となります。
因みに、前回豆知識として書いておいた表示されないテキスト
<!-- -->ですが、CSSにも/* */として存在します。
/*文字の色は赤*/
とでも書いておけばカラーコードを忘れても大丈夫ですね。(【*】はShiftキーと「け」(コロンと同じ)で打てます)
名称は『アスタリスク』、学戦のラノベと同じです。
それでは次に『大きさ』について学びます。
３．文字の『大きさ』を指定する
色を変えた時と同じく『CSS』の『stylesheet.css』ファイルを使用します。
文字の大きさ＝font-sizeで変えます。
英語はそのまま直訳で良いですね。
大きさの単位は【px】
ピ○シブでもピ○シルでもなくピクセル。
まずは例から
例
『HTML』
<h1>新世界の神になる</h1>
<p>ゲームを作る、それが俺の文道だ</p>
『CSS』
h1 {
color: #ff0000; ※【{}】必須
font-size: 10px; ※【:;】必須
} ※【px】単位
p {
color: #00ff00; ※【{}】必須
font-size: 50px; ※【:;】必須
} ※【px】単位
意味
<h1>の『新世界の神になる』が赤色(＝#ff0000)となり、10pxの大きさで表示されます。
<p>の『ゲームを作る、それが俺の文道だ』が緑色(＝#00ff00)となり、50pxの大きさで表示されます。
注意すること
『終了タグ』の【/】と同じく『※』を忘れないようにすること
此処まで来ると、私自身もかなり混乱してきました。
最初にも言いましたが、やはり覚えるには『書く』、『言う』、『考える』の三つが必要です。苦手な科目は覚えられずともゲームの難しい用語はすんなり覚えてしまうのは、書いてはいないですが『何度も見る』、『何度も言う(聞く)』、『何度も考える』からだと思います。
それでは、今回最後の種類について始めます。
４．文字の種類を指定する
はい、種類と聞いてなんじゃらほい、と思ったことでしょう。
答えは『明朝体』や『ゴシック体』のことです。
これもWordなどを使う人なら分かることでしょう。使わずとも本や書類を見比べたら文字の「書体」が異なっていると分かるはずです。
その「書体」を指定して文字を決めよう、となります。
上記二つと同じく『CSS』の『stylesheet.css』ファイルを使用します。
文字の種類＝font-familyで決めます。
直訳すると文字の家族になるのですが、これは調べてもよく分からないので全ての文字(家族)と思えば良いでしょう。
これも同じく『font-family』の後に【:フォント名;】という形になります。
例
『HTML』
上記(３)の物を流用します。
『CSS』
h1 {
font-family: serif;
}
p {
font-family: “Avenir Next”; ※
}
基本的な注意点も同じです。
【{}】、【:;】を忘れないこと
『h』や『p』の指定も忘れないこと
そして、フォント名に空白がある時は【””】を用いること(※)
特に最後の注意点についてはしっかり覚えておかなければならないでしょう。
以上が今回学んだことの一部となります。
いろんな単語は用法が増えてきたため混乱は必須です。
しかし、必ずしも暗記して覚える必要はなく、こういう時はこんな感じのプログラムだからと記憶しておけばいいと思っています。記憶していればゲームやアプリが作れるわけでもなく、結局は小説と同じく作れなければ意味がないのですから。
それでは、次回は画像の大きさや背景の色について学んでいきます。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど」を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
