僕は一応、生業はwebプログラマをやっているんだけど、どっちかというとサーバサイドエンジニアである。だからフロントエンドのあれやこれがそんなに得意というわけではない。
webプログラマってのはwebデザインからサーバ保守までフルスタックな全作業やる能力を求められる傾向がある。僕もまぁ、１０年以上はwebプログラマをやってきているのでweb開発に関わる仕事は一通り出来る程度のスキルは身についている。だけど、専門として得意なのはPHPによるサーバサイドで動くプログラムの開発であり、PhotoshopやらIllustratorを使って素材を作ったりとか、コーダーみたいなHTMLやらCSSを調整する仕事はそんなに得意じゃない。
だけどまぁ、僕はこの会社には最近入社したばかりであって、一番の下っ端である。苦手だからっつったて言われた仕事を逃げるわけには行かない。今日はイベント用のLPページを構築する仕事であった。レスポンシブデザインでmax-weight辺りでCSSで表示を切り替える様な静的ページを作るお仕事。プログラムを書くよりもhtmlやらCSSでイジイジするような作業が多い仕事だった。
前述したように僕はHTMLコーダーみたいな仕事もまぁ出来ないわけでもないわけよ。しかしまぁ、僕がwebデザインとかコーダーみたいな仕事をやっていた時期というのは、テーブルレイアウトが主流とかそういう時代であってCSS３とかSASSみたいなやつは全然勉強していないのよ。いや、僕は仕事としてはエンジニアで専業してきたんだけど、その立場から見てもHTMLコーダーって専門職よ？ セマンディックwebでSEO受けする構造化文書を作ったりとか、レスポンシブデザインでスマホとデスクトップの表示を両立させたりするとかはエンジニアには簡単にできることじゃない。
しっかしまぁ、僕の会社は中小企業だからいちいちこういうのを外注するわけにもいかんのですよ。だから、まぁ今日は言われたままにレスポンシブでのページを作成する仕事をしてたりしてた訳ですよ。やってみたけどやっぱ全然分からんな。調べながら作業を進めていた。
専門でやっているコーダーさんには初歩的なことで笑われるかもしれないけど、CSS3のflexible boxを使うと簡単にブロックの横並びが作れて感動した。僕は今まではいちいち、floatとかtable-cellでmarginとかpaddingを調整しながら横並びを作っていたのよ。flexboxはほとんど関数一つで均等に割り振られたブロックの横並びを作れるじゃないか。すげー。
だいたいこんな感じ。htmlから。
<div class="flex"> <div id="flexitem1"><p>flex item<br>1</p></div> <div id="flexitem2"><p>flex item<br>2</p></div> <div id="flexitem3"><p>flex item<br>3</p></div> <div id="flexitem4"><p>flex item<br>4</p></div> </div>
こいつに関してボックスの横並びを作る場合はCSSで次の様に指定する。
.flex { display: flex; flex-direction: row; justify-content: space-around; align-items: baseline; } .flex div { display: block; }
これで横並びが実現できてしまうのである。なんとお手軽。ブロックの均等割付を実現しようとおもうとfloatでは相当手こずる。table-cellだと比較的容易にできるけど、レスポンシブデザインにしようと思うとタグ付けが面倒くさい。
だけど、気をつけないといけないのはIE9・８は対応していないらしいのね。その場合flexibility.jsのライブラリで対応させるらしい。というか、スマホのブラウザではでいろいろと非対応のブラウザが混在しているらしくて、広くwebに一般公開するサイトでは非推奨な気がする。
しっかしまぁ、非推奨のブラウザにも対応させる書き方があるらしくて、一般的にはそっちの書き方がいいみたいね。
多分、現在の主流のフロントエンドとかやっている人からみたら本当に初歩的な事言ってるんだろうなーと思うよ。でも、知らないから情報は整理しとこうって意味で書いといた。休み明けには古いブラウザに対応させるようにコードを書き換えるのがTODOだ。
