Hatena::ブログ(Diary)

Webデザインの日々日記 RSSフィード

2017-01-19

flexboxやcalcを使いつつ、IE8までサポートしたCSSフレームワークを作りました。

以前komitsuboshi-cssというCSSフレームワークを作ったのですが、

  1. コーディングで楽したい一心で機能付けすぎた
  2. 使ってみると付けた機能が地味に使いにくかった
  3. 結局グリッドシステムの方を中心に使っていた
  4. WordPress対応にしたのはいいが、ランディングページなどを作るには無駄なコードが気になった。
  5. バージョン1に上げ辛い…

ってな感じで、半年ほど自分で運用してみた結果、機能をぐっと絞ったほうがWordPressにも転用しやすいという結論に至り、グリッドシステムの部分だけ独立させることにしました。


そうして作ったCSSフレームワークがこちらです。

GitHub - akinori-kawamitsu/lecss: CSS grid framwork. Using float, flex, and calc. IE8 supported.

IE8までのゾンビブラウザに対応させていることから、名称を、LECSS(Legacy CSS)としました。

「今時IE8とかふざけてんのか?」

という声が聞こえてきそうですが、実際1年前に東証1部に上場しているグローバル企業のサイトリニューアル案件に参加したとき、「HTML5、ただし社内の偉い人がXPのIE8で見るからそれでも崩れない程度に。」という頭のおかしい要件だったので、このIT後進国ニッポンではまだゾンビに遭遇するかもしれないことからサポートに入れています。Win10+IE11開発者モードでの確認ではありますが、ゾンビブラウザに遭遇した場合の武器としてある程度使えるはずです。


Vista+IE9も今年の4月にはお亡くなりにならなければならないはずですが、どうなるんでしょうね。

こちらも、flexboxでよく使われる“横並びのボックスの高さを揃える”条件に対してはjQuery.matchHeigt.jsを使ってモダンブラウザと同様に表示されるようにしています。


ゾンビ対応以外の特徴について

そこそこ軽量

IE10以下を全部切り捨てた場合、使うCSSファイルは3つ、jsファイルは1つで、合計62kBです。

Bootstrapなどのてんこ盛りフレームワークに比べれば十分軽くなっています。さすがにPure.cssなど、軽量を売りにしてるフレームワークには惨敗します。

ほとんどグリッドシステムでしかない割にはサイズが大きいですが、その分細かい調整ができるようになっています。

グリッドは12+2

12分割のほか、5分割、7分割も使えるようにしています。

Bootstrap風のグリッドネーミング

学習コストを下げるために、col-**-12(12グリッド)、col-**-1by5(5分割)、col-**-1by7(7分割)という感じでグリッド名を付けています。

でかすぎないブレイクポイント

Bootstrap3などで不満だったのが、最小のブレイクポイントが640pxと、大きすぎることでした。640pxでスマホと同じ構成というのは冗長な感じで使いにくさを感じていました。Bootstrap4では544px、768pxにブレイクポイントが設けられて使いやすくなりましたね。

LECSSではブレイクポイントをデフォルトで470px, 768pxの2つに設定しています。それぞれ col-sp-**, col-tab-**, col-pc-** というグリッドのネーミングになります。Sassを使えば、これらの値は簡単に変更可能です。(変数はすべて_parameter.scssにまとめている)

またcontainerの最大幅はデフォルトで960px。これも_parameter.scssで変更可能です。

手抜き用グリッドも用意済み

グリッド名の -sp-, -tab-, -pc-といったターゲットメディアを付けないグリッド名を用意しています。

例えばグリッド名にcol-4としたとき、pcサイズでは3カラム、tabサイズでは2カラム(等分割)、spサイズでは1カラムで表示されます。

クラス名にsp,tab,pcのカラム分けをいちいち書く手間を省いています。

ファイルサイズが肥大化した原因の一つがこれです。

グリッドの親のクラス名を変更するだけでレイアウトをfloat,flexに切り替え可能。

Bootstrap3のrowにあたるクラス名をfloat, flexなどとしています。

子要素のfloatプロパティの指定よりも親要素のflexレイアウトが優先されるのでflexboxレイアウトの取り扱いが簡単になります。

グリッド間にmarginがある。

BootstrapもFoundationも、グリッドレイアウトではmarginを完全に殺しているのが個人的には不満でした。グリッドに背景を付けるとき、ボックスを入れ子にしないといけないのもあまりクールではないという印象を持っていたので、制作にあたってはmarginを入れてました。

これを実現するために、グリッドのwidthにはcalcを使っています。(calcを使えないIE8では%指定に書き換えています)

逆にmarginを付けたくない場面も出てくることがあるため、float-nm, col-**-**nm というクラスも用意し、マージンなし(no-margin)にも対応しています。

右詰、左詰め自由自在

floatレイアウトでは基本的に左からグリッドを詰めていますが、col-**-***r と末尾にrを付けるとそのグリッドは右詰めになります。

同様に、親要素にflex-rを使うと、右詰めのflexboxレイアウトになります。

margin, paddingの値をメディアクエリごとに変更できる

グリッドレイアウトでも、余白を広く取ると印象的なデザインにすることができます。

一方、広すぎる余白は狭い画面では見にくくなります。

両方を満たすため、margin, paddingの値を各メディアクエリごとに設定できるようにしました。

他の軽量フレームワークに比べてファイルサイズが肥大化している主な原因はこれです。

画像サイズが自動でいい感じになってくれる。

floatを設定している画像は、グリッド内に配置されていない場合、親ボックスの50%を最大値にしています。

そうすることで、画面幅が中途半端に狭くなった時、回り込んでいる文字が1行数文字しかない、というあまり美しくない状態を回避しています。

ただしこの設定はspサイズでは解除され、回り込んだ文字は画像下に配置、画像の最大幅は100%になります。

画像にキャプションも付けられる

WordPressなどで見られる画像の下にキャプションを付けるあれを実現するクラスを作っています。詳細はreadme.mdを読んでください。

youtube, googlemapの埋め込み用クラスを標準装備

使用頻度がやたら高いので入れています。

それぞれの埋め込みコードをyoutube, あるいはgmap というクラス名のdivでラップしてあげるとレスポンシブになります。

メディアごとに表示、非表示をコントロールできるクラスを用意

地味に使う機会が多いのでこれも。

クラス名にsp, tab, pcと入れると、そのメディアサイズでのみ表示されるようになります。

tab-none, pc-noneでは逆にそのメディアサイズ以上では表示させません。モバイルファーストなので、sp-noneはありません。(全画面サイズで表示されなくなるため)

設計思想とか経緯とか

グリッドシステムの作り方とかは、Bootstrap3から多くのことを学ぶことができました。「Bootstrapすげぇ」の印象は今も変わりません。

一方、実際に使うと微妙に使いにくい、というのも感じていました。2案件くらいBootstrapを使ってみましたが、その後はもう使っていません。ボタンなどのスタイルはほとんど上書きしますし、使わない機能もてんこ盛り、CSSファイルが大きくて読み込み時間の無駄が気になるなど。結局Bootstrapのグリッドの作り方を真似てグリッドを作る、という形で取り込んでやっていました。

Bootstrapは、CSSを知らない人が使うにはよいけれど、個別にデザインや装飾を作り上げるウェブデザイナーにとっては使いにくい、と私は判断しています。

その一方で、セマンティックなネーミングなど、学ぶものも山ほどあり、一度は使ってみたりコードを読んだりすべき優れたプロダクトでもあります。

先の「XPでIE8」というひどい案件は、同時に膨大なページ数の案件でもありました。その時の経験から、これだけの機能があれば大概のレイアウトに対応できる、という見通しができ、CSSフレームワークの作成に踏み切りました。機能面で欲張って最初に作ったkomitsuboshi-cssです。こちらはいまだ開発段階です。

そこからグリッドだけ抽出したことで、リリースに至りました。説明も充実させることができたと思います。

グリッドシステムに関しては、「痒いところに手が届くやつを」というのを目標に作っており、半年ほど使っていますがこの目標はほぼ達成できていると考えています。

2016-12-25

ウェブデザイン技能検定2級取得しました

当該資格について

ウェブ屋の国家資格です。

ウェブデザイン技能検定

書店に行くとサーティファイのウェブクリエイター能力認定試験の方が関連書籍が多いのですが、求められる知識レベルは

技能検定3級<サーティファイ(上級/エキスパート)<<技能検定2級

って感じですね。サーティファイの方は範囲がコーディング関連に集中しているのが特徴です。


技能検定の2級を持ってたら即戦力になるのかどうかという点に関しては少々不明です。コーダーとしての能力を証明するというより、フロントエンド関連の幅広い知識の証明するものではないかと思います。

今のコーディングのスタンダードはこういう試験を超えたところにあり、実力を示せるのはあくまでも実績と経験。実務経験がないと取りにくそうな一方で、既に職を得ている人が取得してもあまりご利益はないのがちょっと残念なところですね。

背景とか

職業訓練で3級をとって以降、あまり必要性を感じていなかったのと、ある程度JavaScriptができるようになるまでは挑戦できる資格ではなかったので今までスルーしていた資格です。今回は1級を目指すための前段として2級を取りました。

感想とか

ウェブデザイン業務に関するものを浅く広く、というのがこの検定試験の特徴ですが、まさか5Sが問題に出てくるとは思いませんでした。これ製造業とかある程度の規模を持った会社に勤めた経験がないと知る機会は少ないんじゃないかと思います。

2級は管理職向けの側面もあるらしく、労働環境関連のJIS規格や労基関連も出題範囲に入ります。今回はそれが5Sだったんでしょうね。


アフォーダンスの問題もありましたね。ただ、アフォーダンスは物が提供(アフォード)している機能のことであり、今回の設問にある、操作を誘導するデザインはシグニファイアと呼ぶべきではないかと思います。まあ、大事なのはこれらの概念を知っているかどうかであり、言葉にこだわると別のリスクをはらむ*1のでこれでよいのかもしれませんが。


実技試験では、時間不足に陥りましたが、それ以上にのどの渇きの問題がありました。普段、頻繁に水分を取りながら仕事しているのですが、2時間の間それができないというのはそこそこストレスになりました。

次の目標は1級

1級になると試験範囲にバックエンドが入ってきますので、こちらはフリーランスとしての箔付けにはよいと思っています。簡単に言ってますがプログラミングをガンガンできるようにならないと難しそうです。頑張ろう。

そういえば少し前まで、何とかスタックとか言って何でもできる人材が必要ダーって話題がありましたけど、そういうのを測るにはちょうどいいような気がします。

*1:中身を知らずにアフォーダンスではなくシグニファイア、と覚えちゃってる人もたまにいる。

2016-11-07

WordPressプラグイン PS Disable Auto Formatting は削除すべき時期に

WordPressのビジュアルアエディタ、TinyMCEのおせっかい機能(勝手にpタグを入れたりbrタグを削除したり)を停止させてくれる優れたプラグインでしたが、TinyMCEの仕様変更で機能しなくなっていました。

ちなみに同様の機能を持つ各種のプラグインも軒並み、おせっかいの停止機能に不具合が生じるようになっています。(有効にしているとビジュアルエディタとテキストエディタの切り替えができなくなるトラブルに見舞われる)

そのため導入していたサイトのほとんどでこのプラグインの機能を停止させていたのですが、本日プラグインサイトを見ると、更新が2年前から止まっていました。

PS Disable Auto Formatting — WordPress Plugins

いつか復活するのでは? との望みを捨てきれずにいましたが、更新停止が1年を超えてくるとセキュリティ面の不安が生じます。

優れたプラグインを提供してくれた開発者さんに感謝しつつ、現在入れているサイトから順次削除していくことにしました。

2016-11-06

ウェブデザイン技能検定2級対策:フォーム

普段コーディングしていて、実はform周りはあまり使う機会がありません。WordPressとかだと、プラグイン使っておしまいですからねぇ。。。

で、このformが実技に毎年出ています。内容はほとんど同じなのでこれを機会に勉強してしまおうというのが今回の記事の趣旨。

下準備

XAMPPを使っているので練習はhtdocsフォルダで。

htdocsに新しいフォルダを作って、そこで取り扱いを覚えます。

エディタDreamweaverを使用。

新規フォルダ内に index.html と form.phpを作成。

試験問題の中身としては、

  • form のactionとmethodの指定
  • inputのタイプの適切な選択(text, password, hidden, mail, radio, checkbox, submit, reset)
  • textareaの設定
  • selectの設定と配列での送信
  • valueプロパティ(初期値)の取り扱い

あたりが出題範囲。

以下復習。

form

<form action="form.php" method="post">
</form>
form

送信するデータの入力エリア

action

データの送信先。ここではform.phpに入力したデータを送信する。送信されるデータは$_POSTあるいは$_GETのスーパーグローバル変数に入っているので、受け手のPHPプログラムはデータをこれらの変数から取り出す。

method

postまたはget。通常はpost。GoogleMapなどデータをURLに追加してやり取りする場合にgetを使う。

enctype

デフォルトでは指定不要だが、フォームからファイルを送信する場合は、enctype="multipart/form-data"を指定する。

label

<label for="name名">ラベル名</label>

name名のinput要素に対するラベル。for=""で対応するinputのname名を指定することで、ラベル名をクリックしたときに入力エリアにカーソルが入る。アクセシビリティを高めるためこの関連付けは大事。

検定試験では送信する各パラメータのタイトル名を入れる。

input

<input type="type名" name="name名" value="初期値" size="">
name=""

action先に渡す変数に入れるキーの名前

name, tel, user, emailなど、分かりやすいものを入れる。検定試験ではHTTPリクエストインターフェイスに指定されている文字列を使用する。

配列を入れたい場合は、name="name[]"として入れるか、name="name[0]" name="name[1]"…のように配列番号を入れる。

[]内に番号を入れない場合は最初に出てきたものから順番に0、1、2…とキーが割り当てられる。

value=""

inputの初期値を入れる。textであれば入力フィールドに最初からその文字が入る。

size=""

入力フィールドの長さ(文字数)を指定する。省略可。

type="text"

1行テキスト入力フォーム

type="mail"

メール専用のテキスト入力フォーム。メールアドレスのフォーマットではない文字列の場合、ブラウザの方で勝手に警告を出して拒否してくれるので便利。

type="password"
<input type="password" name="" size="" maxlength="">

パスワード入力フィールド。入力した文字が伏字になる。maxlengthで最大文字数を指定することができる。

type="hidden"
<input type="hidden" name="" value="">

ユーザーが入力する必要のない情報を送信するための非表示フィールド。value値必須。

type="radio" value=""
<input type="radio" name="name" value="選択肢1" id="radio1" checked><label for="radio1">選択肢1</label>
<input type="radio" name="name" value="選択肢2" id="radio2"><label for="radio2">選択肢2</label>
<input type="radio" name="name" value="選択肢3" id="radio3"><label for="radio3">選択肢3</label>

ラジオボタンを設置する。

label for=""の値に対応するのはidになるので注意。

どちらかというとinputごとlabelで囲むとこれらの指定が省けるので楽。

排他選択になるため、nameの値はすべて同じものにする。

value値は必須。

checkedを付けたラジオボタンは初期で選択された状態となる。

type="submit" value="送信"

送信ボタン

type="reset" value="リセット"

リセットボタン

type="file" accept="MIMEタイプ"

フォームでファイルを送信するときに使う。

※Edge,iOS Safari,iOS Chromeは対応していないため、試験問題として出る可能性は低いかもしれない。

textarea

<textarea name="" rows="" cols=""></textarea>
name

action先に渡す変数に入れるキーの名前

rows

行数

cols

select

<select name="" size="">
<option value="" selected>選択肢1</option>
<option value="">選択肢2</option>
<option value="">選択肢3</option>
</select>
name

action先に渡す変数に入れるキーの名前

size

デフォルトは1。指定した数字がリストボックスの表示行数となる。

option

選択肢。選択肢の数だけ列挙する。

value

送信値。選択肢の文字列をそのまま送信する場合は指定不要。

selected

デフォルトで選択される選択肢に対して指定する。

正しく送信されているか確認

送信側(index.html)のフォームのコード

※selectのオプションは一部省略。

<form action="form.php" method="post">
	<p><label for="name">名前</label></p>
	<p><input type="text" name="name"></p>
	<p><label for="mail">Emal</label></p>
	<p><input type="email" name="mail"></p>
	<p>日時</p>
	<p><label><select name="date[0]">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	</select>月</label>
	<label><select name="date[1]">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	</select>日</label>
	<label><select name="date[2]">
	<option>0</option>
	<option>1</option>
	<option>2</option>
	<option>3</option></option></select>時</label></p>
	<p><label for="address">住所</label></p>
	<p><input type="text" name="address"></p>
	<p><label for="question">お問い合わせ内容</label></p>
	<p><textarea name="question"></textarea></p>
	<input type="submit" value="送信">
</form>

受信側(form.php)のコード

<?php $date = $_POST["date"];?>
<p>名前:<?php echo $_POST["name"] ;?></p> <p>email:<?php echo $_POST["mail"] ;?></p> <p>日時:<?php echo $date[0] ;?>月 <?php echo $date[1] ;?>日 <?php echo $date[2] ;?>時</p> <p>住所:<?php echo $_POST["address"] ?></p> <p>お問い合わせ内容:</p> <p><?php echo $_POST["question"] ;?></p>

index.htmlで送信ボタンを押すと、form.phpへページが遷移し、入力結果を表示することができる。

2016-11-04

WordPressプラグインLightbox Plus Colorbox が公式ディレクトリから消滅していた。

少なくとも半年前(2016年4月ごろ)には公式ディレクトリからなくなっていた模様

クライアントのサイトをメンテしていたところ、Lightbox Plus Colorboxが公式ディレクトリで検索しても出て

フォーラムで「見当たらないよー」という声がありました。

Lightbox plus colorbox plugin I can't find it anywhere? - SiteOrigin

このプラグインは特別な操作なしに使えたので重宝していたのですが、こうなっては速やかに代替プラグインを探すしかありません。(セキュリティ面でよろしくない状態になりますので)

Responsive Lightbox by dFactory が移行しやすい

移行手順としては、

  1. テストサイトでLightbox Plus Colorboxを停止。
  2. テストサイトでResponsive Lightbox by dFactoryをインストール、有効化。
  3. テストサイトでの動作確認。必要に応じて設定を変更。
  4. 正常に動作するなら、本番サイトのデータをバックアップして上記1〜3の手順を実施。
  5. 本番サイトで正常動作を確認後、本番サイト、テストサイトともにLightbox Plus Colorboxを削除。

今回のサイトではこのプラグインで問題ありませんでしたが、他のサイトではプラグインの衝突などあるかもしれませんのでテストサイトでの確認は必須ですね。