Tag: CSS

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

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

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

tableのCSS

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

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

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

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

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

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

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