inline-blockで任意の位置で自動的に改行する – 続編 以前の投稿ではちょっと簡素すぎてわかりにくかったかなと続編です。 レスポンシブデザインでは気軽に<br>タグって使えないですよね。 使うと改行の位置が固定されてしまう。 でも使わないと改行の位置がおかしなこと… Yukimi Satoハック2014.03.28 3,672
Compass(Sass)で画像サイズを自動取得する 以前の記事で何の説明もなしにしれっと使いましたが、結構便利なCompass関数です。 .image { width: image-width("../img/example.png"); … ゴトーハック2014.03.27 2,346
可変ウィンドウでボタンのサイズを変えずにテキストフォームだけ伸び縮みするようにする HTML <form> <input type="text" class="text" placeholder="メッセージを入力" />… Yukimi Satoハック2014.03.27 4,224
IEのエミュレート指定に使えるcss hack 上位下位バージョンでも強制的にその指定されたバージョンにするエミュレート指定。 便利ですが、一度使うと抜きにくいのも事実です。 (入れた状態でIE用の調整を各バージョン関係なくまとめておこなう為) ただ、jsなどの関係で… Yukimi Satoハック2014.03.25 389
Sassで計算する時は丸め込みを忘れずに といったタイトルに反して自分も結構丸め込みを忘れがちですが… 例えば下記のような例だと、widthの値が小数点以下になるのが明確です(161.8px) $size: 100px; $goldretio: 1.618; .… ゴトーハック2014.03.24 6,145
CSSライブラリを利用してシンプルなプログレスバーを表示する。 progre(c)ssからcssをダウンロードして読み込みます。デモもこちらから確認できます。 <div class="progrecss" data-progrecss="40&qu… haradaハック2014.03.24 131
画像をCompass(Sass)でData URIスキーム化してHTTPリクエストを削減する そもそも「Data URI」って何?って話ですが、例えば下記の画像。 実はスマホでGmailを表示した際に使われているアイコン画像なのですが、画像のリンクを開いたURLを見てください。外部に存在する画像を参照しているので… ゴトーハック2014.03.20 919
ベンダープレフィックスが面倒な人に贈る、常用Compass(Sass)ミックスイン 「-webkit-」「-moz-」といったベンダープレフィックス付きで複数書かなければならないCSSプロパティは面倒ですよね。Compassミックスイン使って楽しましょう。 @include border-radius(… ゴトーハック2014.03.20 570
綺麗なグラデーションボタンの作り方 Aipo.comで使用しているグラデーションボタンを作った時のマイルール的な覚書です。 実際に使用しているグラデCSS↓ .gradation-orange { color: #FFFFFF; text-shadow: … Yukimi Satoハック2014.03.14 616