css

1/2ページ

CSSとJSをAtomで自動的に圧縮する

こんにちわ、ライブラリとかを使用する際とかに「style.min.css」と言った圧縮されたファイルをよく見かけますよね。 「.min」は、minifyのことで改行やスペースなどの不要なものを削除してファイルを圧縮する手法のことです。 CSSやJSを圧縮するには、WEBツールやサーバーサイドで行う方法がありますが、今回はエディタで自動圧縮する方法をご紹介したいと思います。 エディタで自動圧縮するメ […]

Bootstrap4製のマテリアルデザインのダッシュボード

Material Dashboardは、MITライセンスのBootstrap4製マテリアルデザインのダッシュボード用フレームワークです。 Demo サイドメニューやカードデザインが主な機能ですが、一覧画面や詳細画面なども作成可能です。 もちろん、Bootstrapベースなので、Bootstrapを使った構築も可能です。 管理画面などにおしゃれなサイドメニューを使えるだけで激アドだと思いました。 使 […]

Font Awesome v5の使い方

  • 2018.08.31

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

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-5c42224ea5141522642528/] [crayon-5c42224ea5148545900219/] object-fit: cover; […]

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

  • 2018.04.09

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