完成像 フラッシュメッセージ（下記gif画像）をhtml, css, jqueryで実装したのでコードと利用方法の備忘録を残しておきたいと思います。コードも解説しているのでご参考になれば幸いです。 Codeと解説 html html <button class="js-show-flash-success">成功メッセージ</button> <button class="js-show-flash-fail">失敗メッセージ</button> <div id="flash-msg-area"></div> メッセージ表示用のボタン（成功/失敗メッセージ用）とフラッシュメッセージエリア css css #flash-msg-area { opacity: 0; position: absolute; left: 50%; top: -20px; transform: translateX(-50%); transition: all 200ms ease-out; } #flash-msg-area.show { opacity: 1; top: 20px; } #flash-msg-area .flash_message { display: inline-block; width: 200px; text-align: center; font-size: 15px; padding: 10px 20px; color: #fff; background-color: #86a3ff; box-shadow: 1px 1px 2px 1px #ddd; } #flash-msg-area .flash_message.error { background-color: #ff8e86; } このcssでやっていることは、 ・メッセージの表示位置を中央にする ・transitionをつけることでopacity=0～1、top=-20px～20pxの変化にグラデーションをつける(徐々にメッセージを表示しつつ、スライドインする動作) ⇒transitionは動作の変化を少しずつつけることができるプロパティです。ここが参考になります。 ・メッセージエリアはあらかじめ透明（opacity=0）として非表示にして、.showが追加されたときに不透明（opacity=1）として表示する(⇒transitionの効果と組み合わさって、.showが追加されると徐々に表示されて、.showが除かれると徐々に消えていく感じになる) ・メッセージエリアは非表示(opacity=0)のときに基準位置よりも20px上に配置しておき、表示(opacity=1)のときに基準位置よりも20px下に配置する(⇒transitionの効果と組み合わさって、.showが追加されると上から下スライドインし、.showが除かれると下から上にスライドアウトする) 図で示すと下記のような感じで、初期位置を上にずらして透明にしておいて、表示するときに不透明にしつつ元の位置に戻してあげれば、transitionの効果で最初に見せたフラッシュメッセージのような動作になります。 javascript javascript $(function(){ //フラッシュメッセージ用の関数をjqueryに登録 $.fn.flash_message = function(options) { //デフォルト値 options = $.extend({ text: '完了しました', time: 3000, how: 'before', class_name: '' }, options); return $(this).each(function() { //指定したセレクタを探して取得 if ($(this).find('.flash_message').get(0)) { $(this).find('.flash_message').remove(); } var message = $('<span />', { 'class': 'flash_message ' + options.class_name, text: options.text //フェードイン表示 }); $(this)[options.how](message).addClass('show'); //delayさせてからフェードアウト message.delay(options.time).queue(function(){ $(this).parents('#flash-msg-area').removeClass('show'); }); }); }; // ボタンクリックでフラッシュメッセージ（成功）を表示 $('.js-show-flash').click(function() { $('#flash-msg-area').flash_message({ text: '登録に成功しました', how: 'append' }); }); // ボタンクリックでフラッシュメッセージ（失敗）を表示 $('.js-show-flash-fail').click(function() { $('#flash-msg-area').flash_message({ text: '失敗しました', how: 'append', class_name: 'error' }); }) }) javascriptでやっていることは、 ・下記関数(flash_message)をjqueryに登録 　- 表示するときにメッセージエリア(#flash-msg-area)にshowクラスをつけ、ある時間が経過したら外す ・ボタンクリックされたら、flash_messageを動作させる ということです。 ひとつひとつコードを説明します。 ① $.fn.flash_message() $.fn.flash_message = function(options) { flash_messageをjqueryに登録します。登録しておくことで、通常のjqueryの関数を呼び出す感じでflash_messageを呼び出すことができます。$('#flash-msg-area').flash_message のような感じです。 このように記載すれば、通常の関数みたく呼び出せるんだ、という理解でいいのですが、より正確に理解するためには$.fnとは？というところから学ぶ必要があります。詳しく知りたい方はjQuery拡張の仕組み 〜 JSおくのほそ道 #013を参照ください。 ② $.extend() options = $.extend({ text: '完了しました', time: 3000, how: 'before', class_name: '' }, options); ここではフラッシュメッセージのオプションを設定しています。 オプション 初期値 説明 text 完了しました メッセージ内容 time 3000 メッセージ表示時間 how before メッセージテキストエリアの追加方法 class_name なし メッセージテキストエリア（.flash_message）に追加したいclass名 $.extend関数は、複数のオブジェクトをマージして返してくれるメソッドです。（第一引数に対し、第二引数をマージする） 参考サイト：jQuery.extend() メソッドの使い方まとめ 例えば、下記optionsを第二引数に与えた場合、 options = { time: 5000, class_name: 'warning' } 返却されるoptionsは、下記のようになります。 options = { text: '完了しました', time: 5000, how: 'before', class_name: 'warning' } つまり、第二引数で指定したものはその値に置き換わり、ないものは初期値が使用されるということです。 ③ $(this).each(function(index, element)) each関数は、$()にマッチした要素をひとつずつ取得して実行します。 例えば、下記HTML要素があって、javascriptを実行した場合、 html <ul> <li>html</li> <li>css</li> <li>jquery</li> </ul> javascript $('li').each(function(index, element){ console.log(element); }) ログには下記のように出力されます。 li要素にマッチするHTML要素が一つずつ順番に取得されているのがわかると思います。 ここで改めて下記コードを眺めてみます。 $(this).each(function() {}) eachは$(this)にマッチする要素を一つずつ取得して実行するはずです。では、ここでいう$(this)とはなんでしょうか。 $(this)をログに出力した結果、下記が1度だけ出力されていました。 つまり、$(this)にマッチするhtml要素はdiv#flash-msg-areaだけで、この要素に対して.each(function(){})のなかでshowクラスの付け外しを実施したということです。よくよくかんがえれば、id要素なのでひとつしかないのは当然で、あえてeachする必要はありませんが、class要素の場合は複数取得する可能性があるので、そのときも動作するようにケアしている感じです。 ④ $(this).find('.flash_message').remove() if ($(this).find('.flash_message').get(0)) { $(this).find('.flash_message').remove(); } flash_message関数内でメッセージ表示エリア(.flash_message)をフラッシュメッセージエリア(#flash-msg-area)に追加しています。なので、はじめに.flash_messageの要素を削除してから、新規の.flash_messageを追加しています。$(this).find('.flash_message').remove()を削除してコードを実行するとわかりますが、.flash_messageをremoveしておかないと下記のようにメッセージが重なって表示されます。 ⑤ $('<span />', { } ) var message = $('<span />', { 'class': 'flash_message ' + options.class_name, 'text': options.text }); この記述をすることで、下記html要素を作成することができます。 <span class="flash_message ">（options.textの内容）</span> この記述はちょっと見慣れないですが、$()は第一引数に何を指定するかによって返却されるものが大きくかわってくることを頭にいれておきましょう。下記を見れば、いろいろなケースがあるのがわかると思います。 jQueryセレクタの仕組み 〜 JSおくのほそ道 #011 上記参考サイトでいうと、今回のケースはパターン7に相当します。仕様についてより詳しく知りたいかたはjqueryの公式リファレンスを参照ください。 ⑥ $(this)[options.how](message).addClass('show'); $(this)[options.how](message).addClass('show'); フラッシュメッセージエリア(#flash-msg-area)内にフラッシュメッセージテキストエリア(.flash_message)を追加し、さらにshowクラスを追加しています。 このコードは下記と同義です。 $(this).before(message).addClass('show') なぜ$(this)[options.how]のような書き方をしているかというと、関数名を変数として扱っているので、$(this).options.how(message).addClass('show')と記述すると、まったく別の意味で解釈されてしまうからです。これを実行すると「Cannot read property 'how' of undefined」となります。そもそも$(this)にoptions関数（optionsオブジェクト）なんてないので当たり前です。 関数を変数内にいれて扱いたい場合はこのように記述することは覚えていてもよいかもしれません。 ⑦ message.delay(options.time).queue(function(){}) message.delay(options.time).queue(function(){ $(this).parents('#flash-msg-area').removeClass('show'); }); options.timeミリ秒後にメッセージエリア(#flash-msg-area)からshowクラスを外す動作をしています。これによりメッセージがoptions.timeミリ秒だけ表示されて消えるわけです。delayの後に実行したい関数をqueueにより独自に設定しています（ここではshowクラスを除く動作）。もし設定したい動作がjqueryオブジェクト内の関数でよいならqueueを使う必要はなく、message.delay(options.time).removeClass('show')のような感じ（メソッドチェーンと呼ばれます）で記載すればいいです queue関数について補足します。 まずは"キュー"の用語説明です。 キューとは、最も基本的なデータ構造の一つで、要素を入ってきた順に一列に並べ、先に入れた要素から順に取り出すという規則で出し入れを行うもの。順番を待つ人の行列と同じ仕組みであるため「待ち行列」とも訳される。 行列ができてるお店に並ぶことを想像するとわかりやすい(?)かもです。さきにならんでいる人から先にお店に入りますよね。そういうイメージです。 下記のようなjqueryのコードがあるとき、show⇒animate⇒slideToggle⇒slideToggle⇒animate⇒hide⇒show⇒slideUpの順にキューに登録されます。 function runIt() { $(div) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .slideToggle( 1000 ) .slideToggle( "fast" ) .animate({ left: "-=200" }, 1500 ) .hide( "slow" ) .show( 1200 ) .slideUp( "normal", runIt ); } 上記のケースは、jqueryオブジェクトが持っている関数を登録していますが、もし独自の関数を登録したい場合は、queue(function(){})に実装します。 function runIt() { $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .queue(function() { $( this ).addClass( "newcolor" ).dequeue(); }) .animate({ left: "-=200" }, 500 ) .queue(function() { $( this ).removeClass( "newcolor" ).dequeue(); }) .slideUp(); } 少し話はそれますが、、 はじめのコードに戻ると、、 message.delay(options.time).queue(function(){ $(this).parents('#flash-msg-area').removeClass('show'); }); このコードって、 message.delay(options.time).parents('#flash-msg-area').removeClass('show'); }); このように記載できそうじゃないですか？でもこの書き方はできません。 理由はメソッドチェーンは、戻り値がjqueryオブジェクトである必要があるからです。上記のparentsの返り値はjqueryオブジェクトではないのでメソッドチェーンで記載できないのです。 関数の戻り値がjqueryオブジェクトかどうか（メソッドチェーン可能かどうか）は、下記のサイトで関数を検索して、”戻り値”のところを確認してください。ここに”jqueryオブジェクト”とあればメソッドチェーンとして利用可能です。 おわりに 単純なコードでもいろいろと調べてみると勉強になりますね。 どなたかの参考になればうれしいです！

css style.css .nav { width: 100%; max-width: 600px; height : 50px; margin: 0 auto; } .nav > li { list-style: none; float: left; width: 33.333%; background-color: #CCC; text-align: center; line-height: 50px; color: #FFF; font-size: 20px; border-right: 2px #FFF solid; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav > li:last-child { border-right: none; } .is-hidden { display: none; } .contents { width: 100%; max-width: 600px; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; border: 2px #CCC solid; border-top: none; } .contents > li { list-style: none; } html,jQuery index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <ul class="nav"> <li>HOME</li> <li>NEWS</li> <li>MYPAGE</li> </ul> <ul class="contents"> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li class="is-hidden">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> <li class="is-hidden">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // navの小要素であるliをクリックして、contents内の小要素であるli要素を表示させる。 // .index() 要素のindexを取得。 // .eq() 引数に応じたindexの要素を指定。 // .addClass() クラスを追加。 // .removeClass() クラスを削除。 $(function(){ $(".nav li").click(function(){//navクラスのliをクリックしたらイベントスタート var num = $(this).index();//navクラスのliのインデックス番号を取得 $(".contents li").addClass("is-hidden");//一旦contentsクラスのliにis-hiddenクラスを追加し、全て非表示にする $(".contents li").eq(num).removeClass("is-hidden");//eq()でnavクラスのliのインデックス番号を引数に指定し、 //contentsクラスの同じインデックス番号のliのis-hiddenクラスを削除。これで選択したタブと紐ずく内容だけを表示できる }) }); </script> </body> </html>

css style.css .nav { width: 100%; max-width: 600px; height : 50px; margin: 0 auto; } .nav > li { list-style: none; float: left; width: 33.333%; background-color: #CCC; text-align: center; line-height: 50px; color: #FFF; font-size: 20px; border-right: 2px #FFF solid; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav > li:last-child { border-right: none; } .is-hidden { display: none; } .contents { width: 100%; max-width: 600px; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; border: 2px #CCC solid; border-top: none; } .contents > li { list-style: none; } html,jQuery index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <ul class="nav"> <li>HOME</li> <li>NEWS</li> <li>MYPAGE</li> </ul> <ul class="contents"> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li class="is-hidden">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> <li class="is-hidden">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // navの小要素であるliをクリックして、contents内の小要素であるli要素を表示させる。 // .index() 要素のindexを取得。 // .eq() 引数に応じたindexの要素を指定。 // .addClass() クラスを追加。 // .removeClass() クラスを削除。 $(function(){ $(".nav li").click(function(){//navクラスのliをクリックしたらイベントスタート var num = $(this).index();//navクラスのliのインデックス番号を取得 $(".contents li").addClass("is-hidden");//一旦contentsクラスのliにis-hiddenクラスを追加し、全て非表示にする $(".contents li").eq(num).removeClass("is-hidden");//eq()でnavクラスのliのインデックス番号を引数に指定し、 //contentsクラスの同じインデックス番号のliのis-hiddenクラスを削除。これで選択したタブと紐ずく内容だけを表示できる }) }); </script> </body> </html>

css style.css .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .modal-content { position: fixed; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; background-color: #fff; border-radius: 20px; } .modal-text { display: table-cell; width: 300px; height: 300px; text-align: center; vertical-align: middle; } .modal-close { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; padding-bottom: 4px; background-color: #fff; border: 2px #777 solid; border-radius: 15px; color: #777; font-weight: bold; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal-show { margin: 50px; } htmlとjQuery index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <p class="modal-show">CLICK!!</p> <div class="modal" style="display: none;"> <div class="modal-content"> <div class="modal-text">MODAL WINDOW</div> <button type="button" class="modal-close">x</button> </div> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // .modal-show をクリックすることで .modal をfadeInする。 // .modal-close をクリックで .modalがfadeOutする。 $(function(){ $(".modal-show").click(function(){ $(".modal").fadeTo(500,0.7);//第一引数に秒数、第二引数にopacityを設定し、その秒数をかけて設定したopacityに変化する。 }); $(".modal-close").click(function(){ $(".modal").fadeOut(500);//一定時間かけてフェードアウトする。 }); }); </script> </body> </html>

SCSSの方がもっと効率いいとは思いますが、プロジェクトによってはSCSSよりCSSを希望する場合もあるので、すでにSCSSで作ったプロジェクトを途中でCSSに変換した時やったことをまとめて置きます。 目標 進行中のAngularプロジェクトをSCSSからCSSに変換 ng g c compoment で新規コンポーネント追加時も、scssではなくcssにする 実施した環境： Angular 12.0.0 実際やってみたら、別にバージョンは気にしなくていいかなと感じました。おそらく今後のバージョンでも通用するかと思います。 修正した箇所 src/angular.json 「scss」で検索し、全てを「css」に変更 src/style.scss このファイルを src/style.css に変更 各コンポーネントで *.component.scss ファイル名を *.component.css に変更 .component.ts でstyleUrls: ['./.component.scss'] のscssをcssに変更 以上でした。 エラーが発生した場合 SCSSをCSSに変えると、一部CSSにない文法がエラーになります。それを一々CSSフォーマットに変える必要があります。 検証方法 上記の修正で全部正しく変更できたのかを確認するには、 ng serve でcss関連のエラーが出るか確認が必要になります。 そして ng g c csstest みたいなコマンドでコンポーネントを追加し、追加されたスタイルファイルがcss拡張子になっているか確認できればOKです。 逆にCSSからSCSSにするには 同じやり方でいけると思います、ただし、SCSSの文法はCSSを兼しているので、CSS文法の直しはいらないと思います。 少しでもご参考になったらと思います。

概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 14日目の作業内容 ・単体テストコードの実行 14日目の気になった箇所 何百、何千字のある場合のテストコードはどのように 実行したらいいだろうか。 仮説 今まで自分が習ったテストコードの記述では spec/models/sample_spec.rb it 'textが10字以上だと追加できない' do @sample.text = "1234567890" @menu.valid? expect(@sample.errors.full_messages).to include('textは9文字以内で入力してください') end 一部抜粋して書いています。 このようにダブルクォーテーションで囲い文字列にして指定の文字数を入力していたが ここに何百時も何千時もい打ち込むのはめんどくさいし綺麗なコードとは言えない。 この文字列の部分を違う記述にすれば可能なはず。 結論 答えはとてもシンプルかつ簡単で spec/models/sample_spec.rb it 'textが100字以上だと追加できない' do @sample.text = "a" * 100 @menu.valid? expect(@sample.errors.full_messages).to include('textは99文字以内で入力してください') end このように1文字を100回反映させるように 演算子を使えば可能！ 1000字でも10000字でも同じ記述で簡単にできる！

行送り（line-height）の世界基準 アクセシビリティのスタンダードであるWCAGでは、行送りの最低値を1.5と定めている。しかし世の中のホームページには、リセットCSSを変更していなかったり（あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか？1　ただ、sanitize.cssなど、line-heightがちゃんと1.5と設定されているリセットCSSもちゃんと存在する）、古いBootstrapをそのまま使っていたりして、この基準を満たしていないのが割とある。そういうのはもうちょっと仕事しろよ、と言いたくなる。 しかし、この行送りには罠がある。アルファベットを念頭に置いている（と推察される）からだ。こういう取り決めを作る人たちは欧米人が中心になるのは仕方がない。だが、そうではない言語を考えていかなければ真にアクセシブルとは言えない。特に仮名・漢字・ハングルといったCKJ文字は、アルファベットとは違う特性を持つ。 アルファベットとCJK文字の違い アルファベットは、大文字と小文字で構成される。ALL CAPS（こんな感じで全部大文字）でなければ、文字の大半は小文字である。つまり、aやeといった低めの文字や、g, yといった下にはみ出す文字が多数を占める。また、dやhのような上に突き出す小文字は重心が下の方にあるものが多い。 一方、CJK文字は型を押したように文字サイズが一定である。活版印刷がヨーロッパに先だって漢字圏で発達したというのは示唆的である。文字サイズがちぐはぐなアルファベットを印刷できるようにしたグーテンベルクの努力は想像に及ばぬものであったろう。 何が言いたいかというと、同じ文字サイズでもアルファベット(特に小文字)とCJK文字ではサイズ感が違ってくるということだ。CJK文字の方が全体的に大きくて、一種の威圧感がある。逆に、行送りの間隔はアルファベットの方が広く感じるように思う。 文字サイズの例：Noto SansおよびOpen Sansの場合 さて、実際の日本語とアルファベットのフォントサイズの差はどれくらいなのだろうか。可能な限り汎用的なフォントを選びたいとの理由で、ネット回線があればだれでも使えるNoto SansおよびOpen Sans（いずれもfont-size: 50px）をサンプルとして用いることにした。 その結果がこちらである。 （「j」や「y」がline-heightからはみ出しているが、その分上部に隙間ができているので行が続いても重なることは無い。おそらく日本語との兼ね合いでbaselineが決定されているものと思われる。Mが大文字なのは、フォントサイズのemとMの関係性を確認したかったから。横幅が37pxなので、emとMのサイズはかなりの差がある。） 「た」が42px、「マ」が36px、「中」が46px、「T」が36px、「h」が38px、「x」が27pxという結果となった。日本語文の平均が40.25px、英文の平均が32.22857143pxである。ということは、日本語は大体アルファベットの1.25倍程度大きく表示されるということである。最頻値だと日本語42px、英文27px（いわゆるエックスハイト）で、約1.56倍だ。この辺りはフォントによって当然変わってくるわけだが、大体のサイズ感は当たらずと言えども遠からずであろう。 従って、日本語のline-heightは少なくとも1.5×1.25 = 1.875程度が必要だと考えられる。 ルビ しかし、これで終わらないのが日本語のややこしいところ。あまり使っているページを見かけないが、htmlには<ruby>や<rt>といった要素がある。 例としてはこんな感じ。青眼の白龍ブルーアイズ・ホワイト・ドラゴン これをhtmlで書くとこうなる。 ルビ一例.html <ruby>青眼の白龍<rt>ブルーアイズ・ホワイト・ドラゴン</rt></ruby> chromeの<rt>要素の描画は特殊らしく、FirefoxのようにCSSの内部クラスを使っているわけでなくdisplay: ruby-textを実装しておらず（説明が不適切なものだったので修正）、振る舞いがハードコーディングされているらしい。そのため、line-heightやmargin-bottomを設定しても<rt>の表示位置が変わらないので、<ruby>との行間を調整するにはtransform: translateY(-**%)とするしかない2。display: ruby-textは内部の値（MDNによると「複雑な内部構造があり、…その子要素や子孫要素が担う…役割があります。…「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。」とのこと）のため、Firefoxの<rt>も位置調整ができない（公開後加筆）。 ただし、<rt>と上の行の間隔は調整できる。Chromeの場合<rt>（厳密には<ruby>内の<rt>）の文字サイズは50%。そのため、<ruby>を含む要素のline-heightは1 + 0.5 × 1.875 = 1.9375ないといけない。font-sizeが16pxならline-heightが31pxとなる計算だ（良い子のみんな、line-heightの値には単位を付けちゃいけないよ）。ただ、<rt>と<ruby>の行間を調整したなら、その分高さを考慮して計算しないといけない。line-heightは奥が深い。 line-height警察 Qiitaの場合、line-heightの値は1.9なので、ほぼ合格である。 Noteはp要素のline-heightが36px（倍率換算で2相当）。そのため十分なline-heightだが指定方法が良くないのが残念である。 Yahoo! Japanは1.6としっかりWCAG基準を満たしているが、気持ちせせこましい。 朝日新聞は記事は1.6あるのだが、ベースのline-heightが1.4なのは残念。デザイナーさんはWCAGを学んでほしい。 読売新聞はベースが1.5、本文が1.7と朝日よりも余裕のあるデザイン。 筆者の親会社であるサザビーリーグはベースが1.7、ニュース記事が2emと問題ない…ようでemを使っているのは減点。 筆者が務めているサザビーリーグHRは1.6。やっぱりきついですね。 あとがきに変えて 結論として、line-height: 2とするのがキリの良さと見やすさを両立できるのでベストだと言える。また、ルビがある場合の推奨高さも同じになるので一石二鳥だ。もう少しline-heightを高くしてもいい。とにかく、世の中のホームページは行間が狭すぎるということが分かる。 どうかこの記事をWAICのメンバー様がご覧になりますように。そして、日本語のline-height議論が活発になりますように。 追記：最大line-heightも考える WCAGでは、"Specifying line spacing in CSS"という文書もあり、そちらでは「行の高さが1.5～2倍あれば、前の行を読み終わった後に次の行に移るのが楽になる（Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.）」とある。つまり、それを超えると（アルファベット言語では）読みづらくなるということである。 これを今回の知見で得た日本語の行の高さの算出法に換算すると、アクセシビリティ的に最大のline-heightはルビ無しで2 × 1.25 = 2.5、ルビありで1 + 0.5 × 2.5 = 2.25程度という計算になった。ルビが入ると高さが縮むというのも考え物なので、行の高さを広げたい場合は最大でも2.25にするというのが無難ではないか。この辺りも成熟した議論を待ちたい。 とりあえずnormalize.cssのissuesにこの問題を起票してみた。 ↩ この件はアクセシビリティ面で問題だと思われるので、monorailに起票した。機能の要望ということでUntriagedだが。 ↩

はじめに 「AWSでデプロイしたはいいけど、デザインを修正したくなったよー」という人に向けた記事です。 デプロイ後の修正を反映させるには masterにpushする まずはローカル環境で修正したファイルをGitHubのmasterブランチにpushします。 $ git push origin master git cloneしたディレクトリにpullする EC2インスタンスが開始されていることを確認してから、sshコマンドで接続します。 $ ssh -i 秘密鍵.pem ec2-user@ipアドレス デプロイ時にgit cloneしたディレクトリに移動してpullします。 $ git pull origin master アセットをプリコンパイルする 修正がCSSなどの場合、アセットファイルをプリコンパイルする必要があります。 簡単にいうと、JavaScriptやCSSのアセットを通信量削減のためにギュッとまとめる仕組みです。 開発環境ではこの仕組みが自動で働いてましたが、 本番環境では行われないため手動で行います。 $ rails assets:precompile RAILS_ENV=production インスタンスを再起動して確認 EC2インスタンスを再起動し、きちんと反映されていればオッケーです。