css

Font Awesome v5の使い方

  • 2018.08.31

様々なアイコンがcssだけで使えるようになるFont Awesomeがバージョン5にアップデートして少し使い方が変わっていたのでメモ 導入方法 CDNで公開されているcssファイルを読み込むだけです。 [crayon-5ba502d7e84a7481134720/] 最新版はこちらから 使い方 使いたいアイコンをこちらのページで調べてタグをコピペするだけです。 [crayon-5ba502d7e8 […]

Felxboxの使用パターン4選

  • 2018.07.26

僕が個人的によく使うFelxboxを利用したcssの実装パターン4選です。Felxboxは並び替えとかもできますが、使用頻度はかなり低いです。 横並び See the Pen ejEyxV by mizusawa (@webty_mizusawa) on CodePen. グリッドデザイン See the Pen yqovoE by mizusawa (@webty_mizusawa) on Co […]

boostrapの印刷表示をリセットする

boostrapは、デザインをあまりしたくないときに活躍してくれますが… 使用して、何気に引っかかる罠があります。 それは、印刷時に独自のスタイルを当ててくることです。 印刷画面をいい感じに表示してくれるのであれば、全然問題ないのですが、 リンク先のURLを表示してきたり、背景をすべて白くしてきたりします。 背景の色は、まだ、見やすくやるときもあるので、許せる範囲ですが、 リンク先のURLをずらー […]

動きの参考サイト

どうも中野です。 今日は動きの参考サイトを紹介したいと思います。 このサイトのココが良い!ってよくあると思うのですが、そうではなく、一覧で見やすくまとめてくれているサイトを今回は紹介したいと思います。 1.Photoshopvip http://photoshopvip.net/88174 ブログをよく参考にさせてもらっているのですが、その記事の中に「ホバーエフェクト」の記事がとても見やすかったの […]

IEとEdgeでCSSアニメーションにcalc()を使用すると動かないバグ

CSSアニメーションにcalc()を使用していたが、IE・Edgeで動かなかったので、備忘録として残しておきます。 calc()とは calcとは、css内で四則計算(足し算や引き算など)を行うことができる関数です。 対応状況 Opera Mini以外のモダンブラウザで対応しています。 calc()の主要なバグ 先ほど、Opera Mini以外のモダンブラウザに対応しているといいましたが、一部のブ […]

CSSだけで画像をトリミングする

  • 2018.04.23

position: absolute; 要素からはみ出した部分を非表示にする方法 DEMO See the Pen mLVJzL by mizusawa (@webty_mizusawa) on CodePen. サンプルコード [crayon-5ba502d7e9e30799931554/] [crayon-5ba502d7e9e37605610582/] object-fit: cover; […]

CSSで文字の柄を一定間隔で変えていく方法

  • 2018.04.09

CSSで文字の柄を一定間隔で変えていく方法の紹介です。 ファーストビューに表示するサイトタイトルなどをこのように装飾してあげるとスタイリッシュな感じのサイトになるといいと思います。 デモ See the Pen XExZRE by mizusawa (@webty_mizusawa) on CodePen. サンプルコード [crayon-5ba502d7ea307603016787/] [cra […]

CSSだけで画像に奥行きのある影を追加する方法

  • 2018.04.02

CSSで写真やイラストに影をつけて奥行きを表現する方法です。アニメやゲームなどのキャラクターの立ち絵などに使用するとキャラクターがより際立って見えると思います。 デモ 元画像 影付き画像 サンプルコード 影は filter: brightness(0%); を使って画像を真っ黒にすることで再現しています。 [crayon-5ba502d7ea779113824111/] [crayon-5ba50 […]