スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Font Awesomeのアイコンをcssのcontentで使う方法

Font Awesomeのアイコンをcssのcontentで使う方法をメモ。
Font Awesomeのアイコンの詳細画面(例えばここ)にUnicodeが書いてあるので、それを指定する。
fa-chevron-circle-right__Font_Awesome_Icons.png
この場合、f138なので
ul > li {
content "\f138";
font-family: FontAwesome;
}
と書くと出る。「\」をUnicodeの前に書いとく必要があるので注意。

参考サイト
Font AwesomeをCSSのcontentプロパティで使用する
スポンサーサイト

cssでborder: dotted の間隔を調整する方法

border-bottom: dottedの間隔を調整する方法をメモ。
border-bottom: 5px dotted black
とかだと、こんな感じになってしまう。

 

これをドットの大きさはある程度小さくして、間隔だけを調整する方法。
background-image: linear-gradient(to right, white 10%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 8px 1px;
background-repeat: repeat-x;
これで、うまい感じに間隔だけ開けられる。
linear-gradientの white 10%の部分と、background-size: 8px 1px; の部分を調整すると、dashedっぽいのも出来る。


 



参考サイト
How to increase space between dotted border dots

position:absoluteした時のdivの高さを可変にする

グリッドデザインのような横幅可変なサイトで、画像をとかを横幅に合わせて伸縮させたい場合がある。
imgタグであれば、width:100%; だけ指定しておけばOKだが、divとかで、position; absolute;した時など、高さが指定されていないのでうまくいかない。
そんなときの対処法。

■HTML
<div class="box ratio-1_1">
<div class="inner">
<p>1 : 1</p>
</div>
</div>
■css
.box {
    position: relative;
    width: 50%;
    height: auto;
    background: #444;
}
.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
}
.inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}


参考サイト
CSS のみで高さを可変にして要素の比率を維持するテクニック

cssでblock要素を上下左右で中央揃えにする方法

cssでblock要素を上下左右で中央揃えにする方法のメモ。
position: absolute;
top: 50%;
left: 50%;
で、中央揃えにしたい要素のwidth, heightの半分をネガティブマージンしたりで出来るが、中央揃えにしたい要素のサイズが固定じゃないとうまくいかない。
display: table-cell も、あまり使いたくないので、探していたら見つけた。

中央揃えしたい要素に下記を設定
■HTML
<div class="parent">
<div class="child">
中央揃えしたい
</div>
</div>

■CSS
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


参考サイト
CSS にて複数行(高さが可変)の要素に対して縦揃えを中央に配置する方法

高さ不明の要素に対して天地中央に配置するテクニック

これで、ブロック要素を簡単に垂直方向の中央揃えに出来る。

HTML
<div class="demo">
<p>天地の中央に配置</p>
</div>
CSS
.demo p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。