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

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

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

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

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

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

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

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

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 ハッシュは確認する。 …

fork したリポジトリ（ origin ）を fork 元（ upstream ）のリポジトリに合わせて最新の状態にする。 $ git co master $ git pull --rebase upstream master $ git push -f origin master git pull --rebase で origin と upstream 、各歴史の間に差異があ…

stash リスト一覧 git stash list stash 適用 git stash apply stash@{0} stash 削除 git stash drop stash@{0} stash の diff をみる git stash show -p stash@{0} 最新の stash を適用、stash リストから stash を削除 git stash pop

追記: master が最新のものになっているか. ブランチを切る前にそれを確認するのが一番重要 git で困ることが多いので、今後は以下を気をつけて生きる。 ブランチ名は少し広めに、commit message は細かくする git の branch がどういうふうに枝分かれしてい…

プロジェクトで適用した SMACSS のルール 使って良かったと思える点 使い方が難しいと感じた点 1. プロジェクトで適用した SMACSS のルール CSS ルールのカテゴライズ を意識しました。 こんな感じです: CSS ファイルのカテゴライズ モジュールを意識した作…

git rm で削除したファイル、git add しても以下のように stage にあげられなかった。 # Changes not staged for commit: # (use "git add/rm ..." to update what will be committed) # (use "git checkout -- ..." to discard changes in working director…

この辺を参考にする。 IE 7 ~9 Internet Explorer User Agent Style Sheets| IECSS.COM Mozilla Firefox 立ち上げて resource://gre-resources/html.css とか、 resource://gre-resources/quirk.css をアドレスバーに打ち込むとでる。 Webkit html.css in tr…

a 要素等で高さを指定した場合とbutton 要素で高さを指定した場合では見た目上同じにはならない。 これは、Chrome や Firefox だと button 要素に box-sizing: border-box; が指定されており、ボーダーを含めた高さになっているのが原因である。 a 要素など…

価格と税込みを表示する HTML、A か B 使うかで迷ってるけど、そもそも価格に strong 使うものなのかみたいなのある。 とりあえず A でいこう。 <div> <strong> 2,000円 <small> （税込） </small></strong> </div> <div> <strong> 2,000円 </strong> <small> （税込） </small> </div> ````

gem update --system

checkbox とか radio 、文言がボタン ? と離れないように label に以下のように指定しておこう。 前もこれ直すのに時間かかった気がするけど、今回も同じように時間かかったので書いとく。 label { white-space: nowrap; }

One direction Shadow | jsdoit box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまうことになる。 .box-shadow { box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -moz-box-shadow…

ボタンに背景画像を指定した時、ロールオーバー時のちらつきを無くす | js.doit default 画像、hover 画像を入れたスプライト画像作って、background-position で各画像を指定する。 button { border: none; background-image: url(http://jsrun.it/assets/1…

form にボタンを設置する時、 input type="button" で指定したことで文章の改行やスタイル付けに困ったなら、 button 要素を使えば苦しまずに済むのではと思います。 こんな感じで改行なんかが普通に挟めますので: <button type="submit" value="">~~ に同意して<br>確認画面に進む</button> ちなみに以下…

ミックスインを使う時、カンマを使うプロパティで値を指定すると、引数の複数指定と間違われて困るので可変長引数（ @mixin の $valueの後に ... を追加）を指定してあげることで引数の複数指定と間違われずにエラーを回避できる。 コンパイル後の CSS が #0…

Sassの教科書読んでる。 Web制作者のためのSassの教科書 - 公式サポートサイト ふつうに watch オプションだけ指定すると Sass の記述ミスなどの時にエラーが起こっても監視を続ける。 --stop-on-error オプションを一緒に指定してあげるとエラーが起こった…

書いたコード https://gist.github.com/thleap/6118871 Twitter トップをコーディングした。 twitter-top.html は173行目以降は tweet-item のコピーになるで特に見る必要ないです。 なぜコーディングしたかとか、作業時間とか なぜコーディングしたのか Sca…

Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジ…

なんとなくらしいです なんとなくです。なんとなく Twitter の見た目をスタイルシート変更できて楽しいなぁ〜ってなってたからやる気になったんですぅ。 Facebook と Gizmodo をアレな感じにした Facebook は、「あなたの友だちかもしれないよ〜」ってのを消…

ちょっとだけ変更した UserStyleSheet を変更して、30分前くらいからこうなってる。 Home, Connect, Discover, Me あたりをざっくりしか見てないのでおそらくどこか崩れてるだろう。 横幅が長いように感じるけど、今のところそんな苦でもないので放置してる…

th と td の幅が崩れてる時は、 table 要素に以下の記述を加えると直る。 table { table-layout: fixed; word-wrap: break-word; } 状況によるけど。