2016年11月3日
【CSS】CSSでよく使うメモ
よく使うんだけど、覚えられないCSSをメモメモ。
▼FontAwesomeでアイコンを表示
:before { content: "\XXX"; font-family: FontAwesome; font-weight: normal; padding-right: 5px; }
▼角丸
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
▼アニメーション
-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;
▼「・・・」を出す
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
▼ページ内スクロールする際の高さ調整
margin-top:-100px; padding-top:100px;
▼テキストのベースライン調整 (参考)http://www.nishishi.com/css/text-vertical-align.html
vertical-align: middle;
関連記事
-
【CSS】Flexboxでレイアウト
【CSS】Flexboxでレイアウト
いままでfloatやJSで横並びのボックスを調整していましたが、楽になりますね~。 よく使いそうなものをメモメモ。 ▼f・・・ -
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
【CSS】Flexboxを使って要素を上下左右中央に配置する方法
要素を左右だけではなく、上下左右中央に配置する方法は色々あるみたいですが、Flexboxを使って配置する方法をメモメモ。・・・ -
【CSS】iOSで横スクロールがカクカクするのを滑らか(スムーズ)にする方法
【CSS】iOSで横スクロールがカクカクするのを滑らか(スムーズ)にする方法
iOSで横スクロールをする際、カクカクとぎこちない感じになります。それを解決する方法をメモメモ。 [css] .imgS・・・ -
【CSS】フッター要素を常に下に表示したい!CSSで!
【CSS】フッター要素を常に下に表示したい!CSSで!
コンテンツが少ないときなど、フッター要素が上にきてしまうので、なんか思ったんと違ーう!となってしまうケースありますよね。・・・ -
【CSS】BODY内で外部CSSを読み込む方法
【CSS】BODY内で外部CSSを読み込む方法
<head>内を変更できない場合、<body>の中で<link>を使ってCSSを読み・・・ -
【CSS】フォームを作る際に入れておくCSS
【CSS】フォームを作る際に入れておくCSS
お問い合わせフォームを作る際に入れておきたいCSSをメモメモ。 ▼iOSでのボタン等のデザインをリセット [css] i・・・