- 投稿日:2021-02-28T23:37:02+09:00
マウスカーソルを合わせた時に、背景色を変えたい!
はじめに
Webページでよく目にする、マウスカーソルを合わせた時に、少し色が変わることで、カーソルが合っていることを示す機能を実装しようと思いました。
しかし、私はCSSでどう色を指定すればいいのかわかりません。(#e1f1e7
←こういうやつ。どこをどれくらいいじれば明るくなるとか、わからない。)そこで、VSCodeで使える、色の指定方法を閃きました。流れ
- 元の背景色を決めて、CSSで指定しておく。
- 同じクラス(ID)の:hoverセレクタを用意する。
- 1をコピペする。
- 色の部分にカーソルを合わせる。
- 好きな色をクリックする。
1. 2. 3.
.class { background-color: red; } .class:hover { background-color: red; }4.
白い枠の部分で、元の色との違いを確認することができます。
補足
カーソルを合わせた時に、カーソルのポインターを変更すると、よりわかりやすいです。
.class:hover{ cursor: pointer; }
- 投稿日:2021-02-28T23:01:03+09:00
【jQuery】好きな画像をボタンにする
好きな画像をボタンにする
Webサイトでボタンを作りたいとき、まず思い浮かべるのは「buttonタグ」や「inputタグ(type="button")」で作る方法だと思います。
ですが他にも、好きな画像をボタンのように扱うこともできるので、今回はその方法をご紹介します。
けっこう簡単です。題材として、ボタンを押すとブドウの画像が出てくるサイトを作ります。
用意するもの
- 押す前のボタン画像
- 押した後のボタン画像
- ブドウの画像
- htmlファイル
- cssファイル
- jsファイル
ボタン画像は以下をダウンロードして使っていただいても構いません。
ではさっそく作っていきましょう。
全部で3ステップ!ステップ1 枠組みを作る
以下のようにhtmlファイルとcssファイルを書いてみてください。
※ 枠組みは本題じゃないので適当でも大丈夫です。index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>好きな画像をボタンにする</title> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="javascript/script.js"></script> </head> <body> <div id="main-div"> <div id="h1-div" class="common lightgreen"> <h1>ボタンを押すとブドウが出るよ</h1> </div> <div id="action-div" class="common lightgreen"> <!-- ボタン画像を表示するdiv --> <div id="button-div" class="common whitesmoke"> </div> <!-- ブドウ画像を表示するdiv --> <div id="grape-div" class="common whitesmoke"> </div> </div> </div> </body> </html>style.css.common { margin: 10px; border-radius: 10px; text-align: center; } .lightgreen { background-color: lightgreen; width: 50%; } .whitesmoke { background-color: whitesmoke; width: 100%; height: 150px; display: flex; justify-content: center; align-items: center; } #action-div { display: flex; }この状態でindex.htmlを実行すると、以下のような枠組みが表示されると思います。
ステップ2 画像でボタンを作る
まずindex.htmlの
id="button-div"
のdiv内に、ボタン画像を埋め込むためのspanタグを書いてください。<div id="button-div" class="common whitesmoke"> <!-- ボタン画像を埋め込むためのspanタグ --> <span id="button"></span> </div>次にcssファイルに以下のルールセットを追加してください。
※ cssの各プロパティの意味は、是非調べてみてください。/* ボタン画像のルール */ #button { background-image: url("../image/button_neutral.png"); background-size: 100%; background-repeat: no-repeat; cursor: pointer; width: 200px; height: 100px; } /* クリック時は別の画像に置き換える */ #button:active { background-image: url("../image/button_active.png"); }この状態でindex.htmlを実行すると、ボタン画像が表示され、押すとへこむと思います。
ステップ3 ブドウを出す処理を作る
jsファイルに、以下のように処理を書いてください。
script.js$(function () { // ブドウを表示するimgタグ var grape = '<img class="grape" src="./image/grape.png"></img>'; // 上記「grape」をappendする関数 var appendGrape = function () { $("#grape-div").append(grape); } // ボタンクリック時に上記「appendGrape」が呼ばれるように設定 $("#button").click(appendGrape); });ひとこと
なんでブドウか?
最近仮面ライダー龍玄にハマってるから。
- 投稿日:2021-02-28T22:54:19+09:00
グリッドレイアウトで余白、隙間を設定する方法
はじめに
gridレイアウトでは個別の位置指定をしない限り、grid枠に従ってすきまなく順番に配置されます。
今回はgridレイアウトに余白を設定する方法をまとめてみました。gridの基本はこちらにまとめてあるので、よかったら参考にしてください。
gridの使い方gridレイアウトに余白を付ける
余白の付け方は簡単で、
横方向の余白はcolumn-gapプロパティ、縦方向にはrow-gapプロパティを使うだけです。#{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; row-gap: 30px; }これでgridのそれぞれの隙間に余白を付けることができます。
また、gap:10px;のようにまとめて付けることもできます。
余白を細かく指定するときは下記の2つを使用します。
justify-content
justify-contentは、コンテナ内におけるグリッドの横方向(インライン軸)の位置を指定するプロパティです。
使える値は
start 左寄せ
center 中央寄せ
end 右寄せ
stretch 軸の領域いっぱいにグリッドを広げる
space-between 均等配置 / 左右の余白無し
space-around 均等配置 / 左右の余白ありはアイテム間の半分
space-evenly 均等配置 / 左右の余白はアイテム間と同様などがあります。
align-content
align-contentは、コンテナ内におけるグリッドの縦方向(ブロック軸)の位置を指定するプロパティです。
使える値は
start 上寄せ
center 中央寄せ
end 下寄せ
stretch 軸の領域いっぱいにグリッドを広げる
space-between 均等配置 / 上下の余白無し
space-around 均等配置 / 上下の余白ありはアイテム間の半分
space-evenly 均等配置 / 上下の余白はアイテム間と同様などがあります。
おわり
gridはflexboxに比べてシンプルに作成できるのでぜひ使ってみてください。
- 投稿日:2021-02-28T21:25:51+09:00
【初心者向け】横スクロールバーがでてしまう原因の対策方法
どうも7noteです。やっとの思いで完成したサイトだけど、なんか横スクロールバーがでてる時の対処法
初「やっと完成したと思ったサイト。だけどなんだか横スクロールバーが出てる。」
初「よくわからんからbodyに
overflow-x: hidden;
いれよっと・・・」「その手抜き工事ちょっとまった!!!」
「
overflow-x: hidden;
を使うのは最終手段!その前に直せないかチェックせよ!」横スクロールバーがでる原因は、なにかの要素がはみ出ているから
「横スクロールバーが出ている」 = 「画面からはみ出ている要素がある」
ということです。
特にはみ出る原因になりやすいのは画像やpadding。
これらがはみ出していないか確認をします。はみ出した要素を見つける方法
①確認したいサイトをPCのブラウザで開く。(google Chromeがオススメ)
②F12キー等を使い、開発者ツールを開く。(右クリック→検証でも可)
※スマホ表示を検証する場合はこのマークでスマホ表示にできます。
③selectツールを使って原因の箇所を捜査
※selectツールはこれをクリック。青くなってたらOK。
こんなかんじに要素を1つ1つ調べることができます。
ここでは以下のような感じで表示されます。・ 青・・・要素本体
・ 緑・・・paddin
・ オレンジ・・・margin今回であれば、緑の部分が出ているのでpadding分外にはみ出ていますね。
検証ツールのcssを見てみるとwidthが100%に加えてpaddingも設定しているので、最終的にはみ出てしまっています。④ 改善するたにCSSを調整・編集
今回は
box-sizing:border-box;
を入れて対応することにします!
これを入れることで、width:100%の中にpaddingが含まれるので、もうはみ出ることはないでしょう。style.css.htype-simple { /* (省略) */ width: 100%; padding: 0 20px; box-sizing: border-box; /* これを追記 */ }まとめ
原因が1箇所だけではなく複数ある場合もあるので、「検証→修正」を繰り返して改善していきましょう!
なかなか原因がみつからない場合にオススメな方法として、HTMLの要素をいくつかに区切って、検証ツール上から消していく方法があります。
検証ツールで大きめのブロックごとdeleteキーで削除していきます。「削除してもまだ横スクロールが解決しなければ、原因が他の箇所にある」ということになります。
このように原因の箇所を少しずつ少しずつ絞っていく方法が、確実に原因を突き止める有力な方法の1つです。もちろん
overflow-x: hidden;
でも解決できるのですが、これって問題を完全に解決したわけではなくてあくまでも問題を隠蔽しているような状態だと思っています。
なのでその時はよくてもあとあとそのせいでうまく行かない場面に直面したりもするので個人的にはoverflow-x: hidden;
で済ませてしまうのはあまり好きではありません。でも開発者なら自分で起こした不具合くらい、自分で直したくないですか?
それでは。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日:2021-02-28T17:58:22+09:00
[CSS+Javascript] CMYの減法混色をmix-blend-modeを使ってシミュレートするためのベースロジック
はじめに
以前に書いた記事の続きに当たります。あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しましたので、本記事はその詳細という位置づけとなります。
目的
C、M、Y、それぞれのカラーブロックを重ね、実際に混色した際の色をシミュレートします。ベースロジックのデモのため、それぞれの色成分初期値は濃度100%とし、濃度の調整はスライダーにより、3色同比率で増減させます。
つまり、結果的には単に見た目が黒から白への濃度変化するものになるのですが、その表現方法の構築が本記事でのメインとなります。1
以下が今回の完成形です。
See the Pen
stCMYblend by STSHISHO (@STSHISHO)
on CodePen.
CSS設定
1-カラーブロックの定義
<div class="container"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> </div>.container { width: 100%; } .box { width: 300px; height: 300px; } .box-1 { /* cyan */ background: rgba(0, 255, 255, 1); } .box-2 { /* magenta */ background: rgba(255, 0, 255, 1); } .box-3 { /* yellow */ background: rgba(255, 255, 0, 1); }2-センター揃えで横に並べる
.container { width: 100%; display: flex; justify-content: center; align-items: center; /* if you need */ height: 400px; position: relative; /* 中央揃えの場合は指定しなくても意図通りに表示 */ } .box { width: 300px; height: 300px; }
.container
の修正。以前ならfloat
を使用していましたが、display: flex;
で横並びにします。justify-content: center;
で中央揃えになります。必要に応じてalign-items
を指定します。今回は上下左右中央揃えにしています。
3-カラーブロックを重ねる
これは単純です。
.box
にposition: absolute;
を追加するだけです。一番最後に記述された要素が最前面になりますので、デモではYellowのカラーブロックが前面に表示されます。
4-mix-blend-modeを使う
CSSでPhotoshopのような乗算効果は再現可能か調べていたところ、こちらの記事を見つけ、MDNで仕様を確認しました。
.box
にmix-blend-mode: multiply;
を追加して、設定完了。
スライダーを設置し、イベントリスナーを設定
<div class="slider"> <span class="rowHead">濃度</span><input type="range" id="slider_all" min="0" max="100" step="1" value="100"><span class="rowTail">100%</span> </div>カラーブロックの直下にスライダーを設置し、イベントリスナーを設定します。
window.onload = () => { const t = document.querySelector('.container') //container全体を取得 const s = document.querySelector('#slider_all') //スライダーにイベントリスナー設定 s.addEventListener('input', e => t.style.opacity = e.target.value * 0.01, false) }
input
で、リアルタイムに濃度が変わります。スライダーの値が0から100までなので、0.01を乗算することでそのままopacity値となり、.container
全体のopacity
を変更します。最後に
上記を元に、スライダーをカラーごとに設置し、ターゲットをカラーブロックに変更することで、個別の濃度調整が可能になります。
なお、元になったWEBアプリケーションの詳細についてはいずれまとめる予定でいます。
[追記]
今回はあくまでも実際のケースに沿った表現方法の一例として、
mix-blend-mode
を使った方法を紹介しています。そのため、タイトルも少し修正しました。シンプルにRGB→CMY変換、減法混色をしたい場合には、il9437さんのコメントおよびコードの方がロジックとして王道ですし、参考になると思います。[参考]
当該のアプリケーションではC、M、Y、個別の濃度調整スライダーを実装しています。また、それぞれの色成分初期値が、例えば、シアンの初期値(濃度100%)は
RGB(0, 255, 255)
ではなく、RGB(65,225,210)
という具合にクライアントによって変更できるようになっています。 ↩
- 投稿日:2021-02-28T17:58:22+09:00
[CSS+Javascript] CMYの減法混色をシミュレートするためのベースロジック
はじめに
以前に書いた記事の続きに当たります。あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しましたので、本記事はその詳細という位置づけとなります。
目的
C、M、Y、それぞれのカラーブロックを重ね、実際に混色した際の色をシミュレートします。ベースロジックのデモのため、それぞれの色成分初期値は濃度100%とし、濃度の調整はスライダーにより、3色同比率で増減させます。
つまり、結果的には単に見た目が黒から白への濃度変化するものになるのですが、その表現方法の構築が本記事でのメインとなります。1
以下が今回の完成形です。
See the Pen
stCMYblend by STSHISHO (@STSHISHO)
on CodePen.
CSS設定
1-カラーブロックの定義
<div class="container"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> </div>.container { width: 100%; } .box { width: 300px; height: 300px; } .box-1 { /* cyan */ background: rgba(0, 255, 255, 1); } .box-2 { /* magenta */ background: rgba(255, 0, 255, 1); } .box-3 { /* yellow */ background: rgba(255, 255, 0, 1); }2-センター揃えで横に並べる
.container { width: 100%; display: flex; justify-content: center; align-items: center; /* if you need */ height: 400px; position: relative; /* 中央揃えの場合は指定しなくても意図通りに表示 */ } .box { width: 300px; height: 300px; }
.container
の修正。以前ならfloat
を使用していましたが、display: flex;
で横並びにします。justify-content: center;
で中央揃えになります。必要に応じてalign-items
を指定します。今回は上下左右中央揃えにしています。
3-カラーブロックを重ねる
これは単純です。
.box
にposition: absolute;
を追加するだけです。一番最後に記述された要素が最前面になりますので、デモではYellowのカラーブロックが前面に表示されます。
4-mix-blend-modeを使う
CSSでPhotoshopのような乗算効果は再現可能か調べていたところ、こちらの記事を見つけ、MDNで仕様を確認しました。
.box
にmix-blend-mode: multiply;
を追加して、設定完了。
スライダーを設置し、イベントリスナーを設定
<div class="slider"> <span class="rowHead">濃度</span><input type="range" id="slider_all" min="0" max="100" step="1" value="100"><span class="rowTail">100%</span> </div>カラーブロックの直下にスライダーを設置し、イベントリスナーを設定します。
window.onload = () => { const t = document.querySelector('.container') //container全体を取得 const s = document.querySelector('#slider_all') //スライダーにイベントリスナー設定 s.addEventListener('input', e => t.style.opacity = e.target.value * 0.01, false) }
input
で、リアルタイムに濃度が変わります。スライダーの値が0から100までなので、0.01を乗算することでそのままopacity値となり、.container
全体のopacity
を変更します。最後に
上記を元に、スライダーをカラーごとに設置し、ターゲットをカラーブロックに変更することで、個別の濃度調整が可能になります。
なお、元になったWEBアプリケーションの詳細についてはいずれまとめる予定でいます。
[参考]
当該のアプリケーションではC、M、Y、個別の濃度調整スライダーを実装しています。また、それぞれの色成分初期値が、例えば、シアンの初期値(濃度100%)は
RGB(0, 255, 255)
ではなく、RGB(65,225,210)
という具合にクライアントによって変更できるようになっています。 ↩
- 投稿日:2021-02-28T10:33:18+09:00
【Vuetify】これだけ見れば済む色の設定方法まとめ
概要
Vuetifyでの色の指定方法は様々あります。コンポーネントのテーマ色・背景色・文字色などによって、指定方法が異なることがあります。細かい所を忘れがちなので、この記事を見れば全て思い出せるようにまとめます。
プロジェクト全体で一貫性を持って、適切に色の指定を運用すると、メンテナンス性・可読性がかなり上がるのでおすすめです。
TL;DR
忘れやすい文字による指定方法だけまとめると以下
<!-- コンポーネントテーマカラー --> <v-btn color="primary darken-1">...</v-btn> <!-- テーマカラーとVuetifyカラーリストのみいける --> <!-- 背景色 --> <v-btn class="mycolor darken-1">...</v-btn> <!-- テーマカラーとVuetifyカラーリストのみいける --> <!-- 文字色 --> <v-btn class="red--text text--darken-1">...</v-btn> <!-- テーマカラーとVuetifyカラーリストのみいける --> <!-- styleに直接書く --> <v-btn style="color: var(--v-mycolor-base);">...</v-btn> <!-- テーマカラーのみ、濃淡標準は-baseが必要 -->事前知識
Vuetifyの色について
Vuetifyでは元から色に名前がついています。
red
だと赤で、red lighten-1
だと1段階明るい赤、という具合にです。
これらをうまく利用するのがオススメです。色リストはこちら:
https://vuetifyjs.com/en/styles/colors/#sass-color-packテーマカラーについて
独自に色に名前をつけて、プロジェクト全体で使用することができます。
例えばbackground: #6200EE
と設定しておけば、プロジェクト内のCSSなどでbackground
と記述することで#6200EE
の色を設定できます。このような色をテーマと呼び、すべてのテーマカラーについてlightモードとdarkモードそれぞれ別々に色を設定できます(同じ色でも大丈夫です)。プロジェクトを作成したらデフォルトで
primary
,secondary
,accent
,error
,warning
,info
,success
の7つのテーマカラーが用意されています。各色は、次のようにして自由に書き換えられますし、新たに追加もできます。
特に上書きしなかったデフォルトのテーマカラーは、デフォルトの値が採用されます。指定方法は次の2パターンのみ
* Vuetify色リストから呼び出し(colors.色.濃淡度
)
* Hex形式vuetify.jsimport Vue from "vue"; import Vuetify, { colors } from 'vuetify/lib'; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { primary: "#ff0000", secondary: colors.green, accent: colors.red.darken3, error: colors.red, warning: colors.yellow, info: colors.grey, success: "#795548", mycolor: "#e0e0e0", }, dark: { primary: "#ff0000" secondary: colors.green, }, }, }, });テンプレート内での色の指定方法
テンプレート内で実際に色を指定したいときの指定方法を、各場合において紹介します。
コーディング中に困ったら上から順に試していくと求める部分の色指定ができたりします。1. UIコンポーネント
VuetifyのUIコンポーネントを利用している場合、
color=
でコンポーネントのカラーを設定できることがあります。<!-- OK --> <v-btn color="red">...</v-btn> <!-- 赤色--> <v-btn color="red lighten-1">...</v-btn> <!-- 一段階明るい赤 --> <v-btn color="mycolor darken-1">...</v-btn> <!-- 独自テーマもいける --> <!-- NG --> <v-btn color="#66002E">...</v-btn> <!-- Hex等は使えない --> <v-btn color="lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->この指定方法はコンポーネントがcolor=""に対応してる場合のみ使えて、しかも設計されてる部分の色しか変わらない(例えばv-btnでは背景色が変わるのみ)。
このやり方で思うように色を指定できなかったら2番以降を試しましょう。2. 背景色 -- classで指定
背景色を変えたい場合、次のようにclass指定でいける場合が多いです。
<!-- OK --> <v-btn class="red">...</v-btn> <!-- 赤色--> <v-btn class="red lighten-1">...</v-btn> <!-- 一段階明るい赤 --> <v-btn class="mycolor darken-1">...</v-btn> <!-- 独自テーマもいける --> <!-- NG --> <v-btn class="#66002E">...</v-btn> <!-- Hex等は使えない --> <v-btn class="lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->3. 文字色 -- classで指定
文字色を変えたい場合、次のようにclass指定でいける場合が多いです
<!-- OK --> <v-btn class="red--text">...</v-btn> <!-- 赤色--> <v-btn class="red--text text--lighten-1">...</v-btn> <!-- 一段階明るい赤 --> <v-btn class="mycolor--text text--darken-1">...</v-btn> <!-- 独自テーマもいける --> <!-- NG --> <v-btn class="#66002E--text">...</v-btn> <!-- Hex等は使えない --> <v-btn class="text--lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->急にちょっとややこしくなる。なんで色指定は
--text
なのに濃淡度指定はtext--
なんや4. 最後の手段 -- styleに書く
2と3のやり方で色指定できなかったら、styleに書くしかないですが、この場合もテーマカラーが使えます。
<!-- OK --> <v-btn style="color: var(--v-primary-base);">...</v-btn> <!-- primary --> <v-btn style="color: var(--v-mycolor-lighten1);">...</v-btn> <!-- 独自テーマもいける --> <v-btn style="color: #6200EE;">...</v-btn> <!-- 通常のCSSの指定方法は当然いける --> <!-- NG --> <v-btn style="color: var(--v-primary);">...</v-btn> <!-- baseがないとだめなので注意 --> <v-btn style="color: var(--v-red-base)">...</v-btn> <!-- Vuetifyのカラーネームが無理になる -->Vuetifyのカラーネームが無理になり、濃淡設定しない場合
-base
をつけないといけません。ただしこれを使えるようにするには次のようにcustomePropertiesをtrueにする必要があります。
vuetify.js//...略 export default new Vuetify({ theme: { themes: { light: { primary: '#FF7F51', // ... } }, options: { customProperties: true } } });styleで指定する場合も可能な限り文字(テーマカラー)を使ったほうがいいです。可読性が上がりますし、色を変えたいときのメンテナンス性が上がります。
まとめ
結論、Vuetifyの色指定周りは便利ですがちょっとややこしいですよね。
一貫性が生じるように、開発チームで色の指定方法はルールを決めておいたほうがいいかなと思います。
個人的おすすめ運用方法は下記です。
* プロジェクト内で頻繁に使う色はテーマカラーを設定して、可能な限り名前使って指定する
* 頻繁に使わない色は、class="red lighten-1"
のようにVuetifyで用意されてるカラーネームを使って可読性上げる
* どうしてもこだわりたいけどテーマカラー設定するほどじゃない色は、Hex形式等も許容他皆さんのおすすめ運用方法や、抜けてる指定方法あったらコメント欄からぜひ教えてくださいm(_ _)m
最後に
最後まで読んで頂きありがとうございました!
Twitterもやってます。プログラミングやテクノロジー関連広く話題にするのでよかったらフォローお願いします!@isasenth