「HTML/CSS」 一覧

知っておくと便利!!SASSで用意されている8つの演算関数をまとめてみた

はじめに SASSでは、知っておくと便利な関数がたくさん用意されています。 今回は、計算用の関数にフォーカスして、ご紹介していきます。 percentage:数値に「%」を付ける round:数値を四 ...

これだけでOK!!CSSで中央寄せにする4つの方法

これだけでOK!!CSSで要素を中央寄せにする4つの方法【初心者向け】

要素の種類によって方法が異なる CSSで要素を中央にするには、対象がどんな要素なのかを把握する必要があります。 今回は4つの要素にフォーカスしていきます。 こちらの4つの方法を使うことが出来れば、実務 ...

ユーザビリティ向上!覚えておくべき11種類のカーソル表示

CSSで使える!覚えておくべき11種類のカーソル表示一覧

ユーザビリティを上げてくれる「カーソル表示」をまとめてみました!
カーソルは20種類以上の表示がありますが、今回は覚えておくべきカーソルをピックアップして紹介していきます!!

CSSだけでスクロールバーをカスタマイズ

CSSだけでイケてるスクロールバーをデザインしよう!

今回はスクロールバーをサイトのデザインに合わせてカスタマイズする方法を紹介していきます!この方法はCSSのみで実装することが出来るので、動作が重くなったり、コードがグチャグチャになりづらいのが嬉しいですね!

Chromeでアンダーラインが切れてしまった時の対処法

Google Chromeでアンダーラインが切れてしまった時の対処法

今回はChromeでアンダーラインが切れてしまう問題を解決していきます!
Chrome 64のアップデートから「text-decoration: underline」を使用するとアンダーラインがプツプツと切れるようになりました。
人によっては、切れた方がいいという場合もあるかもしれないので切る方法も解説していきます!

pxとvwを変換してみた!

SASSを使ってpxからvwに変換できる関数を作ってみた

今までpxで指定していた要素をvw指定にしてviewportに応じて広げる必要が出てきたので、pxからvwに変換する関数をSASSを使って実装してみました!

CSSだけでテキストに縁をつけてみよう

CSSだけでテキストを縁取りする方法トリッキーすぎた!

今回は、お仕事でテキストを縁取りする事態が発生したので、こちらを紹介していきます!!text-shadowを限界まで(?)使った実に厄介なものになっているので限界までわかりやすく説明しました(笑)最後の方にはトリッキーすぎる記述をSASSのmixinにまとめたものを用意しているので、ぜひ持って帰ってくださいね!

CSSでテキストにグラデーションを掛けよう

CSSでテキストにグラデーションを掛けてみた!

今回はCSSだけでテキストにグラデーションを掛ける方法を紹介していきます! CSSのみでテキストグラデーションを実装できれば、メンテナンス性も向上するのでぜひ、積極的に使っていきましょう!!テキストにグラデーションを掛けるために画像を切り出して、文言修正するときはもう一度切り出して...。なんていう黒歴史にはサヨナラしたいですね♪

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.