Help us understand the problem. What is going on with this article?

今更だけどCSSって何ぞや あとPHPってHTMLの中に書けるのに.phpってどういう意味だってばよ?


という方に向けてざっくりCSSとPHPを解説して行きたいと思います。



まあCSSがCascading Style Sheetsの略で、表示に関する記述って言うのは誰でも分かると思うんですが、じゃあCSSの中身はどういう仕組みになってるの?という問いに対して答えられる人ってIT人口の何割なんだろうねって気がします。

HTMLに関してもPHP使うなら必修だと思うけど、pとかaとかimgとか、主要なタグさえ覚えればheadの中身とか理解しなくても使えてしまったりするので「今更HTMLとかなぁ~」って思ってる人こそ勉強してみると楽しいと思う。

あと分かってるとは思うけど、仕組みと言いつつ低レイヤーの話はしない(出来ない)のでCSガチ勢の方は帰ってどうぞ。



CSSの役割とは何ぞや



これに関しては長々と解説するより実例を見てもらった方が早いでしょう。

Qiita.png

みなれたQiitaのトップページはCSSを抜くとこんな感じになります。HTMLのお仕事はテキストとそれに付随するコンテンツを規定するだけなのでまあ当然ですね。

ここからCSSの魔法をかけて一気に現代的なサイト表示を作り上げていきます。


色やサイズ、位置の調整

これは簡単で、対象を指定して『プロパティ:パラメータ;』と書いていくだけで勝手に表示が変わっていきます。便利ですね。

まあこれだけだとざっくりし過ぎな気もするので簡単な例を書いておきます。これさえマスターすれば君も今日からフロントエンドエンジニアだ!()

body{
color:white;  /*文字色の変更*/
}

.huga{
float:left; /*要素を左から横に並べる*/
}
.hoge{
padding :10px 30px ; /*要素の内側に指定幅の余白を取る*/
background-color: #FF0000; /*背景色の変更*/
color:#FFFFFF;
position: relative; /*位置プロパティを『相対』に指定*/
top:29px; /*上側を指定幅ずらす*/
left:34px; /*左側を指定幅ずらす*/
}

/*基本要素全てまとめようと思ったけど想像以上に面倒かったのでこれで許して
ちなみにfloatとpaddingとmarginとposition辺りを使いこなせれば位置調整に困ることはないはず
:hoverとか:actionとか使えばオサレな表示も思いのままゾイ 詳しくはググってどうぞ*/




適用範囲の指定方法は。

これも非常に簡単でHTMLのタグ内でclass="(クラス名)"を宣言してCSS側で.(クラス名)と指定すればそれでOK。一応IDに被せるやり方もあるけど、JS使いに怒られるらしいのでやめた方が無難。QiitaのCSSもclassで書いてるのでまあ指定がない限りclassで書けば良いんじゃないかなって気はする。

ちなみに.(クラス名)の後に要素名を書けば指定範囲を要素だけに限定できるぞい。あとbodyはクラスでは無いので.を付けなくても良かったりする。

body {
font-family: 'Arial';   /*フォントの指定*/
}

.hoge h1{/*H1タグのみに範囲を指定*/
color:red;
}



このようにとってもとっても便利なCSSだけど、ただ1つ気をつけないといけない点があって実はどんなに雑に書いても動いたりする。

要素指定の重複はもちろんOKだし、書く順番もごちゃごちゃでOK、クラス名をタイポしてもエラーは吐きません。だからまあ………………CSSぐらい楽勝でしょってノリで書くと多分その先は地獄なんじゃないかなって思ったりもします。



PHPってHTMLの中に書けるのに.phpってどういう意味だってばよ?


まあ結論から言ってしまうと、HTMLとPHPを使って.htmlの設計図を記述するのが.phpです。コンテンツを表示する場合は、サーバー側が.phpを処理してクライアント側に.htmlを送信します。バックエンドですね。

文法の解説はここではしません。参考書の劣化コピーになりそうですし、何より面倒いので………………

特徴を上げるとすれば良く出来た言語だと思います。WEB系の言語としては最近RUBYに食われつつある感じはありますが、RUBYって学習コスト高くない? 

railsさえマスターすればOK!みたいな言い草で語られるけど、1つの技術に依存すれば需要が落ちた時買い叩かれるのは明白だし、いざ2つ目のスキルを考える段階でもRUBYとのマルチランゲージを考えると適切な言語が存在しない。強いて言えばPythonか???



………………話が逸れましたね。

後は何の話をしましょうか。技術的な面と言っても自分は入門書を数冊読んだだけのレベルなのであんまり深い事は言えなかったりする。まあ動的型付けや配列サイズが不定なのって便利だねと思ったり、Javaとは一味違う方法でオブジェクト指向を実装するのも中々楽しいです。

という訳で最後に一言

   みんな‼ PHPやろうぜ!



Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away