CSS(251)

251follower
Tetsuro  Aoki さんのアバター 2,749views

Bootstrapのnavbar-brandを中央寄せする

navbar-brandを中央寄せする方法です。 Webで調べると結構出てくるのですが、微妙に中央からずれていたりスマートフォンだとメニューボタンが効かなくなったりといろいろ不具合があったのでそれらを解決するcssを書いてみました。 .n... 2015年8月11日
Yukimi Sato さんのアバター 55views

【CSS】基本的な命名規則【落とし穴】

すごく基本的なことなのですが、今日ド忘れしてやらかしたのでメモ… 4カラムの時〜という指定でclassを指定しようとした時に、素直に 4column と付与してしまったんですが、CSSは数字から始まるクラスは認識されません…! 正... 2015年8月10日
Yukimi Sato さんのアバター 419views

【IE8】selectの幅制御に「max-width」は効かない

IE8でselectの中身が長文だった場合、場所によっては幅が大きくなりすぎるので、対処しようと、 select{ max-width : 300px; } と設定したところ、同じように大きくなりすぎていたFireFoxでは効いても... 2015年7月30日
Yukimi Sato さんのアバター 39views

【IE】Sprite画像でアイコンを指定する時は高さはfontサイズと同じ高さで指定する

IE11でSpriteとして指定したアイコンがボヤけてしまう問題で、fontサイズを調整したところ、うまくいったのでメモ。 ポイント font-sizeが13pxの時は高さ13pxの画像をspriteとして指定する これじゃそもそ... 2015年7月27日
Yukimi Sato さんのアバター 79views

WindowsEdgeに響かないChrome用CSSハック

Chrome用に記述していたCSSハックがWindowsEdgeにも響いていたので調整。 _::content, _:future, XXXXX:not(*:root) { ←XXXXXのところにセレクタを指定してください font... 2015年7月21日
harada さんのアバター 3,375views

CSSで印刷する向きを指定する

印刷用のCSSには各ブラウザで差異がありますので、利用する際は都度確認いただくのがいいと思います。 chromeとFirefoxで確認したところ、chromeでのみ適用を確認できました。 縦向きで印刷する <style type=... 2015年7月7日
Yukimi Sato さんのアバター 1,509views

IE11用CSSハック

@media all and (-ms-high-contrast:none){ *::-ms-backdrop, .thumbnail { background: url("XXX.png") top left no-repeat... 2015年7月3日
Yukimi Sato さんのアバター 130views

CSSで画像サイズ関係なく正円にする

border-radius: 100%; 画像やサムネイルサイズに関係なく使えます。 ... 2015年6月25日
Yukimi Sato さんのアバター 202views

縦横比を変えずに固定サイズのサムネイル表示

HTML <a href="#"><div><img src="image01.png"/></div></a> <a href="#"><div><... 2015年6月22日
harada さんのアバター 275views

CSSだけで画像をモノクロ表示にすることはできるが印刷には表示されない

以下のクラス指定などをモノクロ表示にしたい画像につけることで、モニター上でカラー画像をモノクロ表示にすることができます。 .grayscale { filter: gray; -webkit-filter: grayscale(1... 2015年6月22日
harada さんのアバター 162views

CSSで印刷の改ページを制御する

Webページを印刷する際に、何も指定していなければ適当な位置で改ページされて表示されますが、以下の指定を行うことでCSSで改ページを制御することができます。 CSS例 .printBlock { page-break-after: al... 2015年6月16日
harada さんのアバター 569views

フォントを綺麗に表示するCSS

AppleやGoogle、slackのフォントが綺麗に表示されているなあと思ってCSSを見ていたら以下の指定で滑らかな表示になるようです。 対応環境はまだ少ないですが、取り入れてるサービスを見ると今後スタンダードな指定になっていきそうですね... 2015年6月12日
Yukimi Sato さんのアバター 522views

IE8に効かない「::after」という指定方法

IE8用CSSハック と一緒に使うと幸せになれるかも? css3の指定として「:after」があります。 ただ、このままだとIE8では中途半端に表示されてしまい、調整でモダンブラウザにも影響がいってしまったりもしますが 「::after... 2015年6月12日
Yukimi Sato さんのアバター 6,470views

IE8用CSSハック

どうしてもIE8用にCSSハックが必要になってしまったので、あれこれ試して実際に使えたハックをメモ。 html>/**/body .tlImageBlock a { display /*\**/: inline \9; } ... 2015年6月11日
Yukimi Sato さんのアバター 58views

「:after」を使って画像に透過ボーダーを設定する

scss a { display:inline-block; position: relative; } a:after{ border: 1px solid rgba(0, 0, 0, .1); position: a... 2015年6月10日
Yukimi Sato さんのアバター 18views

IE用のグラデーション指定を解除する

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); ... 2015年6月9日
yamagenii さんのアバター 26views

CSSのスタイル優先順位

大規模開発になればなるほどcssのスタイルで何が優先されるかわかりにくくなります ここでは優先順位を順番に説明します 1位  !important指定 p { color: red !important; } p#s... 2015年6月9日
Yukimi Sato さんのアバター 62views

IE8でも使えるCSSでの前方一致指定

どうしても前方一致で指定をしないといけなくなってしまったのでメモ。 div[id^="前方一致させたいID名"] { 〜CSS指定〜 } id の部分をclassや他のものに変えることもできます。IE8で表示確認済。問題なさそうで... 2015年6月8日
daiki21 さんのアバター 57views

【CSS】displayプロパティの種類

今回はわりと表示についての作業が多めでした。 CSSでサイト作りにおいて欠かせないのが displayのプロパティかと思います。 display :inline, block, inline-blockをざっくり紹介していきます。 d... 2015年6月8日
harada さんのアバター 15,256views

Googleマップを横幅100%でレスポンシブに表示する

レスポンシブデザインのサイトにGoogleマップを埋め込む場合、デフォルトでは幅が指定されているため、画面の小さいデバイスではどうしても横幅が飛び出してしまいます。 そこで、以下のような調整を加えることで、スマホでも横幅100%で飛び出さ... 2015年6月8日