Saba note

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

Font Awesomeの使い方

正直このアイコンがどこまで使えるかという問題があるはあるんですが、Font AwesomeはWebページで使われる典型的なアイコンを文字として扱うことができるサービスです。コーディングするときには、 <img sr […]


Bootstrapの使い方

Bootstrap概要 http://getbootstrap.com/ http://bootstrap3.cyberlab.info/ 細かいことはあまたあるBootstrap解説しているサイトを見てみてください。こ […]


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

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


CSSでMasonary

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


BEM

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


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

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


Sassはpreprosが使いやすい

Sassはpreprosが使いやすい

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


floatの解除

しかし何世代に渡ってfloatの解除しなくちゃいけないんですか。むかしはclear=”both”だったわけです。だいたいこれ入れときゃいい的なもので、とかね。ほんとに適当でした。ついでoverfl […]


タブレットで見たときの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; […]


css3なのかsassなのかjQueryのセレクターなのかよくわからないけど、セレクタと言われているものの難しいやついろいろ

要素の尻にセミコロンつけるけど、最後の要素にはセミコロンつけない…みたいな設定(なんだこれ。) li:not(last-child):after { contents: “:”; } floatとかと一緒に使うと、こうい […]


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

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


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 […]