HPを作る(CSS編)

おはこんばんにちは、このページを作っては画像を挿入するときにデータが飛んで、、、を繰り返していたうぷ主です。ちょっと辛かったですね...

今回は前回作ったHTMLの基礎にCSSで見栄えをよくしていきます。今回の分まで予めHPを作っていたので解説もそれを追う形になります。前回よりは短いと思う...多分

では参りましょう、まず、CSSはなにかというと、前回まではHPを作るときにHTMLというコードを使って書いてきましたが、それだと文字とか写真がただ単にHP上に新しく置かれただけです。殺風景で下手したらすごく見にくいです。

そこでCSSを使ってもっと見やすく、見ていて面白いHPを作るためにCSSで装飾していく必要が出てきます。

前回場所を書きこんでいたのもどこを装飾するかをCSSが見つけるためです。CSSは基本的に別ファイルで書いてHTMLファイルにリンクさせていきます。

前回HTMLファイルを解説したときに<div class=""></div>に触れていなかったと思います。

このdivタブは複数のコンテンツをグループにすることでまとめて編集できるようにする機能を持ちます。divの後にclass=""とありますがこれはCSSファイルの参照です。もっと詳しくいうと、class＝"○○"の○○で指定した名前をCSSで.○○とするCSS内の○○内で書いたコードがHTMLファイルのclass="○○"とされた場所に反映されることになります。

実際に書き起こしてみたものを見ていきましょう。

本来やりたいことは絵の下に説明を追加しているということです。

このコードだけだとただ単に文章を書いているだけですけど、、

前回の復讐から行きましょう、pタグは文章をウェブページ上に出力するものでした。今回出力したい文字は<p></p>で囲まれた「library 3」という単語です。classタグの基本的な使い方は括弧内のタグの後に書き足すように記述するというものです。もちろん違う使い方もありますが、だいたいは括弧内のタグの後ろに書き足すことが多いです。CSSでの使い方は.(ドット)クラス名(先ほどの○○)でHTMLでいう場所(HTMLやCSSでいう場所は{}で囲ったところ)に反映させたいプログラムコードを記述していきます。ここで注意しなければいけないのが結構な頻度でCSS内で記述したことが反映されていないことがあります。これはなぜかというと、一つのclassに複数回違うコードを書くとどんどんコードが上書きされていくからです。例えば、下の画像でいうと、

画像の中間くらいの行にあるコード　text-align: left;　があります。このコードは文章を左に寄せる指示を出すコードですが、その後に　text-align: center;　と書いてしまうと実際に反映されるのは当然中央寄せを指示した　text-align: center;　になってしまいます。

今言った例ではすごくわかりやすいですが、実際にはこのことが場所を超えて反映されることもあり、指示するコードが反映されていない、原因がよくわからないということがCSSファイルではよくあります(もしかしたら自分だけかも(汗))よくあったのがulとliに反映させるコードの書くはずが、divに書いていて実際に想像と違うHPが出てきたり、どの場所に反映させるかよくわからなくなったりとかですね。一番時間を使っている気がします...

解決するにはgoogleで検索したり、コードの書く場所を変えてHPの変化を見ながら、反映させたい状態になるまでコードを書き換えることを繰り返すくらいですね...

そうやってできたCSSファイルの中身は下のようなものになりました。

コードの解説は以下のようになります。

background-color：コードを書いた場所の背景色を指定します。色の指定は色コードか直接blackなどのように指定することもできます。

display：コードを書いた場所にあるコンテンツをまとめて移動させます。コンテンツ間の間隔は同じ。配置の種類はgoogleで随時確認を。

align-items：コンテンツの配置を決めます。詳しい使い方はよくわからん。

padding：コンテンツ間の間隔を決めます。

margin：同じくコンテンツ間の間隔を決めます。paddingと違うのはコンテンツ間の間隔の認識の仕方です。画像で説明すると

こんな感じですね、正直あんまり気にしていないです。細かい調整には二つを使い分けていくようにはしています。あと、marginについてはmarginだけで間隔を指定するのと、marginにtopやleftのようにどの側面の間隔を調整するか指定できる場合があります。paddingについてはありそうだけど調べてない...位置指定のやり方は随時googleで確認を(二度目)

list-style-type：ulでコンテンツを並べたときに通常は箇条書きの状態で並べるので「・」がコンテンツの前に入ります。この「・」をなくすコードです。

color：文字の色を決めます。色指定の方法はbackground-colorと同じです。

font-size：文字の大きさを決めます。大きさを決めるときにいろんな単位が出てきますが、たいていはpxが使われているかなぁって印象です。

font-weight：文字の太さを指定できます。太さも同じように色々な単位がありますがよく使われているのがpxである印象です。

text-align：文章の位置を指定できます。

以上がCSSファイルで書いたコードの種類です。案外と少ないですね。

できたHPはこんな感じです

おおよそのHPができたらあとやるのはHP上のコンテンツの追加、HPの調整、HP中の画像や文字にリンクを作っていくことを目標にしています。リンクの応用として違うページに飛ぶようにもしたいですね。

今週分はここまで、研修で忙しいので次週はHPを作ってその進捗報告かもしれません。

とりあえず空いた時間で頑張っていくことにしています。

ではまた、おわりんぬ