HTML
CSS

CSSをプログラム風に解釈したらアレルギーが治ってきた話

More than 1 year has passed since last update.


前置き

去年まではデザイン崩れが発生すると

「助けてデザイナーの人!」

だったのが、今では検証ツール開いて要素に適用されているstyleからなんとなく原因特定→修正まで出来るようになったので、そのコツの話。

それまでは周りの人にどうやったらCSSとか分かるようになるのか聞いてみるも

「世間のサイトとかを検証ツールとかで開いて、パラメータ変えてコネコネすればそのうち分かるよ。」

みたい事をアドバイスされ…

すぐに挫折orz

CSSへの興味や勉強モチベーションが低いと、ハードルが相当高いと感じた。

見た目も一般的なプログラム言語とは全く違うので、精神的に抵抗がかなりある。

裏ではこんな感じのプログラムが実行されているような感じ!

というイメージが持てれば、Webはあんまり触った事ないけどプログラムの基礎なら分かる、という人にはかなりとっつきやすくなるのでは、と思った。

以下自分流解釈。


HTML

『「ブラウザ」というアプリ』で画面を表現するための言語。

HTMLファイルの中で大きな区切りはheadとbodyで、C言語やJava的に言えば、headはheaderファイル、bodyはcファイルやjavaファイルに相当するものを記述するイメージ。

<html>

<head></head> <!-- → xxx.hに書いてるもの -->
<body></body> <!-- → xxx.c とか xxx.javaに書いてるもの、ここが表示領域 -->
</html>

bodyに記述したものが、画面に(ブラウザに)表示される。


タグ(要素)

大きさとか色とかもろもろのプロパティ(パラメータ)を持ったクラス。

divとかspanを記述する事は、divクラスのオブジェクトを生成するようなイメージ。

<html>

<head></head>
<body>
<div></div> <!-- divタグ -->
<span></span> <!-- spanタグ -->
</body>
</html>

これらは

new Div();

new Span();

みたいなイメージで、このコンストラクタはアウトプット(画面への表示)までセットでついてくる感じ。


ブロックとインライン

なんで改行されんだー!幅指定が効かねー!うがああぁぁぁあ!ヽ(#`皿´)ノ

ってなるときは、だいたいこのブロックとインラインのせい。

こいつらは何者かというと、要素が重ならないように画面上へ配置するために、要素へ設定されているタイプみたいなもの。

全部の要素が画面上の位置(0,0)で全て重なっていて、全ての要素に位置座標を記述しないといけないのは大変。

(もちろん全部の要素に位置座標を指定する事も出来る)

ブロック

要素が重ならないように、前の要素の下へ下へと配置される。

インライン

要素が重ならないように、基本は前の要素の右へ右へと配置される。

ブラウザの横幅的に入りきらなくなると、改行されるイメージ。

divはブロックの概念を持ったクラスで、spanはインラインの概念を持ったクラス、というイメージ。

下記のような記述をすると

<div>div</div>

<div>div</div>
<div>div</div>

<span>span</span>
<span>span</span>
<span>span</span>

こんな感じに表示される

divとspan.png

なので下記のようなdiv要素は

html

<div>test</div>

コード的に解釈すると

class Div{

public string value;

public Div(string value){
this.value = value;

// その他ブロック要素的な初期パラメータを設定する処理
// ~
// ~

// 描画処理
this.viewBlock();
}

private void viewBlock(){
// this.paramをブロック要素的に表示する処理
}

};

こんな感じのクラスがあって

new Div("test");

こんな感じで引数に「test」という文字を渡してるイメージ。


CSS(style)は要素のプロパティをいじるやつ

サイズを変えたい、色を変えたい、影をつけたい、といった要素(divとかspanとか)の見た目に関するプロパティを記述出来るのがCSS。

なので下記のようなdiv要素は

<div style="width:100px;color:#000000;">test</div>

コード的に解釈すると

class Style{

public int width;
public int height;
public string color;
// …
// 他にもborderとかbackgrand-colorとかいろんなプロパティを持ってる

public Style(string[] argStyle){
// argStyleをkey - value形式にして、keyに対応するプロパティに
// valueを設定していく処理
}
};

class Div{
public string param;
private Style style;

public Div(string arg , string[] argStyle){
this.param = arg;
this.style = new Style(argStyle);
// その他ブロック要素的な初期パラメータを設定する処理
this.viewBlock();
}

public void viewBlock(){
// this.styleの情報を元にして
// this.paramをブロック要素的に表示する処理
}
};

こんな感じのクラスがあって

new Div("test","width:100px;color:#000000;");

こんな感じで引数に「test」という表示用文字と、「width:100px;color:#000000;」というレイアウト用文字を渡してるイメージ。

styleの部分は、phpの連想配列的な方がイメージしやすいかも。


終わりに

だいたいこんな感じのニュアンスがピンとくるようになれば、

・ブロックでも次のブロック要素を右の方へ表示したい!

・要素を重ねたい!

みたいに、よく一般的なサイトで行われているような処理も、どのプロパティをいじればいいのか検討がつくようになるし、自分で調べて解決出来るようになるはず。