Subscribed unsubscribe Subscribe Subscribe

CHROMA

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

Dev

Google DevTools の設定メニューのアレは今どこに

Dev

いつからか Google DevTools の Settings メニューの配置が大きく変わってますよね。 DevTools は機能が豊富なので、知らないことがまだまだ多く、なにか新しいことをやろうとするときはいつも Web で調べたりします。 自分が知りたい情報は案外簡単に見つか…

インフラエンジニアの教科書

Dev

会社の人に貸してもらうことができたので、「インフラエンジニアの教科書」という本を読みました。 この本では、インフラの仕組みだけを説明しているわけではありません。コストや人と向き合いながら、サービスの未来を予測してインフラ運用を行うインフラエ…

フロントエンドデベロッパー面接時の一般的な質問事項への回答

Dev

一昨日、「フロントエンドデベロッパー面接時の質問事項」というのがあるのを知りました。 この中の「一般的な質問事項」に少し答えてみました。 プログレッシブ・エンハンスメントとかの用語の意味を普段あまり考えていないので、質問に答えにくいところが…

HTTPの弱点とその対処

Dev

僕たちの目に普段触れることはありませんが、インターネットを使うときにはネットワークを介してクライアントとサーバーで通信が行われています。 HTTP は非常にシンプルで便利なプロトコルですが、このプロトコルを使っている通信にはセキュリティ面での問…

HTTPヘッダー

Dev

先週書いた「HTTPメッセージ」という記事でも少し触れましたが、今回は各ヘッダーフィールドの役割についてもう少し書いてみようと思います。 まず、ヘッダーフィールドとは、クライアントとサーバーの通信のなかで指示を出したり、指示に対する処理結果を示…

HTTPメッセージ

Dev

HTTPメッセージは、リクエストメッセージとレスポンスメッセージに分けられますが、どちらもメッセージの内部は次のような構成になっています。 メッセージヘッダー 空行(CR + LF) メッセージボディー それぞれのメッセージヘッダーをもう少し詳しく見てみ…

HTTPによる通信とCookie

Dev

HTTPは、クライアント(ブラウザなど)とサーバー間で通信を行います。 クライアントはテキストや画像が欲しいときにリクエストメッセージをサーバーに向かって投げ、これを受け取ったサーバーはクライアントに向けてレスポンスメッセージを返します。 リク…

Webとネットワークの基本用語

Dev

僕はこれまでパフォーマンスを考慮してコードを書くということをしていませんでした。 それに、Webサイトを表示するブラウザや、その周辺の仕組みの理解を深める動きをしてきませんでした。 しかし、一年ほど前にHTML5 ROCKSの「ブラウザの仕組み: 最新ウェ…

CSS設計の教科書

Dev

「Web制作者のためのCSS設計の教科書」という本を頂いたので、今週いっぱいかけて読んでました。 目次や書籍の情報については以下からご確認ください。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | Impress…

開いたタブに閉じるボタンの設置

Dev

次のようなHTMLで新規タブを開いたとします。 <a href="/information/help" class="information-help" target="_blank">ヘルプ</a> この開いたタブの中に、以下のようなjQueryで「タブを閉じる」処理を行なうボタンを設置しました。 $(function() { $('.js-close-window').on('click', function() { window.close(); return false; }); …

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

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

Grunt を導入してみて

Dev

Frontrend Advent Calendar 2013 21 日目の記事。残りの日数もあと僅か。 明日は @ygoto3 さん。 Grunt を入れた。 まだ実際のプロジェクトでは使えてなくて下の方であげている Gruntfile.coffee のタスクもちょっと動かしてみただけ.. なので、今の設定はこ…

SMACSS に BEM を取り入れよう

Dev

BEM Advent Calendar 2013 の 15日目の記事です。 明日は @kubosho_ さん。 なぜ SMACSS ? なぜ BEM ? SMACSS は CSS をより体系立て、構造化させることで開発者の制作とメンテナンスを容易にするテクニックとして、 Jonathan Snook によって提唱されまし…

CSS レイアウト関連の内 4 つをみてみる

Dev

CSS Property Advent Calendar 2013 14日目の記事。 明日は @watilde さん。 先日のHTML5 CONFERENCE 2013 の中で "CSS Regionsを使った新しいCSSレイアウトを作る方法" というセッションを聞いて依頼、CSS レイアウトが気になったので少し調べてみました。 …

BEM 化されたブログをのぞかせてもらう

Dev

@o_ti さんのブログの、 http://dskd.jp/archives/36.html をみてみた。 以下のようになっていた: .contents .header h1.header__logo .article article.article__item header.article-header h1.article-header__item footer.article-footer time.article-f…

Flexbox の概要をみる

Dev

Flexbox を使うには display:flex; を指定して Flexbox コンテナー をつくる Flexbox コンテナーの子要素は Flexbox アイテム となる Flexbox アイテムでは、 Flexbox アイテム用の CSS プロパティが使えるようになる。 HTML はこんな感じになるのかな: <div class="flexbox-container"> <div class="flexbox-container-item"> <p>1H</p></div></div>…

BEM とは

Dev

メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容(よ…

"CSS Regionsを使った新しいCSSレイアウトを作る方法"セッションのメモ

Dev

最初に HTML5 CONFERENCE 2013 に行ってきて、"CSS Regionsを使った新しいCSSレイアウトを作る方法" という 轟 啓介 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ( ルーム1A - HTML5 カンファレンス 2013 - YouTube …

"今どきのGruntを使ったフロントエンド開発(HTML/CSS編)"セッションのメモ

Dev

最初に HTML5 CONFERENCE 2013 に行ってきて、"今どきのGruntを使ったフロントエンド開発(HTML/CSS編)" という 石本 光司 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ( ルーム1A - HTML5 カンファレンス 2013 - Y…

"モダンなCSS設計パターンを考える" セッションのメモ

Dev

最初に HTML5 CONFERENCE 2013 に行ってきて、"モダンなCSS設計パターンを考える" という 谷 拓樹 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ( ルーム1A - HTML5 カンファレンス 2013 - YouTube ) で観れます。 …

pull request から不要な commit を取り除く

Dev

git rebase -i で branch の枝別れ先を変更する。 git rebase -i {sha before the branches diverged} https://github.com/{ author name }/{ repository name }/commits/master や、git log --graph --oneline, tig で変更先の SHA-1 ハッシュは確認する。 …