Category: CSS

CSSで画像を中央線でトリミングする

htmlの組みかたで、外枠になるdivを作ってあげてその中にimgタグを入れる感じになります。 <div class="outerframe"><img src="foo.jpg"></d...

Font Awesomeの使い方

正直このアイコンがどこまで使えるかという問題があるはあるんですが、Font AwesomeはWebページで使われる典型的なアイコンを文字として扱うことができるサー...

Bootstrapの使い方

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

CSSでMasonary

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

BEM

BEM METHODOLOGY DOCUMENTATION BEMによるフロントエンドの設計 お前の考えたルールなど穴だらけだ!というスローガンの元行われているわけではないので...

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

ブロック要素にfloatをかけるとCSSでは高さが消滅します。試しにbackgroundに何らかの色をつけても効かないし、Developerツール辺りでそこらをわさわさしても...

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

難しい話はさておいて、cssでviewポートと呼ばれる解像度の出力ができるようになったことから、スマホやPCのデザインを一枚のCSSで書くことができるようにな...

Sassはpreprosが使いやすい

sassとcompassでコンパイルしてきたのですが、面倒なインストールや準備をしてなくてもいい統合ソフトのpreprosがいいみたいです。Preprosを使うならRubyやco...

floatの解除

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

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

タブレットで見たとき右側が切れたりするときに使うやつ。結構便利。 PCとスマホとタブレットと3つのデザインを作るのが非常に面倒なので、タブレットのデザ...

tableのCSS

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

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

要素の尻にセミコロンつけるけど、最後の要素にはセミコロンつけない…みたいな設定(なんだこれ。) li:not(last-child):after { contents: ":"; } fl...

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

sassのインストール # gem install sass Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing documentation for sass-3.4.22 In...

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

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

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:...