CHROMA

世の中の "当たり前" を確認する

Dev

link_to に指定するパス名の調べ方

Dev

link_to(文字列, パス [, オプション, HTMLオプション]) 上記ののように、Rails でリンクを書くときには link_to を使うことになりますが、パスをどのような名前で指定したら良いかわらない時があります。 このパスの調べ方を人に聞いたので、その方法を残し…

ヘルプチップの実装手順

Dev

こういうものを作るときの話です。 最初から CSS でモーダルを消すと、表示の確認と切り替えの動作が面倒になります。 そのため、このような実装には以下の手順を踏むようにします。 ヘルプチップを HTML, CSS で作成 HTML, CSS でモーダルを作成 閉じるボタ…

JavaScript Good Parts 読んでる

Dev

「JavaScript Good Parts」という本を読んでます。JavaScriptやるぞ!ってときにまず読もうとする本ですが、正直途中で挫折して最後まで読みきった試しがありません。 この本は、各章や節でJavaScriptの機能の説明がなされているわけですが、セクションのタ…

隣接セレクタの指定順序

Dev

CSSの隣接セレクタは、要素と要素が隣り合う場合に直後の弟要素にスタイルが適用されます。 セレクタの指定順序は兄要素 + 弟要素であり、弟要素 + 兄要素の順で指定してもスタイルは適用されません。 このようなHTMLがあるとしましょう。 <table> <tr> <th> <label class="form-item">項目名</label> <span class="form-item-note">[ 必須 ]</span></th></tr></table>…

開閉モーダルの実装

Dev

初めは jQuery でこのように書いていました。 (Demo) Help Balloon | jsfiddle $(document).ready( function() { $('.help-balloon').click( function() { $('.help-modal').toggle(); }); $('.help-modal').click( function() { $('.help-modal').hide(); }…

CSSで値の複数指定

Dev

ショートハンドのことではありません。 あるCSSプロパティでは、「1つまたは2つ以上の値が指定できる」ということを、普段コーディングするときについ忘れてしまいがちです。 しかし、これを覚えておくことで、いろいろ便利な場面がでてくるでしょう。 例え…

HTMLに疎い

Dev

この言語はHTML5から「Webアプリケーションプラットフォーム」を実現するための中核の技術として考えられるようになりました。 2008年に草案が発表されてから5年半が経ち、今年はついに勧告予定の年になります。 HTML5では多くの要素が追加され、それぞれに…

フロントエンドエンジニアに求められること

Dev

フロント開発において、問題への優れた解決策や最適な解は時と場合によって異なる。 Webサイト開発の場合、少し前までは主にクロスブラウザ対応に集中して開発しておけばよかった。しかし、近年ではスマートフォンやタブレットの普及により、クロスブラウザ…

word-break: break-word はやっぱり便利

Dev

はてなブログの Archive ページをモバイルで表示させたら、特定のページでこんなことになっていた。 文章の一部がコンテンツ幅をはみ出してしまい、その影響でサイト全体の幅もおかしくなっている。 これを解決してくれたのが word-break: break-word 、必要…

Style属性を使用せずにテーブルレイアウト

Dev

あるメールに組み込む形でHTMLメールを作成する必要があった。 そして、その HTML には style 属性が使用できなかった。つまり要素の属性、table 要素だと bgcolor とか width などを駆使してデザインを作成しなければならなかった。(しかも要素や属性はす…

Media Query の設定

Dev

em 指定で Media Query の設定を行った。 各サイズは font-size: 100% ( 16px ) を基に計算される。 コンテンツの横幅には一行40文字入るようにしてる。 コンテンツの横幅に48文字入るスペース、つまり左右に4文字ずつ入る余白が失われたときは font-size: 1…

絶対位置に配置したものを表示させる

Dev

position: absolute を指定した Box の下の線が出なくて困った。ので、いろいろ試してみた。 次の指定では線が出ない。 Demo .hoge { position: relative; ... } /* border-bottom は出ない */ .hoge:before { content: ""; position: absolute; bottom: 0; …

見出しと下線の離し方

Dev

line-height を調整することで下線と見出しの間に空きが作れる。 Gist がこのやり方で余白を取ってる。というか、線を上下に引いても邪魔にならないだけの行間を見出しすべてが持ってる。 .markdown-body h1 { ... border-bottom: 1px solid #ddd; } .markdo…

はてなブログ、シンタックスハイライトの変更

はてなブログ、少し色が明るすぎる気がしてたのでコードのシンタックスハイライトを変更をした。 Class Hex Color .synSpecial #FF00FF .synType #00B300 .synComment #B3B3B3 .synPreProc #4D00B3 .synIdentifier #00B3B3 .synConstant #CC0000 .synStateme…

検索ボックスのスタイリング

Dev

Demo <form class="search-form" role="search" action="" method=""> <input type="text" name="" class="search-form-input" value="" placeholder="Search this Site" required=""> <input type="submit" value="Search" class="search-form-button"> </form> 検索ボックス、上記のように <input type="text"> +

background-size: contain に出会った

Dev

Demo background-size プロパティに contain という値がある。 この値は、幅と高さの両方がコンテンツ内に収まるように指定した背景画像を拡大縮小する。コンテンツの幅と高さが背景画像の縦横比と異なった場合、contain では背景画像の縦横比を保持したまま…

ときどき中央揃えにはマイナス margin を使う

Dev

このように left 等の値でオブジェクトサイズ分微妙に中央からそらすやり方では、デバイスサイズが変わると表示位置がずれる。 .hoge:after { content: "⌃"; position: absolute; bottom: -2px; left: 49.2%; /* <- */ width: 30px; height: 15px; ... } マ…

pre 要素内の文字がモバイルでは小さく表示される問題

Dev

対処方法は pre に white-space: pre-wrap を指定してやるというものだんだけど、なぜこの問題が起こるのかと、どうしてこれで対処できるのか、調べるのが面倒くさくて未だにわかってない。 参考にしたのは Font size of pre tag on mobile devices gets too…

git gsub を使うまで

Dev

fujimura/git-gsub これをインストールして使うと、リポジトリ内の foo を bar に簡単に置換できるようになります。 今回、僕は defult という恥ずかしいタイピングミスが発覚したので、それを修正するために使おうと思いました。 やるぞ まずはInstallation…

Google の新しいタブに好きな画像を載せる

Dev

"新しいタブ" を開いた時に表示されている Google のロゴは毎日変わる。ワールドカップやオリンピックといった "催し" のお知らせ、歴史上の人物の記念日や国民の祝日といった "今日は何の日" かのお知らせ、どちらも気にはなるけど別に知らなくてもいい。 …

Limelight theme for HipChat

Dev

今までチームでのチャットは LimeChat 使っていたけど、無料プランでも登録できるユーザー数の制限がなくなったので、これからは HipChat を使っていくことになった。 今のところは HipChat で困ることは無いんだけど、ただ見た目が爽やかすぎる。 僕はそん…

CodeGrid 書いてる人たちは楽しそうだ。LT してきた

Dev

酔ってる。 CodeGrid二周年記念パーティー良かった。 気になってたけど Twitter でリプライ送るの恥ずかしくて話ができなかった人、そんな人達と話せてよかった。 特に難しい話、新しい話はしてないけど、LT してきた。 CSS の構造化、その目的 - slideshare…

Style Guide ができた

Dev

HTML と CSS のスタイルガイドができたでー。 thleap/styleguide JavaScript はコード自体があんまり書けてないから、、ガイドライン作るのしばらく先になっちゃいそうやでー。

CSS Coding Guide

Dev

ひとまず書き殴った。 プロジェクトでスタイルシートの「一貫性を保つ」ためのドキュメント。 このルールを守っていくのは難しい(しんどい)場合はドキュメント内容を見直そう。 このドキュメントでは以下の内容を含んでる。 エンコードなどのメタルール イ…

HTML Coding Guide

Dev

ひとまず書き殴った。 プロジェクトで HTML の「一貫性を保つ」ためのドキュメント。 このルールを守っていくのは難しい(しんどい)場合はドキュメント内容を見直そう。 このドキュメントでは以下の内容を含んでる。 エンコードなどのメタルール インデント…

<input type="file"> のスタイル変更

Dev

フォントサイズを変更した時、 "ファイルを選択" ボタンと "選択されていません" のとこの垂直揃えがうまくいかなくて、、最終的にこうなった。 Demo Change style of input type="file" CSS body { font-size: 14px; } input[type="file"] { margin: 0; pa…

モバイル用にフォームを作る時の input type="number" と type="tel"

Dev

モバイル用のフォーム作ってた時、電話番号と郵便番号にあてる input 要素の type 属性は何がいいんだろうなーと。 iOS7 の Safari で確認した。 ipnut type="tel" を指定した場合の問題 ハイフン記号を使おうとした場合、キーボードの変更ができない 郵便番…

スマホ用にローカル環境で作成したファイルを実機で確認する

Dev

PC で接続しているローカルのアドレスを確認 ( ex. localhost:3000 ) PCと携帯で接続している Wi-Fi ネットワークを同じにする システム環境設定を開き、"共有" を選択する "リモートログイン" にチェックを入れて、指定されたアドレスを確認する (「リモー…

シェルから MacVim を開く

Dev

今まで .zshrc にエイリアスを貼っつけてたけど.. : alias gvim="open -a MacVim.app" vi --help でヘルプを見たら vi -g で開けることがわかった: $ vi -g { file name } コテパン!

はてなブログのトップページで記事のヘッダー情報以外を隠す

Dev

はじめに 僕は割と長めの記事を書くことがあり、これが続いた時にトップページがやたらと長くなるのが気になっていました。また、はてなブログのデザインを自分で変更してみたかったのですが、トップページで記事を全表示されていては考えられるデザインの幅…