アスパラガス日記

アスパラガスは根を育てるもの。明日に向けて自分の根を育てていく今日でありたい。今考えていることをブログに。

CSSが苦手だ。

f:id:asparadiary:20170924044420p:plain
このところCSSを書く機会が多いのですが、所々上手く表示できない部分があり、CSSの苦手意識を再確認しているところです。

CSSの難しさ

私がCSSを難しく感じるのは、一つの箇所に複数のプロパティを設定していかなければいけないところです。

たとえば、縦横100pxの緑の箱を作りたいと想定したとき、div要素とそのidをboxとしたときに、HTML/CSSは以下のようになります。

<div id="box"></div>
#box {
  width: 100px;
  height: 100px;
  background: green;
}

この場合だと指定するプロパティは横幅と高さ、そして背景色の三つにとどまるのでまだまだ理解が及ぶのですが、HTML構造がもっと複雑になってくると親要素や子要素の関係も考慮してプロパティを当てていかなければいけないので、手に負えなくなる部分が増えてきます。

苦手なプロパティ

私にはいくつか苦手に感じているプロパティあります。

position relative/absolute

嫌い度No.1はpositionです。
positionプロパティを上手く活用することができれば、表示したい要素を自分が意図する場所に配置することができます。
しかしながら、かなりの曲者で、私はこいつにくじかれるたび何度もググっては忘れるということを繰り返しています。

どこかのサイトで、CSS書けるようになったことを示す一つのポイントとして、HTML要素を自由に任意の場所に表示できるようになることが挙げられていましたが、本当にその通りだと思います。

いつか理解しきれるように、ちゃんと勉強したいと思います。

float left/right

苦手なプロパティとして思い浮かぶのはやはりfloatです。
近頃はflex要素を使うことが多いかもしれませんが、要素を2列表示や3列表示にしたいときにfloatを用いることがあります。

floatはpositionと比べれば苦手意識は多くはありませんが、たとえば2カラムのサイトを作ろうとしたときに、main要素を左に、side要素を右に配置するように設定したはずですが、なぜかfooterが細く短いsideエリアに流れ込むように配置してしまうというミスに遭遇します。

このミスは単に私がfloatさせる必要のない要素(この場合footer)にclearプロパティを書き忘れているから起こるミスではありますが、一つ設定して終わりではなく、次の隣接する要素にまで影響を与えてしまうプロパティは難しく感じます。

display flex/block/inline-block

HTML要素がblockなのか、inline要素なのかということを意識することが非常に大事だなとCSSでつまずくたびに感じるということもあり、displayなんちゃらは苦手な一つです。

flexという値は私がまだ使う機会が多くはないということもあり、その都度ググりながらどんな設定方法があるのか勉強している最中です。floatを使わなくても2列組や3列組またはそれ以上を簡単にデザインできるところは便利だなと感じています。

blockについては、わかっているような気がするけど、おそろくわかっていないそんなやつです。

私がdisplay: block;を使うときは、a要素に対してだったり、contentが空の::before、::after要素ぐらいに設定してような気がするのですが、他の方が書いたCSSコードを見ていると、もっと使用機会が多いように思うので、display:block;はもっと明示的に書かなければならないシーンが多いんだろうなと感じています。

シンプルでありながら底が見えない怖さを感じてます。

結局はCSS

Webサイトを作るときに思うのが、結局はCSSができないとダメだなということです。
趣味の範囲なので、誰かに依頼することなく自分一人で作るため、そのようなことに感じます。

Webサイトを製作するとした場合、本当に大変なのはむしろデザイン関係よりサーバサイドの構築ということになるのでしょうが、私はPHPやらRubyやらPythonなどJavaScriptも含め、CSSより全体を理解できる気がしないので、なおのことCSSができなければという気持ちになります。

しかしながら、CSSも私には難しく、これまで自分が作りたいと考えるWebサイトを作れたことはありません。

機能の面が作れないからこそ、せめてデザイン部分だけでも自分が思ったように表示したいと思い、「結局はCSSが…」なんて考えが浮かぶんだと思います。

終わりに

この記事を書く前はもうCSSなんて調べたくないし書きたくないなんて気持ちになっていましたが、記事を書き終える頃になると気持ちが落ち着き、もう少しだけ頑張ってみようという気持ちになってきました。

わからなくなる -> 嫌になる -> やめる -> 時間が経つ -> また始める

といういつものループであることはわかっているのですが、もう少しだけ勉強してみようと思います。