第30回高専プロコン、突如出現した移動部門で盛り上がっていますね。 私は今回自宅待機を選んだので酷い目に合わずほっとしているのですが、よく考えると参戦勢よりも関東自宅待機勢の方が酷い目に合うのでは？と思ってるところです1。 さて、プロコンといえば「名刺クエスト」。高専生同士が名刺を交換し、交換した名刺の数で勝敗を決めるという、プロコンの中でも最もフェアな部門です。 東京高専の名刺のデザインは一昨年から私が担当していました。友人のMacに入っているCreative Cloudのイラレを使ってデザイン・印刷を行っていましたが、今年は彼が貸してくれないので、HTMLとCSSで書くことにしました。 この記事を参考にしました。 paper.cssを使ってブラウザだけで名刺を印刷する https://qiita.com/okoppe8/items/abcafdad3a894bca7f38 名刺をデザインする 名刺のデザインをどうしようかな～と考えてた時に、ちょうどポケットの中に入ってたのは定期券でした。 IC定期券風名刺を刷れば面白いんじゃないか、と思いました。東京高専ですし、緑色なのはまだしもピンク色のは東京の象徴と言えます。 また、通生が比較的多い(多分)東京高専の象徴とも言えます。 そこでこんなデザインを作りました。 また、一応緑色風と真面目なデザインも作っておきました。 カードの外形 91mm×55mmなので、こんな感じに指定しています。 meishi.css card { position: absolute; width: 91mm; height: 55mm; } 背景の文字 ピンク色定期券の文字は、Google Fontsで色々と検討した結果、Nova Monoがイメージに近いという結論に至りました。Google Fontsの読み込んで使っています。 上の文字 定期券風の文字は、通学定期を参考にして描きました。基本的にFlexboxレイアウトにして、配置していきます。 定期上の文字は横幅2倍だったり半分だったりするのですが、これはcssのtransform要素で解決できます。 teiki.css .double { transform: scale(2, 1); /* width方向に2倍 */ } ただし、transformには重大な欠点がありまして、Flexboxによる配置後にtransformが実行されるようなのです。 例えば、上の名刺で言う「仕事」は半幅、「名刺作り……」2倍幅のtransformを実行しているのですが、Flexboxが配置された後にtransformされるので、何もしなければ変なマージンが空いてしまいます。 この画像の赤線の部分です。 transform: matrixを使って平行移動も噛ませることでなんとかしましたが、どうにかならないのかな、と思う仕様でした。 また、矢印はfontawesomeで実装しています。 名刺のPDF生成 名刺は一度10枚単位の名刺用紙に刷り、そこから切り取り線に沿って切り取るという方式です。 そのため、名刺用紙に刷るPDFが必要でした。 今回取ったフローとしては、以下の通りです。 Google FormでSpreadsheet上にデータを集める Spreadsheet上のデータをクリップボード経由でExcelに出し、CSVで出力 それが完了すれば、次のようなコードで自動的にPDFに変換できます。 CSV読み込み データに対し以下を繰り返す。 対象データをテンプレートエンジンに掛けて、HTMLを生成 そのHTMLをHTTPサーバーで配信 google-chromeのヘッドレスモードを使い、--print-to-pdfでPDF生成 HTTPサーバーを閉じる 今思えばHTTPサーバーでまとめて配信すれば良かったのですが、プログラムの複雑性の問題や時間がなく適当に書き殴りたかったのでforループ一個で済むこの方式になりました。 まず予めHTMLのテンプレートを作成しました。上のHTMLとCSSをコピーしてきて、名前欄やID欄などをGolangのhtml/template方式で変数展開に書き換えた後、JavaScriptで10枚に増やす処理を追加しました。 するとこんな感じになりました 後はこれをHTTPサーバーで配信して、ChromeのheadlessモードでPDF生成すればPDFの出来上がりで、このPDFをサイズ100%で刷れば名刺が完成します。 何人も連続で刷る場合、PDFを連結して刷った方が良いです。Popplerに付属するpdfuniteが使いやすかったです。 困ったこと・反省点 transformの仕様 Go言語を選んだのはミス。ChromeとHTMLテンプレートエンジンを使うのであればNode.jsが相応しかった Macの印刷設定がまいどまいどサイズ95%に戻るせいで、慣れないうちは何度かミスプリントしてしまった。 全般的に人力が多かったので限界っぽくなった。次はもっと自動化したい。 緑色の定期券も作ろうとしたのだが、PDFから直接印刷しようとすると変な模様が出てしまう。画像化すれば問題はないものの、プリンタの読み込みに時間がかかるので、量産できなかった。 最後に プロコン期間中、東京高専プロコンゼミと名刺交換して伝説の高専生の本名を手に入れよう！ 本記事には登場しなかった「真面目なデザイン」「緑色の定期券風」の名刺も手に入る！2 願わくばこの文が不謹慎にならないことを。 ↩ ピンク色定期券風の裏が真面目なデザインか緑色定期券になっています。緑色は超レア。 ↩
第30回高専プロコン、突如出現した移動部門で盛り上がっていますね。 私は今回自宅待機を選んだので酷い目に合わずほっとしているのですが、よく考えると参戦勢よりも関東自宅待機勢の方が酷い目に合うのでは？と思ってるところです1。
さて、プロコンといえば「名刺クエスト」。高専生同士が名刺を交換し、交換した名刺の数で勝敗を決めるという、プロコンの中でも最もフェアな部門です。
東京高専の名刺のデザインは一昨年から私が担当していました。友人のMacに入っているCreative Cloudのイラレを使ってデザイン・印刷を行っていましたが、今年は彼が貸してくれないので、HTMLとCSSで書くことにしました。
この記事を参考にしました。 paper.cssを使ってブラウザだけで名刺を印刷する https://qiita.com/okoppe8/items/abcafdad3a894bca7f38
名刺のデザインをどうしようかな～と考えてた時に、ちょうどポケットの中に入ってたのは定期券でした。 IC定期券風名刺を刷れば面白いんじゃないか、と思いました。東京高専ですし、緑色なのはまだしもピンク色のは東京の象徴と言えます。 また、通生が比較的多い(多分)東京高専の象徴とも言えます。
そこでこんなデザインを作りました。
また、一応緑色風と真面目なデザインも作っておきました。
91mm×55mmなので、こんな感じに指定しています。
card { position: absolute; width: 91mm; height: 55mm; }
ピンク色定期券の文字は、Google Fontsで色々と検討した結果、Nova Monoがイメージに近いという結論に至りました。Google Fontsの読み込んで使っています。
定期券風の文字は、通学定期を参考にして描きました。基本的にFlexboxレイアウトにして、配置していきます。 定期上の文字は横幅2倍だったり半分だったりするのですが、これはcssのtransform要素で解決できます。
.double { transform: scale(2, 1); /* width方向に2倍 */ }
ただし、transformには重大な欠点がありまして、Flexboxによる配置後にtransformが実行されるようなのです。 例えば、上の名刺で言う「仕事」は半幅、「名刺作り……」2倍幅のtransformを実行しているのですが、Flexboxが配置された後にtransformされるので、何もしなければ変なマージンが空いてしまいます。
この画像の赤線の部分です。
transform: matrixを使って平行移動も噛ませることでなんとかしましたが、どうにかならないのかな、と思う仕様でした。
また、矢印はfontawesomeで実装しています。
名刺は一度10枚単位の名刺用紙に刷り、そこから切り取り線に沿って切り取るという方式です。 そのため、名刺用紙に刷るPDFが必要でした。
今回取ったフローとしては、以下の通りです。
それが完了すれば、次のようなコードで自動的にPDFに変換できます。
今思えばHTTPサーバーでまとめて配信すれば良かったのですが、プログラムの複雑性の問題や時間がなく適当に書き殴りたかったのでforループ一個で済むこの方式になりました。
まず予めHTMLのテンプレートを作成しました。上のHTMLとCSSをコピーしてきて、名前欄やID欄などをGolangのhtml/template方式で変数展開に書き換えた後、JavaScriptで10枚に増やす処理を追加しました。 するとこんな感じになりました
後はこれをHTTPサーバーで配信して、ChromeのheadlessモードでPDF生成すればPDFの出来上がりで、このPDFをサイズ100%で刷れば名刺が完成します。
何人も連続で刷る場合、PDFを連結して刷った方が良いです。Popplerに付属するpdfuniteが使いやすかったです。
プロコン期間中、東京高専プロコンゼミと名刺交換して伝説の高専生の本名を手に入れよう！ 本記事には登場しなかった「真面目なデザイン」「緑色の定期券風」の名刺も手に入る！2
願わくばこの文が不謹慎にならないことを。 ↩
ピンク色定期券風の裏が真面目なデザインか緑色定期券になっています。緑色は超レア。 ↩
Webサービスの制作におけるline-heightの扱い方とかをまとめました。 コーディングのポイント CSSをリセットしてから、bodyにline-heightを入れていると思いますがそれは大きな間違いです。 bodyにline-heightを入れてしまうと全ての要素に適応されてしまうため、buttonやinputにもline-heightが入ってしまいます。 button { height: 56px; line-height: 56px; } 上のように実装している場合はそこまで影響はないですが、下のように実装するとデザインに崩れが生じます。 button { padding: 16px 32px; } 文字が一行で収まるような要素にはline-heightを1に指定し、複数行になる場合は個々にline-heightを指定すると良いです? body { line-height: 1; } p { line-height: 1.8: } button { padding: 16px 32px; } 和文フォントと欧文フォント 和文フォントの14pxと欧文フォントの14pxでは、和文フォントの方がはるかに大きく見えます。 仮想ボディの占有率が違うため、大きく見えてしまうのです。 font-sizeは、和文は13〜16px、欧文フォントは15〜18px line-heightは、和文は1.4〜1.8、欧文フォントは1.2〜1.4 くらいを目安に指定するとユーザビリティを考慮したものになると思います。 太字と細字 上で、ある程度のline-heightがきまりましたが、太字と細字でもline-heightは変えた方が良いです。 強調の意図があって太文字を選ぶと思うので、そういうときは普通のline-heightより少し値を小さくしてあげると文字のバランスが整います（文字が1行で収まる想定の場合はこの記述はそもそもline-heightいりません）? body { line-height: 1; } h1, h2, h3 { line-height: 1.4: } p { line-height: 1.8; } 印象のつけかた line-height、font-sizeだけでサービスの印象が大きく変わります。 どんな印象にしたいかを考えて、サイズを決めていきます。 以下、参考になれば。（スマホ画面での情報です。） ニュース系メディア ニュース系メディアの特徴はとにかく1画面に対しての情報量が多いです。 font-sizeは16px、line-heightは1.7前後。 左右marginは10px前後なのでmarginを大きく取らない代わりにline-heightを多めにとって、文字のつまりを最小限に抑えながら可読性を重視しています。 女性向けキュレーションメディア 女性向けのメディアはかわいらしさを重視しています。 そのため、フォントサイズを小さめにしていて、letter-spacingをとっているケースもあります。 font-sizeは14px、line-heightは1.5前後。 写真と文章を切り分けるためにline-height少なめに、写真とのmarginは大きめに取っています。 IT企業のブログ font-sizeは16px、line-heightは1.8前後。 letter-spacingを入れていることもあります。 左右marginは多くとりませんが、letter-spacingを入れることで文字の間隔が空き、marginの狭さをカバーしつつ、1画面のコンテンツ表示量を多くしています。 漢字をたくさん含んでいる文章でも詰まっていると感じないように工夫されています。 技術系メディア font-sizeは16px、line-heightは1.8前後。 文章内にコードが挿入されるので、line-heightは多めにとっています。 文章間のmarginが少ないので、hrやコードをうまく利用する設計になっています。 おわりに 参考になるものはまだまだたくさんあるので随時更新できればと思います。 メディアに限らず、文字の可読性は重要です。 読む時やクリック、タップをするときに少しでも違和感があるとそれだけで機会損失をする恐れがあります。 ターゲットを見極めて、綺麗なコードと見た目の設計を心がけましょう
Webサービスの制作におけるline-heightの扱い方とかをまとめました。
CSSをリセットしてから、bodyにline-heightを入れていると思いますがそれは大きな間違いです。 bodyにline-heightを入れてしまうと全ての要素に適応されてしまうため、buttonやinputにもline-heightが入ってしまいます。
button { height: 56px; line-height: 56px; }
上のように実装している場合はそこまで影響はないですが、下のように実装するとデザインに崩れが生じます。
button { padding: 16px 32px; }
文字が一行で収まるような要素にはline-heightを1に指定し、複数行になる場合は個々にline-heightを指定すると良いです?
body { line-height: 1; } p { line-height: 1.8: } button { padding: 16px 32px; }
和文フォントの14pxと欧文フォントの14pxでは、和文フォントの方がはるかに大きく見えます。 仮想ボディの占有率が違うため、大きく見えてしまうのです。
font-sizeは、和文は13〜16px、欧文フォントは15〜18px line-heightは、和文は1.4〜1.8、欧文フォントは1.2〜1.4 くらいを目安に指定するとユーザビリティを考慮したものになると思います。
上で、ある程度のline-heightがきまりましたが、太字と細字でもline-heightは変えた方が良いです。 強調の意図があって太文字を選ぶと思うので、そういうときは普通のline-heightより少し値を小さくしてあげると文字のバランスが整います（文字が1行で収まる想定の場合はこの記述はそもそもline-heightいりません）?
body { line-height: 1; } h1, h2, h3 { line-height: 1.4: } p { line-height: 1.8; }
line-height、font-sizeだけでサービスの印象が大きく変わります。 どんな印象にしたいかを考えて、サイズを決めていきます。
以下、参考になれば。（スマホ画面での情報です。）
ニュース系メディアの特徴はとにかく1画面に対しての情報量が多いです。 font-sizeは16px、line-heightは1.7前後。 左右marginは10px前後なのでmarginを大きく取らない代わりにline-heightを多めにとって、文字のつまりを最小限に抑えながら可読性を重視しています。
女性向けのメディアはかわいらしさを重視しています。 そのため、フォントサイズを小さめにしていて、letter-spacingをとっているケースもあります。 font-sizeは14px、line-heightは1.5前後。 写真と文章を切り分けるためにline-height少なめに、写真とのmarginは大きめに取っています。
font-sizeは16px、line-heightは1.8前後。 letter-spacingを入れていることもあります。 左右marginは多くとりませんが、letter-spacingを入れることで文字の間隔が空き、marginの狭さをカバーしつつ、1画面のコンテンツ表示量を多くしています。 漢字をたくさん含んでいる文章でも詰まっていると感じないように工夫されています。
font-sizeは16px、line-heightは1.8前後。 文章内にコードが挿入されるので、line-heightは多めにとっています。 文章間のmarginが少ないので、hrやコードをうまく利用する設計になっています。
参考になるものはまだまだたくさんあるので随時更新できればと思います。 メディアに限らず、文字の可読性は重要です。 読む時やクリック、タップをするときに少しでも違和感があるとそれだけで機会損失をする恐れがあります。 ターゲットを見極めて、綺麗なコードと見た目の設計を心がけましょう
はじめに 中身を切り替えできるお手軽モーダルウィンドウの作り方。 使用言語 HTML SCSS（CSSでも可） コード See the Pen JjjYvOG by k1-web (@k1-web) on CodePen. やってること ラジオボタンを判定にしてチェックされているかどうかで表示非表示を切り替えている。 「#close（閉じる）」か「#overlay（背景）」を押すなどのチェックしている状態だと、モーダルウィンドウを非表示にする。 「#handle-1」にチェックが付いていたら閉じる・背景・コンテンツを表示させる。 表示させるコンテンツは「#handle-1」に隣接する次の要素を表示させる。 xxx.html <input type="radio" name="modal" id="close"> <input type="radio" name="modal" id="overlay" checked> <input type="radio" name="modal" id="handle-1"> <div id="modal-1" class="wrap wrap-1"></div> xxx.css #handle-1 + #modal-1 { display: none; } #handle-1:checked + #modal-1 { display: block; } 背景がスクロールするのがイヤな人向け追加jQuery PCとSPとで少し記述は違いますが、以下のjQueryを追加することで、背景スクロールも制御できます。 PC用 pc.js $('input[name="modal"], label.handle').on('change blur click focus', function(){ if ( $('input#close').prop('checked') || $('input#overlay').prop('checked') ){ $('html, body').removeAttr('style'); } else { $('html, body').css({'overflow':'hidden'}); } }); SP用 sp.js $('input[name="modal"], label.handle').on('change blur click focus', function(){ if ( $('input#close').prop('checked') || $('input#overlay').prop('checked') ){ $('html, body').removeAttr('style'); $('body').off('.noScroll'); } else { $('html, body').css({'overflow':'hidden'}); $('body').on('touchmove.noScroll', function(e) { e.preventDefault(); }); } });
中身を切り替えできるお手軽モーダルウィンドウの作り方。
使用言語
See the Pen JjjYvOG by k1-web (@k1-web) on CodePen.
ラジオボタンを判定にしてチェックされているかどうかで表示非表示を切り替えている。 「#close（閉じる）」か「#overlay（背景）」を押すなどのチェックしている状態だと、モーダルウィンドウを非表示にする。 「#handle-1」にチェックが付いていたら閉じる・背景・コンテンツを表示させる。 表示させるコンテンツは「#handle-1」に隣接する次の要素を表示させる。
<input type="radio" name="modal" id="close"> <input type="radio" name="modal" id="overlay" checked> <input type="radio" name="modal" id="handle-1"> <div id="modal-1" class="wrap wrap-1"></div>
#handle-1 + #modal-1 { display: none; } #handle-1:checked + #modal-1 { display: block; }
PCとSPとで少し記述は違いますが、以下のjQueryを追加することで、背景スクロールも制御できます。
PC用
$('input[name="modal"], label.handle').on('change blur click focus', function(){ if ( $('input#close').prop('checked') || $('input#overlay').prop('checked') ){ $('html, body').removeAttr('style'); } else { $('html, body').css({'overflow':'hidden'}); } });
SP用
$('input[name="modal"], label.handle').on('change blur click focus', function(){ if ( $('input#close').prop('checked') || $('input#overlay').prop('checked') ){ $('html, body').removeAttr('style'); $('body').off('.noScroll'); } else { $('html, body').css({'overflow':'hidden'}); $('body').on('touchmove.noScroll', function(e) { e.preventDefault(); }); } });
10/8～10/10 勉強したこと 背景に画像を入れる・その際は画像が繰り返し表示になるので、画面いっぱいに表示も可能 中央寄せの際はwidthを書いてからmargin:0 auto; 透過の書き方（全体と背景だけの分が違う） 文字の間隔・行間の書き方 hoverのアニメーションのつけ方 要素の違い ブロック要素→要素が横いっぱい広がって縦に並ぶ インライン要素→平べったく横に並ぶ 幅は高さは指定できない インラインブロック要素→並びがインライン・中身はブロック 10/8～10/10 気を付けたいと感じたこと 前の記事でCSSを書く際じclass名の前に.を付け忘れることがあったが、class名でないときは.が不要なので気を付けたい。 border-radius:〇〇px;は値が大きくなるほど丸に近くなる。 padding:の左右だけ設定したい場合に、上下の0pxを入れ忘れることがあるので気を付ける。 振り返り まだ覚えたことを自分の物にできていないので、復習の時間をしっかり取るようにしていきたい。 (一度書いたものをリセットしてスライドを見ないで書き直し) すべて覚えきりたいが、まずは何ができるか・どんなことができたか 少しずつ進めていきたい。HTMLとCSSは18日までに復習含めてひと段落させたい。 やっていく中で、指示を見ずに見本を見て考えて出来るようにしていきたい。
まだ覚えたことを自分の物にできていないので、復習の時間をしっかり取るようにしていきたい。 (一度書いたものをリセットしてスライドを見ないで書き直し) すべて覚えきりたいが、まずは何ができるか・どんなことができたか 少しずつ進めていきたい。HTMLとCSSは18日までに復習含めてひと段落させたい。 やっていく中で、指示を見ずに見本を見て考えて出来るようにしていきたい。
