組み込み系プログラマがCSSを触れてみる

初めまして、開発2GのTです。

ここの記事は1Gの人が多めに登場しているので陰に隠れがちですが、実はちゃんとあるんです、2G。名前だけでも覚えてもらえたらと思います。

さて、自分はC言語ばかりやってきた人間なのですが、異動に伴い最近Web系プログラムの一つ、CSSを覚えなくてはいけない事になりまして、Web系の知識と経験が豊富なドS上司の下、稽古をつけてもらっている次第です。

  1. CSSとは?
  2. CSSプログラムを作ってみよう
  3. 感想

CSSとは?

今更そんなこと言ってんじゃないよと思ったそこのあなた。読み飛ばしてもらって構いません。

対象としては、組み込み系ばかりやってきてWeb系の世界に迷い込んだ挙句、斜め上の課題を部下に与えてニヤニヤ楽しむの上司の下でWebの仕組みを学ぶ必要があるという方に向けた項目となります。

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略称でスタイルシートとも呼ばれます。

簡単に言えば、Webページのデザインをカスタムできる言語になります。HTMLやJavaScriptがWebページの要素や構造を設定できるとしたら、CSSはそれらに対してフォントを指定したり、色を付けたり、アニメーション付けたりと見栄えの設定を行う事ができる訳です。

なので、Web系言語はHTMLとJavaScriptだけ覚えれば良いと思ったらCSSやらデザインについても学ぶ必要が出てくるわけですね。つらい。

CSSプログラムを作ってみよう

では、簡単なCSSプログラムを記述してみましょう。 自分が今回上司に出された課題は、floatプロパティを使用して以下の画像のようなプログラムを作成することでした。

実行結果

では実際のプログラムは以下のようになります。 以下のサイトを丸パクリ参考にしました。

スタイルシート(CSS)の基本的な書き方【初心者向け】

プログラムを触ったことがある方なら、何となくCSSを見たことがなくても記述されている内容は理解できるのではないでしょうか。CSSの基本的な記述方法はこの様な感じだと思います。

HTMLプログラムのstyleタグの中身がCSSプログラムとなります。各idに対して色々指定しているのが見て取れますね。 今回の課題で重要な要素となっているfloatプロパティについて少し触れたいと思います。

参考サイトではブロック要素は1つしかなかったのですが、実行結果ではブロック要素が3つ用意されていますね。 divタグをただ3つ並べただけでは実は以下のようになってしまいます。

そこで登場するのがfloatプロパティです。 意味合いとして、要素を「浮かす」プロパティで、要素を浮かし方向を指定することによって要素を移動させる処理となります。

これがなかなか想像しづらく説明もしづらいのですが、頑張って想像してください。(丸投げ)

以下のサイトを参考にするとわかりやすいかと思います。

CSSの【float】についてちょっと本気出して説明してみた。

CSS floatを初心者向けに図で解説 抑えるべき注意点とは?

今回は、参考サイトでは禁じ手とされていた「overflow: hidden;」を用いてフロートの解除をしています。

上司はClearfixのが禁じ手だと仰っていましたが、どちらが正しいのかはわからないです・・・。

その後、marginプロパティによって要素と要素の間に空間を作り、画像のようなプログラムの完成です。

感想

CSSプログラムを作成して思ったことは、思いのほか不便だなということ。

作成前のイメージは、見た目を設定して、位置指定するくらいかなと思っていたんですが、制限と工夫によってなりたっているのだと感じさせられました。

世のWebプログラマーの皆さんは苦労しておられるのですね・・・。

簡単なプログラムではありますが今回の更新はここまでにしたいと思います。ありがとうございました。

料金表ナビゲーション 料金表ナビゲーション

おすすめ記事