CSS
【CSS】displayプロパティの種類
今回はわりと表示についての作業が多めでした。 CSSでサイト作りにおいて欠かせないのが displayのプロパティかと思います。 display :inline, block, inline-blockをざっくり紹介して…
Googleマップを横幅100%でレスポンシブに表示する
レスポンシブデザインのサイトにGoogleマップを埋め込む場合、デフォルトでは幅が指定されているため、画面の小さいデバイスではどうしても横幅が飛び出してしまいます。 そこで、以下のような調整を加えることで、スマホでも横幅…印刷用のCSSを指定する
別スタイルシートにまとめる場合は、head内で以下のように指定してファイルを読み込みます。 <link rel=”stylesheet” media=”print” src=”my_print_stylesheet…「position:fixed」は親要素と子要素どちらかのみ使用する
パッと見の見た目は完璧でも、スマホですくロールした際に一瞬ちょっと下に下がってしまうという表示バグが発生したのでメモ。 HTML <div class=”wrapper”> <div class=”bo…印刷や各ブラウザでURLや英文などが折返されるようにする
今までたくさん指定してきましたが、こんなに種類があったんですね。 pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ wh…Chromeにだけ効くCSSハック
@media screen and (-webkit-min-device-pixel-ratio:0) { .test { padding:0; margin:0; } } めったに使わないですが、どうしても必要になっ…【CSS】擬似クラスおさらい
bootstrapなどのCSSフレームワークを使用していると元から設定されているので、変えるときにちょっと困った時用のメモ。 :hover マウスオン状態。 :focus （テキストエリアなどはカーソルが入って）選択され…