CSS(258)

258follower
Yukimi Sato さんのアバター 6,964views

IE8用CSSハック

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

「: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 さんのアバター 19views

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

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

CSSのスタイル優先順位

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

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

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

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

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

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

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

印刷用のCSSを指定する

別スタイルシートにまとめる場合は、head内で以下のように指定してファイルを読み込みます。 <link rel="stylesheet" media="print" src="my_print_stylesheet.css" /&g... 2015年6月3日
Yukimi Sato さんのアバター 1,057views

「position:fixed」は親要素と子要素どちらかのみ使用する

パッと見の見た目は完璧でも、スマホですくロールした際に一瞬ちょっと下に下がってしまうという表示バグが発生したのでメモ。 HTML <div class="wrapper"> <div class="body">... 2015年6月3日
harada さんのアバター 31views

印刷や各ブラウザでURLや英文などが折返されるようにする

今までたくさん指定してきましたが、こんなに種類があったんですね。 pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /*... 2015年6月2日
Yukimi Sato さんのアバター 5,874views

Chromeにだけ効くCSSハック

@media screen and (-webkit-min-device-pixel-ratio:0) { .test { padding:0; margin:0; } } めったに使わないですが、どうしても必要になってしまった時... 2015年6月1日
Yukimi Sato さんのアバター 23views

【CSS】擬似クラスおさらい

bootstrapなどのCSSフレームワークを使用していると元から設定されているので、変えるときにちょっと困った時用のメモ。 :hover マウスオン状態。 :focus (テキストエリアなどはカーソルが入って)選択されている状態。... 2015年5月28日
Yukimi Sato さんのアバター 120views

textareaに「-webkit-appearance:caret;」が設定されているとChromeでborderが表示されない

表示確認をしていたら、Chromeのtextareaだけborderが表示されずにいました。 1つずつ潰していくと下記が悪さしていることが判明。 textarea { -webkit-appearance: caret; } ひ... 2015年5月26日
harada さんのアバター 25views

2つの要素の関係によって特定の指定をするセレクタ「>」「+」「~」

classに限らず要素そのものを指定してもいいのですが、ここでは以下のclass指定をしたと仮定して説明します。 <div class="sampleA"> <div class="sampleB">(1)<... 2015年5月14日
harada さんのアバター 60views

現在カーソルを合わせているチェックボックスを分かりやすくする

チェックボックスがたくさん並んでいるときに、現在 選択/解除 しようとしている要素がどれか明確にして、使い勝手をよくします。 html <label> <input type="checkbox" value=... 2015年4月30日
kayama さんのアバター 520views

スマートフォンで画面からtableがはみ出てしまう時

スマートフォンで要素が画面外にはみ出してしまうのは以下の様な状況。 divやtable内の文字が折り返さない→テキストが親要素の外にはみでてしまう tableにwidth:100%;を指定しているにもかかわらず画面からはみ出る 2の... 2015年4月27日
harada さんのアバター 151views

IE8のテキストエリアに指定した日本語フォントを適用する

IE8環境で、本文は指定した通りのフォントが表示されているのに、なぜかテキストエリアでのみ指定したフォントが表示されないという現象があるようです。 この現象は先頭に欧文フォントを指定していると起こるようで、先頭に日本語フォントを持ってくる... 2015年4月10日
harada さんのアバター 145views

IE8では利用できない擬似セレクタ

あるdivの中でul要素が1つのみある場合に適用したいスタイルがあり、「:only-of-type」セレクタを使おうと思ったのですがこちらはIE8では利用できないようです……。 ※ :only-of-type についてはこちら「子要素が一... 2015年4月9日
harada さんのアバター 20views

CSSで内部リンクのみ表示を変更する

こちらのように指定することで、すべての内部リンクが太字で表示されます。 a[href^="#"] {font-weight: bold;} ... 2015年4月8日
goto_jp さんのアバター 1,614views

Firefoxバグ:tdにposition:relativeをかけるとborderが消える

table { border-collapse: collapse; } td { position: relative; border: solid 1px #ccc; background-color: #fff; } ... 2015年4月8日