IT the Best

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

HTML

【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- |【HTML】【JavaScript】

スライダーの値をリアルタイムに取得HTMLのinput要素のtype:rangeは、スライダーによる数値の指定ができます。スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。JavaScriptにjQueryを使用しています。(…

【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(グラ…

「HTML」縦書き・行書体による575 | 「CSS」

あこがれた たてにしたくて できなくて などと思った人も多いでしょう。 ご覧のとおり縦書きはできます。 縦にする -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; 行書体 font-family: “HGP行書体”, “MS P明…

「HTML」「CSS」WEBページ背景色に悩んだら#f1f1f1

WEBページ制作ではデザインをどうしようか悩むものですよね。 背景色もどうしようかと思って、何度もいろいろ試してしまいます。 コンテンツの色など、ほかの要素との相性によってはしっくりくる色を見つけるのは、なかなか難しいです。 そんなときに便利な…