Dev
link_to(文字列, パス [, オプション, HTMLオプション]) 上記ののように、Rails でリンクを書くときには link_to を使うことになりますが、パスをどのような名前で指定したら良いかわらない時があります。 このパスの調べ方を人に聞いたので、その方法を残し…
こういうものを作るときの話です。 最初から CSS でモーダルを消すと、表示の確認と切り替えの動作が面倒になります。 そのため、このような実装には以下の手順を踏むようにします。 ヘルプチップを HTML, CSS で作成 HTML, CSS でモーダルを作成 閉じるボタ…
「JavaScript Good Parts」という本を読んでます。JavaScriptやるぞ!ってときにまず読もうとする本ですが、正直途中で挫折して最後まで読みきった試しがありません。 この本は、各章や節でJavaScriptの機能の説明がなされているわけですが、セクションのタ…
CSSの隣接セレクタは、要素と要素が隣り合う場合に直後の弟要素にスタイルが適用されます。 セレクタの指定順序は兄要素 + 弟要素であり、弟要素 + 兄要素の順で指定してもスタイルは適用されません。 このようなHTMLがあるとしましょう。 <table> <tr> <th> <label class="form-item">項目名</label> <span class="form-item-note">[ 必須 ]</span></th></tr></table>…
初めは jQuery でこのように書いていました。 (Demo) Help Balloon | jsfiddle $(document).ready( function() { $('.help-balloon').click( function() { $('.help-modal').toggle(); }); $('.help-modal').click( function() { $('.help-modal').hide(); }…
ショートハンドのことではありません。 あるCSSプロパティでは、「1つまたは2つ以上の値が指定できる」ということを、普段コーディングするときについ忘れてしまいがちです。 しかし、これを覚えておくことで、いろいろ便利な場面がでてくるでしょう。 例え…
この言語はHTML5から「Webアプリケーションプラットフォーム」を実現するための中核の技術として考えられるようになりました。 2008年に草案が発表されてから5年半が経ち、今年はついに勧告予定の年になります。 HTML5では多くの要素が追加され、それぞれに…
フロント開発において、問題への優れた解決策や最適な解は時と場合によって異なる。 Webサイト開発の場合、少し前までは主にクロスブラウザ対応に集中して開発しておけばよかった。しかし、近年ではスマートフォンやタブレットの普及により、クロスブラウザ…
はてなブログの Archive ページをモバイルで表示させたら、特定のページでこんなことになっていた。 文章の一部がコンテンツ幅をはみ出してしまい、その影響でサイト全体の幅もおかしくなっている。 これを解決してくれたのが word-break: break-word 、必要…
あるメールに組み込む形でHTMLメールを作成する必要があった。 そして、その HTML には style 属性が使用できなかった。つまり要素の属性、table 要素だと bgcolor とか width などを駆使してデザインを作成しなければならなかった。(しかも要素や属性はす…
em 指定で Media Query の設定を行った。 各サイズは font-size: 100% ( 16px ) を基に計算される。 コンテンツの横幅には一行40文字入るようにしてる。 コンテンツの横幅に48文字入るスペース、つまり左右に4文字ずつ入る余白が失われたときは font-size: 1…
position: absolute を指定した Box の下の線が出なくて困った。ので、いろいろ試してみた。 次の指定では線が出ない。 Demo .hoge { position: relative; ... } /* border-bottom は出ない */ .hoge:before { content: ""; position: absolute; bottom: 0; …
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…
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"> +
Demo background-size プロパティに contain という値がある。 この値は、幅と高さの両方がコンテンツ内に収まるように指定した背景画像を拡大縮小する。コンテンツの幅と高さが背景画像の縦横比と異なった場合、contain では背景画像の縦横比を保持したまま…
このように left 等の値でオブジェクトサイズ分微妙に中央からそらすやり方では、デバイスサイズが変わると表示位置がずれる。 .hoge:after { content: "⌃"; position: absolute; bottom: -2px; left: 49.2%; /* <- */ width: 30px; height: 15px; ... } マ…
対処方法は pre に white-space: pre-wrap を指定してやるというものだんだけど、なぜこの問題が起こるのかと、どうしてこれで対処できるのか、調べるのが面倒くさくて未だにわかってない。 参考にしたのは Font size of pre tag on mobile devices gets too…
fujimura/git-gsub これをインストールして使うと、リポジトリ内の foo を bar に簡単に置換できるようになります。 今回、僕は defult という恥ずかしいタイピングミスが発覚したので、それを修正するために使おうと思いました。 やるぞ まずはInstallation…
"新しいタブ" を開いた時に表示されている Google のロゴは毎日変わる。ワールドカップやオリンピックといった "催し" のお知らせ、歴史上の人物の記念日や国民の祝日といった "今日は何の日" かのお知らせ、どちらも気にはなるけど別に知らなくてもいい。 …
今までチームでのチャットは LimeChat 使っていたけど、無料プランでも登録できるユーザー数の制限がなくなったので、これからは HipChat を使っていくことになった。 今のところは HipChat で困ることは無いんだけど、ただ見た目が爽やかすぎる。 僕はそん…
酔ってる。 CodeGrid二周年記念パーティー良かった。 気になってたけど Twitter でリプライ送るの恥ずかしくて話ができなかった人、そんな人達と話せてよかった。 特に難しい話、新しい話はしてないけど、LT してきた。 CSS の構造化、その目的 - slideshare…
HTML と CSS のスタイルガイドができたでー。 thleap/styleguide JavaScript はコード自体があんまり書けてないから、、ガイドライン作るのしばらく先になっちゃいそうやでー。
ひとまず書き殴った。 プロジェクトでスタイルシートの「一貫性を保つ」ためのドキュメント。 このルールを守っていくのは難しい(しんどい)場合はドキュメント内容を見直そう。 このドキュメントでは以下の内容を含んでる。 エンコードなどのメタルール イ…
ひとまず書き殴った。 プロジェクトで HTML の「一貫性を保つ」ためのドキュメント。 このルールを守っていくのは難しい(しんどい)場合はドキュメント内容を見直そう。 このドキュメントでは以下の内容を含んでる。 エンコードなどのメタルール インデント…
フォントサイズを変更した時、 "ファイルを選択" ボタンと "選択されていません" のとこの垂直揃えがうまくいかなくて、、最終的にこうなった。 Demo Change style of input type="file" CSS body { font-size: 14px; } input[type="file"] { margin: 0; pa…
モバイル用のフォーム作ってた時、電話番号と郵便番号にあてる input 要素の type 属性は何がいいんだろうなーと。 iOS7 の Safari で確認した。 ipnut type="tel" を指定した場合の問題 ハイフン記号を使おうとした場合、キーボードの変更ができない 郵便番…
PC で接続しているローカルのアドレスを確認 ( ex. localhost:3000 ) PCと携帯で接続している Wi-Fi ネットワークを同じにする システム環境設定を開き、"共有" を選択する "リモートログイン" にチェックを入れて、指定されたアドレスを確認する (「リモー…
今まで .zshrc にエイリアスを貼っつけてたけど.. : alias gvim="open -a MacVim.app" vi --help でヘルプを見たら vi -g で開けることがわかった: $ vi -g { file name } コテパン!
はじめに 僕は割と長めの記事を書くことがあり、これが続いた時にトップページがやたらと長くなるのが気になっていました。また、はてなブログのデザインを自分で変更してみたかったのですが、トップページで記事を全表示されていては考えられるデザインの幅…