IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

WEBデザイン

【CSS】背景パターン --サンプル集-- | 【WEBデザイン】

投稿日:2019/07/19 CSSだけでできる柄物の背景を、備忘録として書き記している記事です。 ドット柄 光沢 ドット柄 ドット柄を表現できる背景色のCSS一覧 緑-水玉(濃緑) HTML CSS JS <div class="style1"></div> .style1{ background-color: #04bd41; background-image: linear-gradien…

【HTML】画像やアイコン・文字などを反転させる - scale()を使った方法

Photo by Devin Avery on Unsplash scale()を使ったHTML要素を反転させる方法 コード 見本 通常 反転 上下反転 scale()を使ったHTML要素を反転させる方法 [HTML] [CSS] [スタイル] コード transform:scale(-1,1); 見本 通常 通常 HTML CSS JS 5 Photo by Thi…

【WEBデザイン】背景色と文字色の組み合わせ -キレイめカラー集-

個人的に相性が良いと思った背景色と文字色の組み合わせを、備忘録として書き記している記事です。 「salmon」「white,#555」 「salmon」「white,#555」 background-color: salmon;color: white; background-color: salmon;color: #555;

【CSS】背景色 グラデーション --サンプル集-- | background:linear-gradient 【WEBデザイン】

投稿日:2019/07/19 CSSのbackgroundプロパティに指定する複雑な値を、備忘録として書き記している記事です。 虹色 虹色 <div class="style1"></div> .style1{ background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255), rgb(60, 120, 255),rgb(80, 255,…

ソースコードハイライト【Google Code Prettify】にCSSだけで言語情報を記述する - 開発日記

Photo by Sean Lim on Unsplash Google Code Prettify HTML CSS JavaScript sample html JavaScript Google Code Prettify 使用している code-prettify https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst HTML、CSS…

【CSS】でスクロールバーの表示を変えて、個性的なデザインにカスタマイズする【WEBデザイン】

今回の記事は、[画像]この見慣れたスクロールバーのカスタマイズに関する記事です。前置きFirefox、IEなどでは、サポートされていません。スクロールバーのカスタマイズで使用する疑似要素のブラウザ互換性[画像] ::-webkit-scrollbar::-webkit-scrollbar-::…

【WEBデザイン】CSSで画像をホバー時にハイライトさせてオシャレにする

記事トップ画像のように、マウスホバー時に画像を拡大/縮小・ぼかしをしてハイライトさせます。cssの「transition」「opacity」「transform」プロパティの3つを使用しています。サンプル(マウスホバー時)拡大/縮小ぼかし透明度の値:0.5変化時間の設定説明tr…

【CSS】超簡単「WEBデザイン」を美しくする | ボックスシャドウ(box-shadow)

Google Chromeで簡単にUIで設定値を変更できる前回、Google Chromeの開発ツールが超便利という記事を書きました。今回は、その開発ツールを使った簡単WEBデザインの紹介をします。CSSのbox-shadowというプロパティをつかって要素にかげをつけるデザインです…

【WEBデザイン】を美しくする | グラデーション(linear-gradient())

【WEBデザイン】を美しくする | グラデーション // linear-gradient() 使い方 グラデーションの方向 途中色 グラデーションをつくる linear-gradient() CSSのbackgroundプロパティに使用することのできる関数です。 使い方 background:linear-gradient(グラ…