Saba note

醜悪コード Ugly hacks ITものづくり

Bootstrapの使い方

Bootstrap概要 http://getbootstrap.com/ 細かいことはあまたあるBootstrap解説しているサイトを見てみてください。ここではプラクティスだけにしてます。 Bootstrapをダウンロー […]


CSSでMasonary

というとflexboxになるのかという話ですが、Github時代にこんな面倒くさいプロパティ使いたくない方にはこれ。 https://github.com/jh3y/driveway ZIPでダウンロードするかクローンし […]


BEM

BEM METHODOLOGY DOCUMENTATION BEMによるフロントエンドの設計 お前の考えたルールなど穴だらけだ!というスローガンの元行われているわけではないのですが、自由度の高いHTML/CSSコーディン […]


floatの解除でmarginが効かなくなる

ブロック要素にfloatをかけるとCSSでは高さが消滅します。試しにbackgroundに何らかの色をつけても効かないし、Developerツール辺りでそこらをわさわさしてもマーキングされません。なので基本的にはそのfl […]


レスポンシブデザインのやり方(基本その1)

難しい話はさておいて、cssでviewポートと呼ばれる解像度の出力ができるようになったことから、スマホやPCのデザインを一枚のCSSで書くことができるようになりました。現実問題として2012年現在では普通にスマホ用とPC […]


Sassはpreprosが使いやすい

Sassはpreprosが使いやすい

sassとcompassでコンパイルしてきたのですが、面倒なインストールや準備をしてなくてもいい統合ソフトのpreprosがいいみたいです。Preprosを使うならRubyやcompassの別途インストールは不要。 ht […]


タブレットで見たときのViewportの調整

タブレットで見たとき右側が切れたりするときに使うやつ。結構便利。 PCとスマホとタブレットと3つのデザインを作るのが非常に面倒なので、タブレットのデザインをそのままPCのデザインで代用できます。 <script&g […]


tableのCSS

tableのCSS

tableのcssはいつもコピペですみません。 table { margin: 10px 5px; border-top:1px solid #c1c1c1; border-left:1px solid #c1c1c1; […]


Macでsassを使えるようにする

sassのインストール # gem install sass Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing doc […]


CentOS6でsassが使えるようにする

サーバーサイドでも直接sassが使えないと結構不便ということで、インストールしてみた。 まずはrubyのインストール yum install -y ruby rubygems ruby-devel libffi-deve […]


iPhoneのSafariでsubmitボタンのデフォルトデザインを解除

ボタン類 <input type=”button”> <input type=”submit”> などの角丸をクリアしたい場合、 input[type=”button”],input[type=” […]


CSS角丸いろいろ

border-radius ブロック要素に対して角丸ができます。 (IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降のみ) border: 3px green solid; […]


レスポンシブ・デザインの幅の設定

Device width PC 769px iPad 641px – 768px iPhone 320px – 640px CSS1個でやるときにはこんな感じ。 @media screen and […]


preタグで強制的に改行させる

preタグは改行できない仕組みになっているのですが、改行できないと困ってしまうときがあります。 white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wr […]


レスポンシブデザインのviewportをjQueryで

アクセス時のbody幅とWindowを動的に伸び縮みさせたときのbody幅を取得します。これ使うとレスポンシブ対応のWEBデザインに比較的柔軟に対応できます。 静的には$(window).width()でそのまま取得でき […]