css

お役立ち情報

カラーコードからrgbaへ変換するツール【css】

バックグラウンドカラーの透過などに便利カラーコードをrgbaに変換するツールです。 テキストボックにカラーコードを入力またはコピペすることでRGBaに変換され...
コーディング

pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール

レスポンシブコーディングのときpxを%に変換する機会が多くなりませんか? たとへば2カラムのWEBデザインでpxから双方の幅(width)の比率(%)を計算し...
css

【css】幅などの値を計算式で計算して指定できる関数「calc()」の使い方

cssで幅や距離を指定するとき「この数値を計算式で出せたらすごく便利なのに!」と考えたことありませんか? たとえば「widthに100%から数px引いた値を指...
css

【css】要素を回転させるときの基準点を設定する方法

transform:rotate()を使って回転を加えたが意図とした位置で回転してくれないといった悩みはないでしょうか? この場合、回転する基準点を設定するこ...
css

cssのみで三角形・矢印やリボンを表現する最新の方法、レスポンシブにも対応!

linear-gradientを使って、三角形やリボンを簡単に表現する方法を徹底解説します!
html

【html+css】imgタグで配置した画像をbackground-size:cover;と同じように表現する方法

htmlのimgタグで配置された画像をcssの記述のみでbackground-size:cover;のように扱う方法を徹底解説します。
css

cssだけで要素を回転させる方法 transform:rotate()

transformは要素を変形させることのできるcssのプロパティですが、今回は要素を回転させる方法を取り上げたいと思います。 transformに関してはい...
css

【css】これは便利!奇数、偶数、等間隔など~番目を指定する方法「:nth-child()」と「:nth-last-child」

奇数、偶数、等間隔など~番目を指名できる優秀なcssの疑似クラス:nth-child()と:nth-last-childの使い方を解説します。
css

【css】floatで回り込みを解除する方法 「clear」と「clearfix」

要素を横並びにする際よく使われるのが「float」ですが、 他の要素がどんどん横にながれこんできて困ったことはありませか? たとえばこんな感じに。。。 ...
css

【css】2020年!clearfix最新の設定はこれ!

floatの回り込み解除の方法としてよく使用されるclearfixですが、一時期は多くの旧ブラウザーに対応する必要があり、書き方も複雑なものが多くありました。 ...
スポンサーリンク