css

1/2ページ

Github Markdown CSSを使用する方法

  • 2019.08.16

個人的にGithubのREADEME.mdは、非常にシンプルで読み易くて好きです。 このスタイルをgithubからぶっこ抜かれたリポジトリがGithub上に公開されています。 自分で作成するサイトなどの簡単なドキュメントは、githubのスタイルを当ることで簡単に読みやすいドキュメントページができて亨保しています。 github-markdown-css DEMO Github 導入方法 npmを […]

LaravelへのTailwind CSSのインストール手順

LaravelにLaravel Mixを使ってTailwind CSSをインストールする方法を紹介します。 Tailwind CSSとは Tailwind CSSは、ユーティリティファーストのCSSフレムワークです。Tailwind CSSは、ほぼ全てのCSSプロパティをユーティリティクラスとして用意されてまり、これらを組み込み合わせることでデザインを構築して行きます。 例えば、ボタンを実装するの […]

Bootstrap4を日本語でも美しくする表示するテーマ

Bootstrap4は、あまり日本語の表示が美しくないと噂ですが、タイポグラフィ周りを調整することで日本語を美しく表示することができます。 自分でCSSの調整を行っても良いですが、せっかくBootstrapを使っているのですから既存のライブラリを使ってより開発を楽に行って行きたいと思うので、Bootstrap4のタイポグラフィ周りを調整するおすすめのライブラリを紹介したいと思います。 jpn.cs […]

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ファイルを読み込むだけです。 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity= […]

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 ブログをよく参考にさせてもらっているのですが、その記事の中に「ホバーエフェクト」の記事がとても見やすかったの […]