Category "CSS"を表示しています。
2019.4.20 土
縦横、大きさなどいろいろな画像を正方形などでトリミングし中央に配置するとかの方法です。いろいろなカタチの画像をきれいに秩序立てて並べるには、トリミングか縦横を正方形の中に収めるという方法ぐらいしかないです。 CSSだけで...
2018.10.23 火
Grid 定義済みクラスの種類(* は1~12の数値) px < 576px ≥ 576px ≥768px ≥992px ≥1200px 全サイズに適用 .col-* 576px以上に適用 .col-sm-* 76...
2017.12.28 木
htmlの組みかたで、外枠になるdivを作ってあげてその中にimgタグを入れる感じになります。 <div class="outerframe"><img src="foo.jpg"></di...
2017.12.8 金
正直このアイコンがどこまで使えるかという問題があるはあるんですが、Font AwesomeはWebページで使われる典型的なアイコンを文字として扱うことができるサービスです。コーディングするときには、 <img sr...
2017.7.18 火
Bootstrap概要 http://getbootstrap.com/ http://bootstrap3.cyberlab.info/ 細かいことはあまたあるBootstrap解説しているサイトを見てみてください。こ...
2017.5.14 日
というとflexboxになるのかという話ですが、Github時代にこんな面倒くさいプロパティ使いたくない方にはこれ。 https://github.com/jh3y/driveway ZIPでダウンロードするかクローンし...
2017.1.25 水
BEM METHODOLOGY DOCUMENTATION BEMによるフロントエンドの設計 お前の考えたルールなど穴だらけだ!というスローガンの元行われているわけではないのですが、自由度の高いHTML/CSSコーディン...
2017.1.4 水
ブロック要素にfloatをかけるとCSSでは高さが消滅します。試しにbackgroundに何らかの色をつけても効かないし、Developerツール辺りでそこらをわさわさしてもマーキングされません。なので基本的にはそのfl...
2017.1.4 水
難しい話はさておいて、cssでviewポートと呼ばれる解像度の出力ができるようになったことから、スマホやPCのデザインを一枚のCSSで書くことができるようになりました。現実問題として2012年現在では普通にスマホ用とPC...
2016.11.17 木
sassとcompassでコンパイルしてきたのですが、面倒なインストールや準備をしてなくてもいい統合ソフトのpreprosがいいみたいです。Preprosを使うならRubyやcompassの別途インストールは不要。 ht...
2016.10.19 水
しかし何世代に渡ってfloatの解除しなくちゃいけないんですか。むかしはclear=”both”だったわけです。だいたいこれ入れときゃいい的なもので、とかね。ほんとに適当でした。ついでoverfl...
2016.7.25 月
タブレットで見たとき右側が切れたりするときに使うやつ。結構便利。 PCとスマホとタブレットと3つのデザインを作るのが非常に面倒なので、タブレットのデザインをそのままPCのデザインで代用できます。 <script&g...
2016.6.20 月
tableのcssはいつもコピペですみません。 table { margin: 10px 5px; border-top:1px solid #c1c1c1; border-left:1px solid #c1c1c1;...
2016.6.8 水
要素の尻にセミコロンつけるけど、最後の要素にはセミコロンつけない…みたいな設定(なんだこれ。) li:not(last-child):after { contents: ":"; } floatとかと一緒に使うと、こうい...
2016.4.1 金
sassのインストール # gem install sass Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing doc...
2016.3.16 水
ボタン類 <input type="button"> <input type="submit"> などの角丸をクリアしたい場合、 input[type="button"],input[type="...
2016.3.7 月
border-radius ブロック要素に対して角丸ができます。 (IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降のみ) border: 3px green solid;...
2016.3.7 月
Device width PC 769px iPad 641px – 768px iPhone 320px – 640px CSS1個でやるときにはこんな感じ。 @media screen and...
2016.3.6 日
preタグは改行できない仕組みになっているのですが、改行できないと困ってしまうときがあります。 white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wr...