この記事はCSS アドベントカレンダー 2019の19日目の記事です。

フリーランスでデザインやイラストをしている becolomochi と申します。
HTML/CSS で書籍の図を作ったので、図版担当の視点で作成時のテクニック的なものを書きます。
どちらかというと技術系同人誌向けの内容になります。

ざっくり言うと、こういう図を作りました。

何の本か ＆ なぜやるのか

プログラミング初学者向けの書籍 『Railsの教科書』（著者：五十嵐邦明さん 発行：達人出版会さん）を Rails のバージョンアップで改版するため、このタイミングで図を HTML/CSS で書き換えたいとのことでした。

以下のリンクで今改版中の内容を見ることができます。

• Rails Textbook
• igaiga/rails_textbook GitHub

メリット

図を HTML/CSS で書くメリットとしては、

• 図のパーツをコードで管理できるので管理が楽（な気がしました。）
• コードなので差分を GitHub で確認しやすい
• ベースをデザイナーが作る必要はあるが、HTML さえ分かれば分担できる
• 今後の改版で図を直す必要が出てきても著者さん側で直接修正できる

『Railsの教科書』では HTML/CSS で作成した図がだいたい40個くらいあったようです。
※数え間違いしていなければ……
デザイナーの私がベースとなる20個程度を作成し、残りの半分の図をコピペと調整で著者さんが作成しています。

デメリット

デメリットを挙げるとすると、

• 複雑な図は作れない（なので、Illustrator で作った画像もあります）
• できあがった図はカラーモードが RGB なので紙版をフルカラーで印刷する場合は色味が変わってしまう

が挙げられるかなと思います。

HTML を画像化にするには

1. HTML/CSS で図をつくる<- この記事ではここについて書きます。
2. puppeteerでスクショを保存（すばらしき自動化〜〜）
3. 図が中央に来るようにトリミング（これからの作業になります※12/19現在）

HTML/CSS で図をつくる

puppeteerが Chronium ベースということで、Chrome で表示さえきちんとできていれば問題ない！
クロスブラウザとか気にしなくて済む！
普段のコーディング作業から比べると安心して進められたと感じていますw

サンプル

私が作った部分のコミットコメントがダサダサでお恥ずかしいのですが、
GitHub のこのディレクトリ以下に図が入っています。
rails_textbook/_figures/assets at master · igaiga/rails_textbook

• 図のサンプル一覧を作りました。figure-sample.html clone なりしていただけると見れます。
• CSS は SCSS で gulp でコンパイルしています（相談して一番慣れているやり方にさせてもらいました）

デザイナーとして個人的に気をつけたこと

• テキストの増減にも耐えられるであろう CSS にする
• CSS でトリッキーな装飾はしない
• 必要に迫られたときだけ絶対値指定する。その場合は HTML 側で style 属性を使う

2つ目は、今後ブラウザのバージョンが上がったときに表示が崩れる可能性あるためなのですが、
正直なところ今後どうなるか少し心配しています……
3つ目は、矢印の位置を合わせたいときにやってみています。
今後もし位置の調整をしたいときにわざわざ SCSS をいじらなくても済むようにしています。

例えばこれで矢印になるのですが、（コード全体はこちら）

<divclass="arrow-right is-memo arrow-right__position"style="top: 170px;"></div>

style 属性で、親要素を基準にして上から170pxのところに来るように絶対値指定しています。

CSSで矢印を作る

さきほどの図で矢印を例に出しましたが、
div に付与した3つのクラスにはそれぞれ以下のような装飾を持たせています。

• arrow-right矢印の形状を指定するクラス
• is-memoメモ用の色（水色）を指定クラス
• arrow-right__position位置を絶対値指定する必要があるときのクラス

これがかいてあるコードはココです。
rails_textbook/_arrow-right.scss at master · igaiga/rails_textbook

arrow-rightクラスの矢印の形状を作るのは beforeとafterの疑似要素で作りました。
大きさや色を変えるのも画像よりコードでやったほうが楽ですし。
上記リンクから必要なところだけ抜き出したものは以下です。

$arrow-right-width-value:30px;$arrow-right-height-value:50px;.arrow-right{height:$arrow-right-height-value;&::before,&::after{display:inline-block;content:'';}&::before{// 胴体の棒の部分width:$arrow-right-width-value+$arrow-right-height-value;height:45%;background:$arrow-color;}&::after{// 三角の部分width:$arrow-right-height-value;height:$arrow-right-height-value;border:$arrow-right-height-value/2solidtransparent;border-left-color:$arrow-color;margin-bottom:-$arrow-right-height-value/4;}}

SCSSを細かく見てみる

$arrow-right-width-value:30px;$arrow-right-height-value:50px;

で、一応でですが縦と横の初期値を設定しています。

height:$arrow-right-height-value;&::before,&::after{display:inline-block;content:'';}

ここで矢印全体の高さを設定し、beforeとafterの疑似要素を召喚しました。
（display プロパティは block でもいいのですが、他でインラインにする必要があってこうなっています）

&::before{// 胴体の棒の部分width:$arrow-right-width-value+$arrow-right-height-value;// こう書かなくても良かったかも…ｃｃheight:45%;background:$arrow-color;}

before 疑似要素で棒の幅と高さ、色を指定しています。

&::after{// 三角の部分width:$arrow-right-height-value;height:$arrow-right-height-value;border:$arrow-right-height-value/2solidtransparent;border-left-color:$arrow-color;margin-bottom:-$arrow-right-height-value/4;}

最後に after 疑似要素で三角の部分を表現しています。
高さの変数 $arrow-right-height-valueを基準にして、正方形のボックスを作り、正方形の半分のサイズの透明のborderを指定し、leftだけ色を付けると三角が現れます。

リセット CSS は ressを使っているので、以下が効いてます。

box-sizing: border-box;

これをつけるとボックスの内側に border がつき、上のサンプルがちゃんと矢印風の表示になってくれます。

パーツの半透明化

説明する部分を強調するため、他のパーツを半透明にできます。

以下の図は Controller を説明するときの図です。

サンプルHTML

<divclass="box opacity"><h2class="box__headline">リクエスト</h2>
  ...
</div>

SCSSはこれ

.opacity{opacity:0.3;}

opacityというクラスをつけるだけで半透明化するようになりました。簡単ですね！

矢印の長さがボックスに追随するよ

右側の赤い矢印にご注目ください。

内容が増えるとちゃんと伸びます。

サンプルHTML

<divclass="wrapper"><divclass="box"><h2class="box__headline">リクエスト</h2>
  ...
</div><divclass="box app-box relative"><h2class="box__headline">Rails App</h2>
  ...

  <divclass="arrow arrow__position-right-top"></div></div><divclass="box"><h2class="box__headline">レスポンス</h2>
  ...
</div></div>

SCSS

.arrow__position-right-top{// 右上から大きく表示する$position-value:-40px;position:absolute;right:20px;top:$position-value;margin-top:0;height:calc(100%-#{$position-value*1.6});}

wrapper に position: relativeを指定してあり、矢印の height を 100% から余白の分を引くようにするとできるようです〜。

ファイル構造を作る

アイコンは Font Awesomeのアイコンです。色をつけると見違えるように図っぽくなりますね。
ファイル構造はulの入れ子で進めようと書いてみたところ、入れ子になりすぎてコード量が半端なくなってしまったので margin-left で疑似的な階層をつくりました。Web サイトならコードの意味が大事ですが、今回はコードは適当でも図さえちゃんとしていればいいので。。。

サンプル HTML

<divclass="files__column"><divclass="files__item is-1">
    1階層
    </div><divclass="files__item is-2">
      2階層
    </div><divclass="files__item is-3">
      3階層
    </div>
    ...
</div>

まとめ

HTML/CSS で図を作るなんてなかなか無い案件なのでめちゃくちゃ楽しかったです!!!
ちょっと大変だなーと思ったのが、図の中にコードを載せることですね。
タグのエスケープが必要になるところをそんなに量が多くないからと手動で書き換えてました。半端にアナログ野郎ですみません……。
この記事で書いたことが最善とは思っていません。
もっといい方法があったらぜひ教えていただけますと……

表紙も作って販売が決まれば、達人出版会さんから電子書籍（EPUB, PDF）が発売されます。
Railsの教科書 - 達人出版会
2020年2月29日・3月1日に開催される技術書典8の1日目（2/29）でも紙版を頒布予定とのことです。
※電書版はフルカラーですが、紙版の本文はモノクロになるそうです。
デザイン担当からの告知になってしまいましたが、こちらもどうぞよろしくお願いします〜。

この記事はニフティグループ Advent Calendar 2019の19日目の記事です。
昨日は @yukiex@githubさんのARMベースのEC2インスタンスを利用するでした。
私はAWSはまだまだ勉強中ですが、最近チームでもAWSを積極的に使おうという流れがきてます。AWSはサービス多すぎて、どんどん追加されて追いつけなくなりそうなので、今のうちに勉強しようと思います。（今からワンピースを追うようなものだな）

はじめに

Qiita初投稿! & ニフティグループ Advent Calendar 2019に参加します。

今年新卒入社したものですが、チーム内で新人含めたミニスクラムチームを作って、勉強も兼ねて、社内向けツールを開発していました。

そこで使ったjQuery UIを使ったドラッグ&ドロップについて紹介したいと思います。

こんなかんじのもの

社内向けの当番管理アプリです。Django + AWS Elastic Beanstalkで開発しました。
このアプリができる前はExcelで管理していたので、いろいろと面倒でした。
機能としては、web上で確認、管理できる他に、当番が近づいた日と交代したときにSlackに通知してくれます。

上のgifのようにドラッグ&ドロップで要素を動かして交代するのも個人的には売りなのですが、当番の交代はほぼないので、みんな使わないだろうな・・・。なので、ドラッグ&ドロップについて共有したいと思います。

他にも、スケジュール自動生成機能を現在開発中です。

jQuery UI ~動かすのは簡単~

最初はドラッグ&ドロップで実装したらかっこいいだろうなー、でも難しそうだなーと考えていたときに、先輩がjQuery UIを使えばできるのではないかと教えてくれました。

jQuery UIを使うと予想より簡単に要素を動かせることがわかったので、このツールを使うことにしました。

jQuery UI
https://jqueryui.com/
公式ページでは、実際に動かせるデモがついていて、ソースもみれるので、見てるだけでおもしろいです。

ただ単に要素を動かしてみるだけなら簡単です。
CDNを読み込ませて、要素に名前をつけて、その名前の要素は動くよって指定するだけです。

下は簡単なサンプルです。図形を動かします。

<head><style>.draggable{width:100px;height:100px;background-color:green;}</style><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$(function(){$(".draggable").draggable();});</script></head><body><divclass="draggable"></div></body></html>

その他いろいろあるので、気になる方は公式ページを見てみてください。

テーブルで要素並び替え sortable

上ではdraggableを使っていましたが、sortableというものを使うと、要素の並び替えなどもできます。

当初はsortableを使って一人ずつ要素を動かして、交代するように開発していました。しかし結果的に、バリデーションが複雑になりすぎて、後に紹介する交換型に乗り換えました。

sortableを使った、テーブルで要素並び替えの簡単なサンプルがこちらです。CSSの調整を省いているので若干デザインがずれてます。

<head><style>.memberspan{border-width:thin;border-style:solid;}</style><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>$(function(){$('.connectedSortable').sortable({// このクラス間だけ相互移動できる。connectWith:'.connectedSortable',}).disableSelection();});</script></head><body><divclass="container"><tableborder="1"class="table table-hover"><thead><tr><thscope="col">Date</th><thscope="col">Area</th><thscope="col">Member</th></tr></thead><tbody><tr><tdscope="row">今日</td><td>A</td><tdclass="member connectedSortable"><span>いわかみ</span><span>はしうち</span><span>そりまち</span></td></tr><tr><tdscope="row">明日</td><td>B</td><tdclass="member connectedSortable"><span>みやさか</span><span>むらやま</span><span>たかさき</span></td></tr></tbody></table></div></body></html>

.connectedSortableというクラス名がある要素間で移動できます。

tdタグでなく、spanタグなのは、CSSで見た目を整える時に、枠線などいろいろずれてしまうので、結果的にspanタグを使うことになりました。bootstrapなどを使うならspanタグを使うほうがいいかも知れません。

交換型の移動に乗り換えるまで

とりあえず、一人ずつ移動して、交代する方向で進んでました。ただバリデーション&テストで新たなパターンがどんどん見つかり、チームのみんなも一番大変だったと言っていたくらいです。
また開発に携わっていない人に試してもらうと、やはり一人ずつ移動させて交代するのは分かりづらいとのことでした。

やはり、強制的にひゅっと交換できればいいなあと色々調べていると、ある記事を見つけました。
https://qiita.com/NickelCreate/items/8dd804279ea1eab75abe
まさにこれだ！というものでした。

開発当初はJSすら研修で触った程度でしたが、ある程度理解できるようになってきたので、テーブルでも使えるようチャレンジして、結果的にできたのでよかったです。

交換型のサンプル

sortableのサンプルで使ったテーブルを交換型の並び替えにしてみると、このようになります。
基本的には上の記事を参考にしていますが、そのまま流用できず、テーブルの要素を動かす用に変更する必要がありました。

できる限りコメントで説明しています。今の$(this)が何なのか意識しながらだと理解しやすいです。

大まかな説明では、ドラッグするときに交換元の要素の、位置と隣や親要素をもっておいて、ドロップするときに、その位置に合った要素と入れ替える感じです。

色や移動スピードは変えられます。jQueryUIのコツは要素のclassがアクションごとに変わることです。ドラッグしているとき、ドラッグしている要素を他の要素の上に来た時、他の要素がドラッグされたときなどいろいろ変化するので、アクションごとデザインなど変えたいときはclassを見てみるとわかりやすいです。

<head><style>.memberspan{border-width:thin;border-style:solid;}</style><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>// メンバーの交代$(function(){// ドラッグ中のオブジェクト情報var$dragObj;var$prevObj;var$dragDefPosition;var$dragStartPosition;var$revert=true;$('.draggable span').draggable({// 画面外に要素を持っていったときにスクロールするscroll:true,// ドラッグ中の不透明度opacity:0.8,// 要素の重ね合わせの順序。値が大きいほど全面zIndex:10,// 交換せず要素が元の位置に戻るまでの時間 単位:ミリ秒revertDuration:1,start:function(){//ドラッグ開始時に座標保存// $(this)はイベントが発生した要素$dragObj=$(this);// 移動始めの縦と横の位置$dragDefPosition=$(this).position();// prev()は今の要素の隣の要素を取得する　今持っている要素の隣$prevObj=$(this).prev();// trueを指定すると、ドラッグ終了時に、ドラッグ開始位置に要素が戻ります。$revert=true;// .parent()は親要素をとる ここでは$(this)を含むtdタグ$dragStartPosition=$(this).parent();},revert:function(){// droppableの後に実行されるので、droppable()内でfalseにして無効化return$revert;},});$('.draggable span').droppable({drop:function(event,ui){// ドラッグ無効$('.draggable span').draggable('disable');// 元に戻さない$revert=false;// dropされた位置に元々いた要素をdropObjとする$dropObj=$(this);// 今持っている要素の位置をdropPosition$dropPosition=$dropObj.position();$dragObj.animate({top:$dropPosition.top-$dragDefPosition.top,left:$dropPosition.left-$dragDefPosition.left,},200// 要素の移動の速さ 単位:ミリ秒,function(){$dropObj.animate({top:$dragDefPosition.top-$dropPosition.top,left:$dragDefPosition.left-$dropPosition.left,},200// 要素の移動の速さ 単位:ミリ秒,function(){//ドロップした時に元々いた要素の手前にドラッグしてきた要素を移動// .before 要素の前に()内の要素を挿入$dropObj.before($dragObj);// 交換時に位置調整と、色をつけて何が移動したかわかるようにする$dragObj.css({'top':0,'left':0,'background-color':'#FEE8E9'});// ドラッグ要素の元位置にドロップ要素を移動// $prevObj.lengthは要素の隣の要素の数// 移動元に要素があれば、その要素の後ろに追加if($prevObj.length!=0){//// .after() 要素の後に()内の要素を挿入$prevObj.after($dropObj);}// 移動元に要素が無ければ、移動元のtdタグに要素を追加else{// .prepends() 先頭に要素を追加する$dragStartPosition.prepend($dropObj);}// 交換時に位置調整と、色をつけて何が移動したかわかるようにする$dropObj.css({'top':0,'left':0,'background-color':'#FEE8E9'});//ドラッグ有効$('.draggable span').draggable('enable');});});},});});</script></head><body><divclass="container"><tableborder="1"class="table table-hover"><thead><tr><thscope="col">Date</th><thscope="col">Area</th><thscope="col">Member</th></tr></thead><tbody><tr><tdscope="row">今日</td><td>A</td><tdclass="member draggable"><span>いわかみ</span><span>はしうち</span><span>そりまち</span></td></tr><tr><tdscope="row">明日</td><td>B</td><tdclass="member draggable"><span>みやさか</span><span>むらやま</span><span>たかさき</span></td></tr></tbody></table></div></body></html>

【おまけ】テーブルのデータ取得

ドラッグ&ドロップで動かすだけでも楽しいのですが、
もちろんテーブルを入れ替えただけでは、管理はできません。入れ替えた後のデータを取得して、DB等で管理しなければいけません。

実際のアプリでは、JSONデータにまとめてPOSTして、受け取った側でDBに反映をしてました。

入れ替え後のデータの取得法のサンプルも紹介します。ここでは、ブラウザのconsoleで確認できるところまでです。

大まかな流れとしては、find()を使ってテーブルの情報を１行ごと取得して、最後の状態がわかるように保持します。
データとして必要なのは、変更後の最後の状態です。
よって、行ごとの最新の状態を配列に入れていきます。
取得したデータは扱いやすいようにJSONに変換します。

取得するタイミングについては、ドラッグ&ドロップで入れ替わった後のドラッグ時とドロップ時の行を取得します。文で書くと分かりづらい（言い訳）のですが、とにかく細分化して動作を順に追っていくとわかると思います。

正直正しいやり方かわからないですが、一応共有します。

先程のサンプルに３箇所追加するとできます。

1. テーブルのデータを取得する関数を追加する。

<script>タグの中に１つ関数を追加します。

varget_data={};varlatest_data=[];varpost_data={};// 変化した行のデータを取得し、json形式で保持/* 大まかな流れ
- メンバーが変化した行のデータをget_dataに入れる
- latest_dataに各行の最新の状態のデータを入れる（同じ日付とエリアがある場合は上書きしていき、
ない場合は新規に追加)
- post_dataにlatest_dataをJSON形式にしたデータを入れる
*/functioncreatePostDate(row_data){varschedule_day=$(row_data).find(".schedule").text();varschedule_area=$(row_data).find(".area").text();// メンバーだけは配列に入れてからテキストにするvarschedule_member=[];$(row_data).find(".member").children("span").each(function(i){schedule_member.push($(this).text());});// latest_dataに入れるためのデータを連想配列（辞書型）にget_data={date:schedule_day,member:schedule_member,area:schedule_area};// 同日かつ同エリアの場合(true)は上書きする（行の最新のデータを保持）varupdate_flg=false;for(vari=0;i<latest_data.length;i++){if(latest_data[i]['date']==get_data['date']&&latest_data[i]['area']==get_data['area']){update_flg=true;latest_data[i]=get_data;}}// 同日かつ同エリアではない場合はlatest_dataに新しく追加if(!update_flg){latest_data.push(get_data);// post_dataをjson形式に変換post_data={data:latest_data}}}

2.次に要素の交換時にこの関数が呼べるようにします。

以下のように追加してください。
droppableの下の方です。

$('.draggable span').droppable({〜〜〜〜〜〜〜〜〜//ドラッグ有効$('.draggable span').draggable('enable');// この下に追加!!!!!!!!// 変化があった行のデータを作成// 移動先（ドロップした場所の行）createPostDate($dragObj.closest('tr')[0])// 移動元(ドラッグし始めた場所の行)createPostDate($dropObj.closest('tr')[0])// consoleで確認用console.log(JSON.stringify(post_data,undefined,1));

3. 最後にtdタグに名前をつけます。

関数でclassの名前から、どのカラムの情報なのか判別して取得しているため、追加が必要です。
下のような感じで、classにscheduleとmemberを入れてください。
他にもある場合は同じように追加してください。

<tdclass="schedule"scope="row">今日</td><tdclass="area">A</td><tdclass="member draggable">

これでコンソールに出力されるはずです。

あとはPOSTするなりして、データを管理します。
ちなみにDjangoでAjaxでPOSTしましたが、結構癖がありました。トークンをつけてあげたり、JSの方でリダイレクトしたりと大変でした。

終わりに

ドラッグ&ドロップは意外に簡単にできることがわかりました。ちょっと動かせるだけでいい気分になります。
またそれぞれオプションでいろいろできるので、気になる方は見てみてください。
このアプリ開発で多く学べたので、協力してくださった方々には感謝します。

明日は@shin27さんです。

sinとcos

stylusではビルドイン関数が用意されている。
そのなかで、これ使い所ある？みたいなものもありますね💩
その代表がsin(),cos()じゃないでしょうか。
sin(),cos()って聞くと波が思いつくので、波の形を作りたい時に使えそうです。
というわけでやってみます！

Let's Try!

今回はちょっとコードが長くなるのでhtmlはpugを使います。
上のボタンを押してもらうとうんちたちが波の形に動きます💩
ボタンを押した時クラスを付けたかったので、そこはjsも書きました。
普通に書くとめんどくさいのでvueでサクッと書いてます。

See the Pen sin by petapetapeta (@petapetapeta) on CodePen.

ポイント

pug

pug(html)ではいっぱい同じような要素を作り、連番のクラスを振ります。
ここはvueでループさせてクラス振るように組んでも良かったですが、今回はpugのループで組みました。

stylus

こちらもループを使い、連番のクラスのpositionを計算して波の形にします。
横軸（left）は単純にループの数値にXpx掛ける。
縦軸（top）はループの数値とsinやcos使って-1~1の数値を計算しそこにオフセットを掛けたり足したりするとOKです。

vue

ulについたクラスによって、波の形を変えたいので、ここをバインドにして
buttonに@clickを入れてクラスを変更するようにします。
めちゃ簡単ですね💩

この記事はZOZOテクノロジーズ #2 Advent Calendar 2019 19日目の記事になります。
昨日は、@saitoryujiさんによる「新卒2年目のエンジニアが単体テストをやってみる」でした。

また、今年は全部で5つのAdvent Calendarが公開されています。

• ZOZOテクノロジーズ #1 Advent Calendar 2019
• ZOZOテクノロジーズ #3 Advent Calendar 2019
• ZOZOテクノロジーズ #4 Advent Calendar 2019
• ZOZOテクノロジーズ #5 Advent Calendar 2019

はじめに

最近、スマートフォンのWEB版 WEARで、コーデ画像をもとにAIがアイテムを検出し、さらにそのアイテムに似ているアイテムを検出して一覧で表示する機能をリリースしました

• 【URL】https://wear.jp/sp/tera1008/15491266/　※新機能はスマホのみ対応
• 新機能について、詳しくはこちら

この機能をWEBで実装するにあたり、使いやすいUI/UXを目指した奮闘記を紹介します！

こんなのをやりたい

まず、大まかな要件は以下の通りです。

1. コーデ画像の左下のをタッチすると検索スクリーンが下から上がってくる
2. コーデ画像からアイテムが検出された箇所を「◯」で表示する
3. スクリーン下部に、選択されたアイテムの「似ているアイテム」の一覧を表示する
4. スクロールすると「似ているアイテム」の一覧が上がってくる
5. 「似ているアイテム」の一覧はヘッダーが固定され、一覧内でスクロールできる

　→　　→　　→　

最初にこの要件を聞いたとき、経験上難しそうだなーと感じたのは、
windowのスクロールとは別に、一覧内もスクロールできるようにしないとけないところでした。
実装自体は可能なのですが、スクロールできる要素の中にスクロールできる要素を配置すると、スクロールしたい方じゃない方がスクロールされるなど、とても使いにくいイメージがありました。。。

今回は上記の要件のうち、1、4、5の部分について説明します。
※以下に出てくるソースコードは、説明用のサンプルです。

ボツになった案

それでも、まずは思いついたままに、以下のような構成で実装してみた。
（最初に言っておきますが、これはボツです笑）

実装

<divid="searchScreen"style="position: relative; transform: translateY(0px);"><divid="image"style="position: absolute;">...</div><divid="list"><divid="listHead"></div><divid="listBody"style="height: 812px; overflow-y: scroll;"><ul><li></li>
                :
            </ul></div></div></div>

See the Pen Sample1 by mitanih (@mitanih) on CodePen.

#searchScreen
コーデ画像のボタンのクリックイベントで、下から上がってくる検索スクリーン
下から上げる処理として、CSSアニメーションでtransformをtranslateY(100%)からtranslateY(0px)に切り替えて表現する
※marginの切り替えでも表現できるが、残像ができたり動きがカクつくなどの問題があった

#image
検索スクリーン内上部のイメージエリア
windowがスクロールされても固定したいので、position: absoluteを指定して、常に画面の同じ位置にいるようJavaScriptで制御する
※親要素にtranslateを指定しているのでposition: fixedは使えない

#list
検索スクリーン内下部の一覧

#listHead
一覧のヘッダー

#listBody
一覧のボディ
一覧内をスクロールさせるためheightを設定し、overflow-y: scrollを指定

問題点

触ってみて、やっぱり使いにくかった。。。
iOSのSafariで動作確認した範囲ですが、windowをスクロールさせて一覧を上に持っていきたいのに、一覧内がスクロールされてしまったり、慣性スクロールの影響なのか、windowがスクロールして完全に止まらないと、一覧内がスクロールできないなどの現象も起きた。
スクロールしやすいように工夫して、一覧が一番上まで来ていなければ一覧内はスクロールできないようJavaScriptで制御も入れてみたが、スムーズな動きとはいかなかった。
あと、#imageの位置を固定するためスクロールの度にJavaScriptで位置を計算して設定したが、フラフラ動いてなんか変。
何より無理し過ぎな気がしました。。。

採用した方法

いや、もっといい方法はあるはずだ。他のサービスでこんなぎこちないの見たことないぞ。。。
と、いろいろ調べていて、position: stickyに辿り着きました！
Excelの行固定みたいな機能が簡単に実現できるあのスタイルです。

position: stickyの説明
https://developer.mozilla.org/ja/docs/Web/CSS/position

メジャーなiOS、Androidのブラウザ対応も問題なさそう！
https://caniuse.com/#search=sticky

実装

<divid="searchScreen"style="position: relative; transform: translateY(0px);"><divid="image"style="position: sticky;">...</div><divid="list"><divid="listHead"style="position: sticky;"></div><divid="listBody"><ul><li></li>
                :
            </ul></div></div></div>

See the Pen Sample2 by mitanih (@mitanih) on CodePen.

細かい調整は省略しますが、要は#imageと#listHeadにposition: stickyを設定するだけで解決しました！
windowのスクロールで#listが上に来るまでは、#imageがstickyしてくれる。#listが上までくると#listHeadがstickyし、windowのスクロールでそのまま#listBodyが下まで見られる。
まさに理想的なスタイル！
無理していない実装なので動きもスムーズです！

まとめ

JavaScriptやCSSのプロパティを覚えると、自力でゴリゴリ書けちゃうんですが、実機で確認すると動きがぎこちなくてなんか無理してる感じがすることってあると思います。
そんなときは視点を変えてもっとシンプルな方法を探すと、よりよい解決策が見つかるということに気付かされます。
プログラミングって、そんなことのくり返しのような気がする。。。

明日は、@ikkouさんの記事です。
お楽しみに～！

はじめに

就活のポートフォリオサイトとしてAsobiというWebサイトを作成しました。(QiitaにAsobiに関しての記事を書いています。就活用ポートフォリオとしてWebサービス「Asobi」を作りました。)
このサイトの中でRails6から新しく導入されたActionTextを使っているのですが、入力フォームが行数に応じて伸びてしまいます。

今回はそんなActionTextの入力フォームをいい感じにするためにやったことをご紹介します。

実行環境

• Ruby 2.6.5
• Rails 6.0.2

ActionTextとは

Rails6から実装されたリッチテキストコンテンツと編集機能を導入する機能です。

ActionTextのインストールと導入したいモデルとカラムの用意を行い、少しコードを書くだけでブログのようなリッチテキストエディタが導入できます。

Ajaxを利用した画像のアップロードも実装されており、アップロードされた画像はActiveStorageを利用して保存されます。

今回ActionTextの導入に関しては割愛させていただきます。
導入に関しては下記の記事が参考になるかと思います。

Rails6新機能 ActionText使用方法
Rails 6 と Action text を使ってみる - もふもふ技術部

伸びて困る

ActionTextで生成されるリッチテキストエディタの入力フォームは、行数に応じて高さが伸びるようになっています。

デフォルトの挙動

これをQiitaやはてなブログのような、はみ出た部分をスクロールバーで表示するように実装します。

こんな風な挙動にしたい

実装

Rails側でこれを実装する方法を見つけられなかったため、CSSで実装します。

Trixについて

実装の前に、ActionTextに含まれるTrixについて説明します。
Trixとはリッチテキストエディタを実装するJavascriptのライブラリです。(ちなみに開発元はRuby on Railsと同じBasecampです)
Trixのドキュメントを見てみると、

Place an empty <trix-editor></trix-editor> tag on the page. Trix will automatically insert a separate <trix-toolbar> before the editor.
Like an HTML <textarea>, <trix-editor> accepts autofocus and placeholder attributes. Unlike a <textarea>, <trix-editor> automatically expands vertically to fit its contents.

とのことで、ページのTrixのエディタを入れたい場所にtrix-editorタグを書き込むことで使えるようになります。

ActionTextの場合、erbファイルに

<%=form.rich_text_area:body%>

と記述することでtrix-editorタグが生成されます。
そしてリッチテキストエリアへの入力はtrix-editorタグの子要素にDOMとなって反映されていきます。

なので、入力フォームのスタイルは親要素であるtrix-editorタグのCSSを記述することで調整できそうです。

CSSの記述

入力フォームの高さを固定するためにmin-heightとmax-heightを、そして入力フォームからはみ出した部分はoverflow-y: auto;を設定することでスクロールバーで表示できるようにします。

以下のCSSを記述します。(actiontext.scssが/app/assetsか/app/javascriptに生成されていると思うので、そこに追記することをオススメします)

trix-editor{min-height:20em;max-height:20em;overflow-y:auto;}

以上で目指す挙動の入力フォームになっていると思います。

まとめ

ActionTextは新しい機能のため中々情報が出てきません。もしかしたらActionTextの設定ファイルか何かでうまいことやれるかもしれないです。

何か直すべき点、間違った記述があればコメント等で指摘していただければと思います。

参考文献

Trix
https://railsguides.jp/action_text_overview.html

納期が迫っている中で高品質なコードを書いて納品するのはすごい能力だなと感じています。
ただ、プロとして仕事をしている以上、特定のチェックを通してから納品するのがプロの仕事。

PSD通りにコーディングできたからといって、コードの中身に問題があればそれは本当に良い仕事をしたのだろうか？

誤字脱字や、デザイン通りにコーディングされていないのは論外。
クライアントに送る前にしっかりチェックしよう！

とはいえ、弊社には定められたチェック項目というのものがないので、

「高品質な成果物を納品するためのチェック項目」というものを自分なりに作ってみた。

コメント

今納品するコードは、ブーメランのように自分に返って来ます。半年後、もしかしたら1年後かもしれない。そんな時、書いてあるコードの意味から理解し始めたら効率が悪い。

具体的にチェックするポイントは下記

• 書き方に統一性があるか
• 擬似要素など（第三者が見てわかりにくい所）にコメントがあるか
• !importantの理由を説明しているか

など、「自分が忘れた頃に見ても理解できるか？」という視点でコメントを書いてみる

[参考リンク]ダメすぎる6つの事例に学ぶ、半年後に炎上しないCSSコメントの書き方

誤字脱字

• デザインとテキストの差異はないか

誤字脱字って以外にも結構あるものです。
頂いたデザインや、テキストデータからコピペしているはずなのですが、コピペするときにスペースが入ってしまったり、なぜか一文字消えてたり。。

コピペだからといって問題ないと思うのは危険だということ。

クライアントからのテキストデータと、表示されているテキストを比較して差異を見てみるのが確実。

[参考リンク]diff

フォント

• フォントはデザイン通りか（サイズ、カラー、font-family）

「ヒラギノ角ゴシック」とかがよく使われている印象ですが、Macでは表示されるようにしておいて、Windowsでは似たようなフォントにする。

「デザイナーが凝って選んだっぽいフォント」については、Webフォントや、画像にする。
→これは、クライアントに必ず確認する
（できればデザイナーさんが仕様書にまとめてくれるといいのですが、ほとんどの場合は無いので、色々確認する必要がある。。。）

最終的には、「Macで”ヒラギノ角ゴシックW3″で、Windowsで”Noto Sans Japanese”を設定してます〜」みたいに伝えておくとベター

font-familyの例

cssでfont-familyを指定する例を書いておく

MacでもWindowsでも「游ゴシック」がベース
もし游ゴシックがなければMacでは「ヒラギノ」、Windowsで「メイリオ」になる

font-family:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;

ヒラギノ角ゴシックを最優先とする設定。
MacやiPhoneでは「ヒラギノ」、Windowsでは「メイリオ+英字はSegoe UI」

font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Segoe UI","メイリオ","Meiryo",sans-serif;

フォント周りの設定を調べるならChrome拡張機能のWhat Fontがおすすめ。

フォント周りの設定を調べるChrome拡張機能 [What Font]

カラー

• カラーはデザイン通りか

PSDで指定されているカラーと、表示されているカラーが合っているかを確認します。簡単に確認できるのが、Chrome拡張機能のColorPick Eyedropper。
フォントやカラーはデザインを見れば確実にわかるものなので、間違いが内容にしておきたい。

フォントカラーであれば、What Fontでもついでにみることが可能。

カラーの設定を調べるChrome拡張機能 [ColorPick Eyedropper]

見出し構造

• 見出し構造は適切か

稀に仕様書で見出し指定されていることもありますが、ほとんどの場合はコーダーが見出し構造を決める。sectionの中に見出しがあって、ちゃんと構造化されているかを確認する。

見出し構造って何なの？って人は下記のリンクを見てみてください。
[参考リンク]【見出しタグの使い方】h1～h6の正しい使い分けについて

こちらもChrome拡張機能が便利。

SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]

こんな感じで、現在表示されているページの見出し構造が表示され、簡単にチェックできる。ワンクリックでチェックできるので、使わない手はない。
なお、Title、Descriptionなどページの情報を一括でチェックできるので、とりあえずこれで一気にチェックするといいかも。

下記のブックマークレットでもチェックが可能。
タイトルや見出しの確認など、SEOに便利なブックマークレット

Title,Description,Keywords

TDKと言われる3つですが、SEOに重要とされており、簡単に言うと下記の情報を検索エンジンに教える。

• ページタイトル
• ページの内容
• ページが含むキーワード

これがしっかり入っているかを確認する。

参考サイト
TDK(title,description,keyword)とは？SEO・サイト制作基本のキ

これも先ほどの拡張機能で確認できる。

こんな感じ。

SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]

alt属性

• alt属性が入っているか
• 英語サイトの場合、英語で入力されているか

これのつけ忘れで、クライアントから怒られることがしばしば。。。
細かい所なのでチェックが漏れがち。

これも実はSEO META in 1 CLICKで確認できる！便利！

こんな感じで、画像15個中、7個はaltが入ってないよ！と教えてくれる。

SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]

これでも可能↓
alt属性の一覧を表示するブックマークレット

href属性

• リンクが正しく入っているか
• target="_blank"は適切か
• リンク切れになっていないか

<ahref="#">hogehoge</a>

クライアントからリンク先の指定が遅れてくる場合があり、「とりあえず#入れとくかー」がそのままになっている場合があ流ので注意！

また、target="_blank"も抜けやすいので、外部ページに飛ばす場合はブランクと覚えよう

これは、一つ一つクリックしてチェックしていくのが無難。

デザインカンプとの整合性（PerfectPixel）

デザインカンプと比較して、違いはないか？

細かい部分で言うと、デザインで付けられている「レイヤー効果」が抜けていることがあるので注意。
例えば

• border
• box-shadow
• border-radius　など

あとは納期が許す限り、「PerfectPixel」を使い、ピクセルパーフェクトに近づけて制作する。

コーダーはデザイナーの作成したカンプにしたがってサイトコーディングするのが仕事。
つまり、デザイン通りに仕上げるのが本来の役割なはず。

「とりあえず、微妙にずれてるけど、見た目は完璧だしOKでしょ！」という気持ちで納品すると、後で修正の嵐になるので注意。

「納期が許す限りは」ピクセルパーフェクトで作り、まずは完成度８０％くらいで納品し、ピクセルパーフェクトに仕上げていくのもありかなと思う。

PerfectPixel

レスポンシブ（水平スクロール）

• スムーズにレスポンシブ対応できているか
• 水平スクロールがでないか

レスポンシブはコーディングしながら気をつけているポイントだと思うので多分大丈夫なはず。
でも、納品前には必ずチェックしよう。

できれば実機で確認したい。

hoverの設定

• hover時の設定はできているか？（SPは除く）
• 透過度は統一されているか

クライアントから指定されていれば、そのhoverアクションを各所に当てる必要があるし、

特に指定がなければ、opacityの透過度を統一して当てること。
よくよく見ると透過度が違う！みたいにならないように注意。

Sassなら変数で管理しておこう。

マルチブラウザ

どのブラウザで見ても、問題なく動くかどうか
できれば、下記のブラウザはチェックしておきたい。

• IE11
• IE Edge（最新バージョン）
• FireFox（最新バージョン）
• Google Chrome（最新バージョン）
• Mac Safari（最新バージョン）
• iPhone（Safari最新バージョン）
• iPad（Safari最新バージョン）
• Android（Chrome最新バージョン）

IEが曲者。

MacならvirtualBoxで環境構築するか、Chrome拡張機能でサクッと確認する方法もある。
- MacでVirtualBoxを使ったIEの表示確認環境を構築する

Chrome拡張機能なら、「IETab」
IE Tab

こんな感じで、拡張機能のアイコンをクリックするだけで、IEでの表示イメージを見ることができる。

JavaScriptの挙動（コンソールエラー）

• 色々と実装しているJavaScriptの動きは正しいか？
• コンソールにエラーが出てないか？

マルチブラウザで確認する。
ライブラリを入れている場合は、それらが正しく動作しているか確認しよう。

特にIEでJSが動いてない！！ってことがよくあったので注意。

HTML閉じタグ忘れチェック

HTMLコーダーがHTMlタグを正しく書けてないって、どうなの？

後述するW3Cでもチェックしてくれるかもですが、Chrome拡張機能でサクッとチェックが可能なので、これだけでも最低限はやっておきたい。

HTMLエラーチェッカー

W3Cチェック

W3CはHTMLやCSSの標準規格。規格にあった正しい書き方ができているかをチェックする。

僕としては、こっちを使ってます。

英語ですが、おかしい部分はエラーで教えてくれるので、その部分を見ていけばオッケー

• HTML
• CSS

※この規格に沿って書いたからと言ってSEO的に有利なのかどうかは不明。

まとめ

とりあえず思いつくままにまとめてみると１5項目ありました。

納期に迫られている中で、品質の高い成果物を納品するのは大変ですが、それが信頼につながって、また新たな仕事を運んでくれます。

プロの仕事ならしっかりと自分の仕事をやるべきで、コーダーであってもプログラマーのようなCSS設計の意識と、納品前のチェック体制を整えることが理想だと考えました。

他にも「これはやっておくべきだろ！！」ってのがあれば教えてください。

今回紹介したツール

• テキストの差異を調べるdiff
• フォント周りの設定を調べるChrome拡張機能 [What Font]
• カラーの設定を調べるChrome拡張機能 [ColorPick Eyedropper]
• SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]
• alt属性の一覧を表示するブックマークレット
• デザインとサイトの整合性を調べるChrome拡張機能[PerfectPixel]
• HTML閉じタグをチェックするChrome拡張機能[HTMLエラーチェッカー]
• W3C規格チェック｜HTML
• W3C規格チェック｜CSS

参考リンク

• ダメすぎる6つの事例に学ぶ、半年後に炎上しないCSSコメントの書き方
• 【見出しタグの使い方】h1～h6の正しい使い分けについて
• TDK(title,description,keyword)とは？SEO・サイト制作基本のキ
• MacでVirtualBoxを使ったIEの表示確認環境を構築する
• 【今日から携わる】コーディングチェックリスト。見た目と文章構造だけでなく、コードインデントや使うツールも共有しよう。WEBディレクターにおすすめです！
• [初心者向け]HTMLの文法＆コードをチェックする方法
• Webコーディング後にチェック（テスト）しておくべき20のチェックポイント！

CSS の overflow

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定する。

セレクタ{overflow:値;}

visible：初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
hidden：はみ出た部分が隠れる
scroll：はみ出た部分が隠れてスクロールできる状態に
auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）

overflow: visibleでそのまま表示

<pclass="example">あいうえおあいうえおあいうえお</p>

.example{width:50px;height:50px;overflow:visible;background:skyblue;}

overflow: hiddenで非表示に

.example{width:50px;height:50px;overflow:hidden;background:skyblue;}

フォーム作成で若干苦労したのでメモ。

• 疑似要素を使用してスタイル当て
• タブキーで選択可能
• スペースキーで選択可能

なチェックボックス＆ラジオボタン。

ポイントとしては

• inputはopacity:0;にする(display: none;とかだとタブキー選択できない)
• inputをdisplay: block;にする(デフォルトはinlineなんだけど、それだと3pxくらいinputが幅を取ってしまってデザインがずれてしまう)

あたり。

サンプル

See the Pen Styled Checkbox & Radiobutton Sample by urchin2x (@Torixai) on CodePen.

はじめに

font-family、習いました。
でも、習ったところでfont-familyに何が指定できるのかわからないし、どうしたらそれを調べられるかわからないぞ！

そんな人のためにまずGoogle Fontsを紹介したいと思います。

Google Fontsのサイト

https://fonts.google.com/

使い方

①サイトを開きます

こんな画面が出てくるよ

さてここからフォントを探す！と言ってもどっからどう探せばいいか分からない…。

②まずは日本語フォントを調べてみる！

タイトルが日本語なら、そこ変えたいよね？！
左上にある「Language」から「Japanese」を探して選択します。

すると…日本語出てきたーーーーー！

まだ8種類と少ないですが、それでもデフォルトよりはいいはず！！！
ということで、左上の「Noto Sans JP」を使ってみましょう。

③フォントを選ぶ

使いたいフォントのフォント名が書いてある右に赤い「＋」のボタンがあります。
そこをクリック！

すると右下にこんなものが現れた！！！

「1 Family Selected」という黒いやつ。
さてここをクリックすると。

なんか出てきた。
でもこれが出ればもうあとは少しだけ。

④フォントを導入するための魔法の式

赤く「STANDARD」と書いてある下に色々コードが書いてあります。
この<link hraf〜〜から始まるコードをコピーします！！

これね

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

そして自分が作っているWebサイトの<head></head>の中に貼り付ける。
これに

こう！

これで導入は完了。

⑤最後にCSSを変えるよ

さっきのコピーしたコードの下にある「Specify in CSS」の下にあるコードをコピー！
font-familyってついてるからどこにこれを貼り付ければいいかはもうわかるよね？

h1のフォントを変えたかったらこう！！！

⑥完成ーーー！確認しよう！

これが

こう！

全然違う！！！

終わりに

みんないろんなフォントを調べてみてね。
英語だけならとにかくいろんなフォントがあるので試してみて欲しいーーーー！

HTML

<divclass="box>
  <img src="dummy.png"alt=""width="24"height="24"class="img"></div>

CSS

.box{position:relative;height:300px;}.img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

absolute による要素の固定

absoluteによる要素の固定は赤い丸の点
左上を起点としているので、left: 50%Top:50%ではこの位置になる。
これではBox要素に対して上下中央ではないので、

transform:translate(-50%,-50%);

translate(X方向の距離, Y方向の距離)
translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
translateX(X方向の距離)
translateX()関数では、X方向の距離で移動を指定します。
**`translateY(Y方向の距離)
translateY()関数では、Y方向の距離で移動を指定します。

background{background:url(/assets/img/picture/xxx.jpg)no-repeatcenter/cover;}

一行のスタイルシートで記述

上記はすべて「background」の指定のため、ショートハンド（複数指定）を使って短く記述できます。
ショートハンドでは/coverとすることで background-size: cover を指定することができます。

background-repeat背景画像を繰り返して表示する

background-size背景画像のサイズを調整する

画像が大きすぎて要素からはみ出してしまう時

背景画像の位置を調整することができるプロパティ

background-size

： auto基本そのままの大きさ
： cover要素を埋める
: contain背景画像全体が見える

box-sizingは簡単に言うと「外に広げるか(content-box)」「中に狭めるか(border-box)」

padding や線を大きさに含めない：content-box

paddingや線は幅や高さに含まれない状態になる

padding や線を大きさに含める：border-box

paddingや線は幅や高さに含まれる状態になる

これなに

だいぶ前に社内発表した資料です。

Flexboxとは

柔軟なレイアウトシステム

HTMLのレイアウト

• 古くはTable Layout
  • CSSがまともに動いてない時代があった
  • ガラケー
• position: fixed
• Float
  • <br clear="all">による回り込みの解除
  • clearfix
  • %指定によるFluid / Grid実装
• display: table-cell
  • 合法的に使えるTable Layout
• translate

まさに群雄割拠

• いろんなやり方があった
• どれも機能的に足りておらず一つだけ覚えてもだめだった
• 無理くりな手法も多く、後ろ髪を引かれる思いで実装してた

全てをレイアウトを過去にするFlexible Box Layout Module (個人的な感覚)

震えるがいい

Flexboxの考え方

• 直接の子要素に影響を及ぼす
  • 親要素に影響を受けるpositonやfloatとは逆

レイアウト定義

• 並び
  • 方向
  • 順序
• 位置
  • 縦横方向
  • 均等割り付け
• サイジング
  • 固定
  • フレシキブル

サンプル

https://codepen.io/8845musign/pen/awQamg

今日覚えて帰ってもらいたい一つの使い道

中央配置のレイアウト

.wrap内の itemを左右及び垂直中央に配置

https://codepen.io/8845musign/pen/RgqZMV

<divclass="wrap"><divclass="item">item</div></div>

.wrap{display:flex;align-items:center;justify-content:center;}.item{width:200px;height:200px;}

解説

flex-direction

レイアウトの方向を決める、デフォルトは row（水平方向に左から右）

justify-content

flex-direction　で決めた軸に、子要素をどう配置するか

align-items

flex-direction　と直交する軸に、子要素をどう配置するか

つまるところ垂直中央

• 親要素がレイアウト情報を持つのでシンプル
  • いままでのレイアウト手法は子要素と親要素のレイアウト情報が密接に絡まり合って決定されていた
• ようやく使えるようになったお手軽垂直中央
  • table-cellからの解放
• さらに複雑なレイアウト組を可能にする豊富なオプション
  • 学習コストをあげている原因でもある

このレイアウトを他の手法でやると？

参考記事:

たった4行！ CSS3 Flexboxを使った史上最短の上下中央揃え2016年版

いろいろあるけど頭いたくなるょ。

SLDSのGrid

• .slds-gridは display: flexを宣言してる
• .slds-grid_align-centerは justrify-content: center
• 逆に言うと、上記のプロパティのような本当に簡単なレイアウト組は普通にCSS書いとこ？という気持ち

ひっじょーにシンプルな作り　　
https://www.lightningdesignsystem.com/utilities/grid/

使えるブラウザ

• IE11〜
  • 古い仕様での実装のため書き方に差異がある

Bug

• そこそこ地雷が埋まってる
• 参考
  • flexbugs
  • flexboxのバグに立ち向かう（flexboxバグまとめ）
• 一部のバグを自動修正するツール
  • postcss-flexbugs-fixes

マルチブラウザでのチェックは必ずやろう

!!!!New Commer!!!!

2017年はGridレイアウト元年

これからのレイアウトはGrid Layoutで決まり？

※ICSさんより

To be continue.

transitionとは

直訳すると変化や移り変わりという意味で、変化するまでの時間を設定するプロパティのこと。
transitionは、ショートハンドプロパティを含め5つのプロパティがある。

これをショートハンドプロパティにて書くと下記。

.sample{transition:all3sease}

all : transition対象のcssプロパティ allの場合は全て
3s : 変化の始まりから終わりまでの時間
ease : 変化の仕方
    ease :（初期値）開始時と終了時は緩やかに変化
    linear :開始から終了まで一定に変化
    ease-in :開始時は緩やかに変化、終了に近づくと早く変化
     ease-out :開始時は早く変化し、終了時は穏やかに。

/* 1つのプロパティへの適用 *//* プロパティ名 | 時間 */transition:margin-right4s;/* 2つのプロパティへの適用 */transition:margin-right4s,color1s;

transition-durationプロパティ

値は、秒数またはミリ秒数で指定します。

transition-propertyプロパティ

transition-timing-functionプロパティ

これから学ぶ言語について

これからプログラミングを学ぶにあたり、HTML,CSS,Javascript,Ruby,Ruby on Railsの５つの言語について調べてみました。
（間違いがございましたらご指摘頂けますと幸いです！）

HTML

Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）

• Webページを作るための最も基本的なマークアップ言語のひとつです。

• Webページの文書構造を形作るための言語で、普段観ているWebページのほとんどが、HTMLで作られています。

• Hyper Text（ハイパーテキスト）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。　

• HTMLにはハイパーリンク機能で関連する情報同士を結びつけて情報を整理するという特徴があります。

• Markup（マークアップ）とは文書の各部分が、どのような役割を持っているのかを示すということです。

• コンピュータに理解できるように文書の構造を定義することが、HTMLの最も重要な役割で、
  この際目印をつけるための記号として使用されるのがHTMLタグです。

• HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があります。

CSS

“Cascading Style Sheets” （カスケーディング・スタイル・シート）スタイルシート

• スタイルシート言語の1つで、文書構造にデザインを施し見栄えを整える役割を担っています。

• CSSは、HTMLと組み合わせて使用する言語です。
  　WEBページ＝HTML（文書構造）＋CSS（見栄え）で構成されています。

• ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

JavaScript

JavaScript（ジャバスクリプト）

• JavaScriptとは、現在、世界中のデベロッパーの間で最も人気のあるプログラミング言語の1つ。私たちはみんなJavaScriptのヘビーユーザー。普段から1日に何十回も使用しています。

特徴

• JavaScriptはスプリクト言語のためJavaやC言語と違いコンパイルする必要がありません。

• JavaScriptとは、動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるプログラミング言語

• JavaScriptはユーザー側のWebブラウザとWebサイト・ウェブサービスの相互間のやりとりを円滑にします。

• JavaScriptのコードはブラウザがWebページにアクセスしたときにダウンロードされ、画面上に表示されるとJavaScriptのコードが実行されて次に実行するべき動作がもしあればブラウザに指示します。

Javascriptで出来ること

• フォームのチェック
  フォームに入力されたテキストデータをサーバに送る前にチェックできます

• イベント処理
  キーボードやマウスによる操作によってWebページの動的な動きを実現できます。

• テキストの処理・加工
  テキストのスタイルを変化させたり、文字を抜き出したり、テキスト回りの加工も可能です。

• Cookieの処理
  Cookieを作ったり、逆にユーザーのCookieデータを読み込んだりできます

• ウインドウの操作
  出現するウィンドウの位置やサイズ、スクロールさせるなど、さまざまな動きを指定できます。

• ほかにも、JavaScriptでできることはたくさんあります。

Ruby

Ruby（ルビー）

• Rubyは、『まつもとゆきひろ』により開発されたオブジェクト指向スクリプト言語。 日本で開発されたプログラミング言語として初めて国際規格に認証されました。
• 「書くのが楽しい」「気持ちよくかける」とよく言われます。

主な特徴

• Rubyは他の言語と比べると記述量が少なくて済みます。

• JavaやPHPといった他の言語同様、Rubyはオブジェクト指向なプログラミング言語です。

• Rubyはスクリプト言語であり、JavaやC言語と違いコンパイルする必要がありません。　

Rubyで出来ること

• Webアプリ開発
  Ruby on RailsというWebアプリ開発用のフレームワークを利用することで、比較的簡単にオリジナルのアプリケーションを制作することができます。

• スマホアプリ開発
  Webアプリケーションだけでなく、RUBYMOTIONを利用することで、スマホアプリ開発をすることが可能です。

• スクレイピング
  Webサイトから情報を取得し加工するという意味です。 

Ruby on Rails

Ruby on Rails（ルビーオンレイルズ）RoR　又は　Rails

• Ruby on RailsはオープンソースのWebアプリケーションフレームワークである。

• Railsの基本理念は「同じことを繰り返さない」（DRY:Don't Repeat Yourself）と「設定より規約」（CoC:Convention over Configuration）である。

• Ruby on Railsとは、Rubyで構築された、Webアプリケーション開発のための「フレームワーク」です。

• Ruby on Railsでは、MVCアーキテクチャ（MVCモデル）という設計法に基づいて開発を行います。

MVCとは
Model（データを扱う）の頭文字Mと、View（ページの見た目）の頭文字V、Controller（ModelとViewとの連携を行う）の頭文字Cを取ってMVCと呼ばれています。

気になった調べた言葉

５つの言語を調べているうちに気になって調べた言葉です。

コンパイラ言語

高速で動作する代わりに記述が面倒。
ソースコードを事前にコンパイルして、先に機械語に変換しておく。(C、C++、Java、C#など)

スクリプト言語


低速で動作する代わりに短い記述で処理を実現。
ソースコードを逐次機械語に翻訳しながら実行する。
(Python、Perl、PHP、Ruby、JavaScriptなど）

コンパイラ方式とインタープリタ方式

プログラミング言語を変換するタイミングによって，インタープリタ方式とコンパイル方式の2つの型に分類できます。

インタープリタ方式

ソースコードをその場で順を追って解釈する形式をいいます。(Javascript,Ruby)メリットは作成したソースプログラムをただちに実行できるという点。

コンパイラ方式

ソースプログラムをいったん機械語に翻訳し，その機械語になったプログラムを実行する方式です。メリットは実行速度が速い点。

オブジェクト指向プログラミング

「モノ」を組み立てるように表現して、コンピュータに動作をさせること。

Cookie

Web閲覧時に生成されるCookieデータは、サイトで登録したIDやパスワード、ページを見たときの日時や回数を記録するデータです。

フレームワーク

Webアプリケーションを簡単に開発できるようにする骨組みのこと。

100日チャレンジ188日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

188日目は

おはようございます
188日目

udemyでwebサイトコーディング
同じく、bootstrapもちょっとやった#100DaysOfCode#早起きチャレンジ#駆け出しエンジニアと繋がりたい

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) December 18, 2019

長すぎる文字列をCSSで...表示にする方法

使用言語

cssのみ！

こんな時に使えます！

アプリ作成を際にとても長い文章を表示しなければならず、ビューが崩れてしまったことはありませんか？
ビューが崩れてしまうくらいなら一部だけ文章を表示するだけにしたい...そんな時に使います

試しに使ってみましょう！
以下のような文章があったとします

例では真っ白な画面に文字を表示させているだけですが、凝ったビューを作る際はこのような長い文章が邪魔になってしまうことがあります
しかし、この文章を以下のように表示させることができます！

やりかた

とても簡単です！
...の表示に変えたいクラスに対して以下のcssを設定するだけ！（.targetです）

この４つの記述を組み合わせることで...表示を実現できます
widthの値を変えることでどこから...表示にするかも変えられます

試しにwidthを70pxにしてみると...

仕組み

なぜこの記述で非表示にできるのでしょうか？
１つずつ順番に見ていきましょう

①
overflow: hidden;
これで、はみ出した文字を非表示にできます
しかし、はみ出したorはみ出してないはどこで判断するのでしょうか？

②
width:;
横幅を指定します　widthで指定した値よりもはみ出てしまうとoverflow: hidden;が適用します

③
text-overflow: ellipsis;
はみ出てしまった要素の表示方法を指定します　ellipsisにするとはみ出た要素を...で表示するようになります！

④
white-space: nowrap;
改行を半角スペースに置き換えます
一見...表示には関係ないように思えますね
①〜③だけで...表示は実現できるように思うかもしれません　なぜwhite-space: nowrap;が必要なのでしょうか？
試しにwhite-space: nowrap;を削除した表示を見てみましょう

そうなんです！
widthの幅で勝手に改行されてしまいます
はみ出るよりも改行が優先されてしまうので...表示に出来なくなってしまいます　これを防ぐためのwhite-space: nowrap;です！

フィードバックをください！

私はプログラミングの勉強を始めたばかりでアウトプットのために記事を書いています
この記事で分かりにくかったところや今回紹介した方法よりももっと良い方法があれば教えてください！

この記事は CSS Advent Calendar 2019の 20日目の記事です。

Vue Fes Japan 2019 が開催中止になってしまい、大変残念だったのですが...
（私は Vue.js 日本ユーザーグループのコアスタッフで、今回は Web サイト制作班として少しコミットしていたのでした）

先日公式サイトのソースコードが無事公開されました
そこで、Web サイト制作で得た CSS の知見がとてもためになったので、いくつかご紹介していきたいと思います。

Vue Fes Japan 2019 公式サイト

公式サイト： https://vuefes.jp/2019/
GitHub： https://github.com/vuejs-jp/vuefes-2019

2019 の公式サイトも、2018 の公式サイトと同様に、Nuxt.js の静的ファイルの生成機能を使って作成しています。

CSS の構成について

• normalize.cssを使っている
• SCSS を使っている
• グローバルな SCSSを利用している
  • さらに、Nuxt Style Resourcesを利用して、SCSS の変数をグローバルで共有している
• 各コンポーネントでは Scoped CSSを利用している

このように、「グローバルな CSS」と「閉じられた CSS（Scoped CSS）」で構成されています。

ちなみにこのプロジェクトでは UI フレームワークや CSS フレームワークは使っていません。

コーディングするときにとても嬉しかったポイント

Web サイトデザイン主担当の沖さん（@448jp）が、Web サイトの仕様をドキュメント化して共有してくれました。

これがとても詳細まで定義されており、ブレークポイントごとの余白や、フォント・色などを CSS プロパティで指定してくださったおかげで、悩まずにすばやく実装することができました。

HTML/CSSを書く人はエスパーではないので、PSDやXDで配置されたオブジェクトのマージンがpxなのか、%なのか、vwなのかは読み解けない。ましてやブレークポイントごとに変わる場合はなお。デザイナーは見た目だけ作って終わりではなく、デザインの意図と仕様を実装者に伝えるところまで仕事としたい。

— 沖 良矢™ (@448jp) November 13, 2019

つよい...

私は普段デザインカンプをもらってコーディングをするとき、ブレークポイント付近のデザインをエスパーしてコーディングしたり、仕様を自分で決めたりしていたのですが、そうするとデザイナーさんと齟齬が生まれたり手戻りが発生したりして、開発に余計な時間がかかってしまうことがあります。

沖さんのようなデザイナーがいる環境というのは、なかなか恵まれていると思うのですが、Web サイトをデザインする人は詳細な仕様を明文化することで、実装側がとても助かるということを知ってもらえると良いなと思いました

CSS コーディングの知見

グローバルな CSS の設計について

• vuefes-2019/src/assets/stylesheets at master · vuejs-jp/vuefes-2019

CSS の各レイヤーをディレクトリやファイルごとに分類することで、どんな意味を持った CSS をどこに配置するか、共同開発する際にメンバーと認識が合うようになります。

• foundation
  • colors.scss ... 色の変数
  • reset.scss ... normalize.css によってブラウザごとの差異を整えた後に、さらにリセットしたいブラウザのデフォルトのスタイル
  • typography.scss ... タイポグラフィのスタイル
  • variables.scss ... 共通化して使える変数
• main.scss ... 各 SCSS ファイルを import しているファイル
• media_queries.scss ... メディアクエリによって要素を表示させるか否かを制御できるクラス
• utilities.scss ... 各画面で共通して使えるクラス

また、foundation配下の CSS を開発初期の段階で固めておくことで、CSS フレームワークを使わずとも統一感のとれた CSS を書いていくことができます。

ブレークポイントの名称は sppcではなく smmdlgを使う

私は今まで、ブレークポイントの切り替えで使う変数名の表記には sppcを使っていたのですが、この 2パターンだと中間層のサイズのブレークポイントを書きたい際に困ることがありました。

ブレークポイントの名前をサイズの名前にすると、中間層のサイズも柔軟に表すことができるようになるのでオススメです。

https://github.com/vuejs-jp/vuefes-2019/blob/master/src/assets/stylesheets/foundation/variables.scss#L1-L4

$layout-breakpoint--is-small:768px!default;$layout-breakpoint--is-small-up:769px!default;$layout-breakpoint--is-medium:980px!default;$layout-breakpoint--is-medium-up:981px!default;

sm（モバイル）サイズの要素の指定を相対指定にする

モバイル端末の違いによって、文字やコンテンツの幅が大きく変わってしまう問題については、サイズを相対指定（vw）にすることで解決しています。

文字やコンテンツの幅を相対指定にすることで、iPad と iPhone SE というような画面幅が違う端末でも、画崩れを起こさずに表現することができます。

ちなみにデスクトップサイズ以上の文字については、固定で指定しています（さすがにラップトップと大きいサイズのモニターでは幅が違いすぎるため）

計算が簡単なカードリストレイアウトの実装方法

SPONSORSセクションでは、スポンサープランごとに 1列に並ぶカードの幅を変える必要がありました。

• ゴールドは 1列 4カード、シルバーは 1列 5カード... というように並ぶ
• それぞれ 20px のガター（余白）がついている

当初、これを実装するために考えていたこととしては、

• スポンサープランごとのカードの幅を計算する
• カードの margin-rightと margin-bottomに 20px を設定する
• 右端に来る n 番目のカードは、 margin-right: 0;を設定する
  • n 番目の n の値は、スポンサープランごとに変わる

というようなことを書こうとしましたが、計算と実装が複雑になるため、別の方法をとることにしました。

計算が簡単になる方法として、ネガティブマージンと calc()を使うやり方があります。

<ulv-for="sponsorPlan in sponsorPlansHavingSponsors":key="sponsorPlan.plan"><liclass="sponsor-group":class="sponsorPlan.plan"><h3class="sponsor-plan">
          {{ sponsorPlan.name }}
        </h3><ul><liv-for="sponsor in sponsorsByPlan(sponsorPlan.plan)":key="sponsor.sys.id"class="sponsor"><!-- ... --></li></ul></li></ul>

.sponsor-group{ul{display:flex;// flexbox で実装するflex-wrap:wrap;// アイテムがはみ出したときに折り返すようにするjustify-content:center;// 中央揃えにするwidth:calc(100%+20px);// 💡幅を左右のガター分プラスするmargin:-10px;// 💡ネガティブマージンを使って余白を広めにとる}.sponsor{margin:10px;// 💡ガターの半分の幅を指定する（要素が隣り合うとガターの幅になる）width:calc((100%/5)-20px);// 普通サイズ（シルバー）の Sponsor バナーの横幅}}.sponsor-group.bronze{.sponsor{width:calc((100%/6)-20px);// ブロンズのバナーのときの横幅}}.sponsor-group.gold,.sponsor-group.special{.sponsor{width:calc((100%/4)-20px);// ゴールド、スペシャルのバナーのときの横幅}}

まず .sponsor-groupにネガティブマージンを使って、ガターの幅分だけ要素の幅を広めに指定します。

次に、カードの上下左右にガター分の marginを指定します（このときガターの半分の幅を指定することで、カードが隣り合うとガターの幅になります）

そして、カードの幅を calc()で計算して、flexbox で要素を並べると、簡単にカードリストが出来上がります。

ちなみにカードの幅の calc((100% / 5) - 20px);という部分は、

(sponsor-group の幅 / 1列に入るカードの数) - ガターの幅

という計算式になります。

こうするとことで、 1列に入るカードの数を変更すればカードの幅が変わるので、とても計算が簡単になります。

vuefes-2019/TheSponsorListSection.vue at master · vuejs-jp/vuefes-2019

↑のコードは TheSponsorListSection の簡略版ですが、コードだけではネガティブマージンをとっているあたりが分かりにくいと思うので、CodePen を用意しました。

See the Pen CSS coding for card list layout by rry (@ryamakuchi) on CodePen.

https://codepen.io/ryamakuchi/pen/LYExRpa

• group
  • ネガティブマージンを widthを使って、全体的にガターの幅分を広めにとる
• card
  • 上下左右にガターをつけて、calc()で幅ぴったりにする

当初考えていた、左側と下にガターをつける方法と比べると、右端に来る n 番目のカードのスタイルの上書きをするということがなくなるため、計算が簡単になります。

補足：ちなみに calc()は、IE 10 / IE 11 では一部うまく機能しない場合もあるため、実装するときは気をつけてください。

まとめ

CSS の設計をきちんと行うことで、フレームワークを使うことなく、メンテナンスしやすい＆共同開発しやすいサイト作成ができました。

もし CSS / UI フレームワークを使うことを検討しているのであれば、

create-nuxt-app で利用できる UI フレームワークを比較する - Qiita

も、あわせてご覧いただければ幸いです。

メリークリスマス！

この記事はAteam Brides Inc. Advent Calendar 2019 20日目の記事です。

本日はWebデザイナーの@naomunaomuが担当いたします。
2回目の登場です☺️

背景

VueのScoped CSSは非常に便利だと思うのですが、スタイルがバッティングするなどの懸念点もあり、結局BEMから抜け出せない感じがなんだかなあ・・と思っていたり。

参考
Vue.jsのscoped CSSは意外とバッティングする - Qiita

「CSSのグローバルスコープ問題を解決し、脱BEMしたい・・」

その銀の弾丸としてCSS in JSがあるのではないか。と淡い期待を込めて調べてみたところ、Vueの場合、Scoped CSSやUIフレームワークのおかげで、CSS in JSの参考例が少なく困ってしまいました・・　

Reactを先に学んだ自分は、「Reactのstyled-componentsってVueでも使えるの？」「Scss以外の選択肢を知っておきたい」と単純に気になったんですよね

というわけで紹介していきます！

そもそもCSS in JSってなに

その名の通り、JSをつかってスタイルを表現することが可能です。

よく勘違いされますが、インラインで展開されるスタイルとは別物です。
CSS in JSは<style>がDOMのTOPに表示されますし、
インラインでは使えない、:beforeなどの擬似要素も使えます。
そして、CSSにローカルスコープが付与できるんです。ひゃっほー！🎉

styled-compornent

GitHub - styled-components/vue-styled-components: Visual primitives for the component age. A simple port for Vue of styled-components 💅

Reactで使われてる方が多いかと思いますが、実はvueにもあります
JSで受け取ったpropsの値でCSSに当てられるところが最高です！

Vue<=>Reactを行き来させる予定のある場合、統一した書き方ができるところもGoodですね

<styled-button>Normal</styled-button>
<styled-button primary>Primary</styled-button>

タグ付きテンプレートリテラルを使用し、JS内にCSSを書きます。

<script>importstyledfrom'vue-styled-components';constbtnProps={primary:Boolean};//scriptタグの中にスタイルを書きますconstStyledButton=styled('button',btnProps)`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  background: ${props=>props.primary?'palevioletred':'white'};
  color: ${props=>props.primary?'white':'palevioletred'};
`;exportdefaultStyledButton;</script>

GitHub - styled-components/vue-styled-components: Visual primitives for the component age. A simple port for Vue of styled-components 💅

JSでCSS書いてますが、最終的にはちゃんとCSSで吐き出されるので、従来通りCSS設計の考え方、定数管理は必要です。

vue-emotion

GitHub - egoist/vue-emotion: Seamlessly use emotion (CSS-in-JS) with Vue.js
こちらもReactユーザーには馴染みがあるのではないでしょうか。
後発のライブラリな分、CSS in JSでできることはだいたいできるとのこと。

styled-compornent同様、JSでCSS書いてます。

CSS-in-JSのライブラリとして「emotion」を選択している理由 - Qiita

実行速度・ファイルサイズを比べると、styled-compornentよりemotionの方がよさそうですが、ちょっと情報が少ないですね・・ドキュメントを読んだところ、vue-emotionではcss PropやObject Stylesなどは使えなそう・・
styled-compornentでよさそうです。

CSS Modules

Scoped CSSを使っている方は一番馴染み深い書き方かもしれません。
Scoped CSSがカスタムデータ属性data-hogehogeを付与することで、元のclass名に影響を与えないことに対し、
CSS Modulesの場合、コンポーネント名_class名_ランダムな値となり、class名自体が変わることで、css名のバッティングを防ぎます。

<style>タグにscopeの代わりに、module属性を記述できます。

//公式ドキュメントより抜粋
<stylelang='scss'module>.blue{color:blue;}</style>

htmlの方はこんな感じで、:class=$style.fooで記述します。:がないとスタイルが反映されないので注意！

//公式ドキュメントより抜粋
<templatelang="pug">
  p(:class="$style.blue" :id="$style.blue")
    This should be blue
</template>

通常のclassとも併用できます。utilityなど、グローバルなcssを当てるときはこちら。

//公式ドキュメントより抜粋
<templatelang="pug">
  //- 複数スタイルの指定も可能
  p.red(:class="[$style.red, $style.bold]" :id="$style.blue")
    This should be blue

  p(:class="{ [$style.red]: isRed }" :id="$style.blue")
    This should be blue
</template>

通常のscopeとも併用できますが、そんなに併用するかわかりません・・

//公式ドキュメントより抜粋
<stylelang='scss'module>.blue{color:blue;}</style><stylelang='scss'scope>.red{color:red;}</style>

導入ハードルも低く個人的にはおすすめですが、やっぱりScoped CSSに比べると、コードの見通しが気になります😢
自分の場合VueはPugで書いているので、PugでシンプルにHTMLが書ける分、冗長さが際立ってしまうのが残念というか・・
この辺は好みですかね？

結論

以上3つをまとめた結果です。

・BEMを辞める、React<->Vueの行き来を考えるなら->styled-compornent
・Vue単体なら->CSS Modules
・別に不便ない->Scoped CSS

というところが良いかなと言う印象でした。
BEM使うからclassのバッティング懸念しない、という場合は引き続きScoped CSSで全く問題なさそうです。

個人的にはstyled-compornentが好きなので、Vueでも試してみようと思います🙇‍♀️

おまけ：デザイナ的にどっちが使いやすいとかある？

正直とくにありません。
どのCSS in JSを使用しても、下記が考慮されれば問題ありませんし、だいたいどれでも実現できます。若干の書き方の違い、気持ち悪さは慣れです
- propsでによるスタイルの変更ができる
- グローバル変数が使える
- Scssが使えなければ、CSSで対応可能

ただ、UIフレームワークでしか開発経験がないメンバーしかいない場合、保守性・汎用性を考慮したCSS設計を行えるデザイナと協業できるとよさそうです〜

私たちのチームで働きませんか？

エイチームは、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！

• ハナユメ サイト開発グループ
• HIMARI開発チーム
• 技術開発部

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずはチャットでざっくばらんに話をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

Qiita Jobsよりメッセージお待ちしております！

Misoca+弥生 Advent Calendar 2019の20日目の記事です

EFO（フォーム最適化）という領域もあるとおりwebデザインにおいてFormはコンバージョンに直結する重要な要素です。そのフォームを手軽にデザインする上欠かせないのがCSSフレームワークだと思います。

今回は主要cssフレームワーク7選をフォームの視点で比べてみました! 💪

Bootstrap4

たぶん誰しも一度は触ったことあるCSSフレームワークの王様。
これぞBootstrapというフォーム。めっちゃ見たことある感じです。

See the Pen WNbRPMY by ryo (@kawamataryo) on CodePen.

Foundation

bootstrapと双璧をなす人気のフレームワーク。EmailのCssフレームワークもあります。
スタイルの指定はbootstrapよりわかりやすく、タグも深くならず快適だなとは思いました。
デザイン的にもノーマルですね。

See the Pen GBYbBy by ryo (@kawamataryo) on CodePen.

Tailwind CSS

良い!!
他とは全く違うUtility Firstの思想で作られたCSSフレームワーク。
Utilクラスを組み合わせて書くのでどうしてもクラス指定は大量になりますが、とても自由にデザイン出来て最高です。
Formの見た目もこれが一番好きですね。

See the Pen PowWLMo by ryo (@kawamataryo) on CodePen.

Semantic UI

セマンティックなマークアップでページを作成できるCSSフレームワーク。
クラス指定が意味合いなので、直感的に指定できます。ただネストが深くなりがちな気もしました。
デザインはとてもバランス良いなと思いました。

See the Pen semantic ui Form by ryo (@kawamataryo) on CodePen.

Bulma

Flexboxが秀逸なフレームワークです。
こちらもclass名がコンポーネント単位で直感的に指定できて書き味はすごく好きです。

See the Pen jpeOdg by ryo (@kawamataryo) on CodePen.

Materialize

マテリアルデザインのCSSフレームワーク。
他と比べるとかなり異色ですね。若干構成複雑で、余白も微妙なところあるのですが、ちゃんと作ればGoogleぽい良い感じのFormが出来そうです。

See the Pen material by ryo (@kawamataryo) on CodePen.

UIKit

かなり機能豊富なCSSフレームワーク。
こちら今回始めて使ったのですが、Documentも充実していて分かりやすいですし、デザインぱりっと決まるので良いですね。

See the Pen UIKit form sample by ryo (@kawamataryo) on CodePen.

最後に

以上「最高のFormを探せ！cssフレームワークのFormコンポーネントを比較してみる」でした。
記事を書く前はもっと各フォームの見た目違いがあると思ったのですが、割と同じようなデザインでしたね。
ただ細かい点やマークアップの書き味は大分違うので、好み分かれそうです。
CSSフレームワーク選定の一助になれば幸いです!

明日21日の Misoca+弥生 Advent Calendar 2019はshoko_yokoyamaさんです！