CSS(253)

251follower
daiki21 さんのアバター 60views

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

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

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

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

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

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

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

Chromeにだけ効くCSSハック

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

table { border-collapse: collapse; } td { position: relative; border: solid 1px #ccc; background-color: #fff; } ... 2015年4月8日
harada さんのアバター 1,150views

chromeでデフォルトで反応するテキスト入力フォームの黄色い背景色を変更する

CSSで下記のように指定することで、chromeでオートコンプリート後に表示される背景色を変更できます。 input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px whit... 2015年4月1日
Yukimi Sato さんのアバター 4,674views

【CSS】デフォルトスタイルを無効にする「appearance: none」

フォーム関連のタグに向いているそうです。 参考:フォーム周りで覚えておくと便利なCSS Snippets input, button, textarea, select { -webkit-appearance: none; ... 2015年3月27日
harada さんのアバター 16views

利用言語によってスタイルを変更する

現在はあまり利用することはなさそうですが、多国語対応のWebサイトやサービスを作成するときに利用できそうです。 :lang(ja){ font-style:normal; } // 日本語の場合 :lang(en-US){ font-st... 2015年3月24日
goto_jp さんのアバター 305views

Compassの落とし穴:グラデーションにsvg出力を行わせない

CompassでCSSグラデーションを描く際は下記のように記述します。 @include background-image(linear-gradient(#fff, #ccc)); これをコンパイルするとCSSには下記のように出力さ... 2015年3月17日
reotogashi さんのアバター 150views

CSSによるドロップダウンメニュー

本日の作業で技術的な進歩があまりなかったので個人的な勉強で学んだことをシェアする。 ドロップダウンメニューはCSSでもJQueryでも作ることができるが、今回はCSSで作ってみた。 CSSを書いてみると結構難しいのが分かる。 ブ... 2015年3月17日