プログラミング初心者、【Sass FLOU】が便利すぎることを知る【ウェブカツ】

ウェブカツプログラミング学習

どうも!ウェブカツでプログラミング学習をしだして早9か月目に突入しました。本当に早いもんです。毎日自分の理解の浅さに嘆く日々が続いております。

それでも、プログラミング学習をスタートしたときに比べたら、エラーが何を言っているかがググらなくてもわかるものが出てきたり(あくまで少しだが)、ド文系のこんな私でも少しは進歩している

そして その進歩を加速させたのは他でもない「ウェブカツ生徒同士協力して行う共同開発」に参加しだしてからだ。作るべきウェブサイトのテーマをいただき、全ての機能ページやデザインなどもすべて生徒で組み立て、デザイン部分だけ外部のデザイナーさんに依頼する。

裏側(PHP他)のプログラミングを完成させてから、外側(HTML、CSS)のプログラミングに取り掛かるのが今回のフロー。ついに外側に取り掛かりだしたのである。共同開発になって初めて、CSSの進化版(?)、Sass、FLOUという考え方を使いだした。

今まで「わざわざそんなんせんでも、CSSで書けば楽なのに。。。と思っていた私。でもそうではなかったのだ。プログラミング素人なりの便利だと思った理由を説明したいと思う。

これまでのプログラミング学習ブログはこちら

プログラミング初心者の学習記録

CSSはSass、FLOUを使う方がいい理由とは

question

CSSとは、見た目を構築していくのに絶対必要な言語であり、LPだけ作るようなプログラミングをするにしても外せないものである。

CSSで見た目を作っていく場合、それぞれの箇所に名前がついているので、その名前(クラスやIDなど)を呼び出し、それぞれ幅(width)だったり、高さ(height)だったり、背景色(back-ground color)だったり、文字色や位置の指定をしていく。

例えばある正方形(class=”square”)の背景色をピンク、文字色を青、幅200ピクセルの縦300ピクセルに設定したいとする。CSSでその設定を書くのであれば、このような形になる。

CSSコード

.square{

width: 200px;

height:300px;

back-ground: pink;

color:blue;

ですが、 Sassを使うとなると、あらかじめ必要なサイズの設定をそれぞれのファイルでしているので、それをクラス名として追記すればいいだけなんです。

全てがごちゃごちゃするとプログラミングがしにくいので、カテゴリに分けてファイル化します。それがFLOUという考え方。FLOUに関する詳しい考え方はこちらのページを参考にしてください。

それぞれに例えば下記のような情報を設定して置いたら、あとは呼び出すだけ。

SCSSコード

$space_m: 200px;

$space_l: 300px;


$blue: #0000ff;

$pink:#ff00ff;


.blue{

color: $blue;

}

.pink{

back-ground : $pink;

}


.u-width_m{

width: $space_m;

}

.u-height_l{

height: 300px;

}

呼び出すのはクラス名に指定するだけなので、これで先ほどのCSSと同じ情報が入ります。

<div class=”square u-width_m u-width_l pink blue”>

</div>

今回はそれぞれの指定は一つずつしかしていませんが、設定にはいくつもいつものCSSのように設定ができます。

SASSは使い慣れれば実は便利

one

だんだんSASSのクラス名を使い慣れてくれば、すぐにクラス名に指定をできるので、実は便利です! 複数人で開発するにおいては確実に必要ですよね。それぞれがCSSファイルを作ってしまってはバッティングが起こるし管理が大変です。

環境設定が最初少し厄介でしたが、ググりながらやればできます。CSS苦手意識ある人も、いっそSASSをさっさと学んで、使う練習してしまってもいいと思います。

これからプログラミングを学習する人へ:共同開発は非常にいい経験、勇気を出して参加してみるべし

ウェブカツでは今共同開発に応募するボタンが追加されています。(部員のみ)。なので、現役ウェブカツ生はぜひやってみてほしいです。もちろん責任も伴うし、そればっかりでなかなか学習の方が滞ってしまうのも事実ですが(もちろん人によります。)

私はウェブカツ女性割引という制度を利用しプログラミングを勉強させてもらっています。目標は3月には学習終了することです。共同開発も1月中には提出まで行きたいところ。。。

でも非常にいい経験を積めるので、ウェブカツというプログラミングスクールはプログラミングを学ぶ候補として入れることをお勧めします。無料体験入部もできるので、ウェブカツのHPを見てみてください。

 

ABOUTこの記事をかいた人

取り柄=英会話。【毎日が楽しい】人生を追い求めて2●年。【職歴】海外営業→英会話講師→広告営業→事務で今に至る。【仕事=楽しい】を探し続けた結果、ライターになりたいことに気付く。現在は会社員の傍らブログの更新、ライターとしても活動しようと模索中。 決断に困ったときは【1年後死んで後悔しないか?】自分に聞く。