著者:村上
【GoogleChrome】検証ツールで要素のhoverを確認する方法
今まであまり :hover を使う機会が無いため知らなかったのですが、Google Chrome の検証ツールで要素が :hover の時の確認をする方法です。
:hover はマウスカーソルが要素に合わせられているときの疑似クラスですが、これが有効なときの CSS を調整しようとしても、カーソルを外すと :hover の時に表示される要素が消えてしまい、CSS を調節できない…という状況になりました。
CSS を一部修正して、強制的に常に表示されるようにしても良かったのですが、出来れば他の方法を…と思っていたところ、検証ツールにありました。
今回参考にさせていただいた記事はこちらから。
chromeのデベロッパーツールでcssのhoverを調べる方法 – Qiita
https://qiita.com/blue_camel/items/ab3d03aca7add473c329
上記の記事によると、Google Chrome の検証ツールで hover 疑似クラスを強制的に有効にする方法があるとのことです。
スクリーンショットはこちら。
まずは Chrome 検証ツールを開き、検証したい要素を選択します。
そして Elements タブを開き、下部に表示されるウィンドウから Styles を選択します。
すると、:hov という項目があるのでこちらを選択し、:hover の項目のチェックボックスにチェックを入れるだけ！
そうすると、選択した要素が hover の状態を維持してくれるので、あとはいつも通りに CSS を調整すればOKです。
そして、上記の操作をやったのに hover 状態が維持されない場合、指定している要素が間違っている可能性があります。
CSS のコードを確認して、選択している要素が正しいかどうか確認してください。
私も全く同じミスをやらかしましたので、皆様もご注意ください。
以上、Google Chrome の検証ツールで要素の :hover を確認する方法でした。
ご参考になれば幸いです。
著者:杉浦
【Vue.js】コンポーネントの持つ値をCSSに伝える
Vue.jsで小さなコンポーネントを作っていると時折デザインの一部をコンポーネントを呼び出す側で自由に決定させたい時があります。この記事ではそのやり方を紹介します。
コンポーネントの持つ値をCSSに伝えるために重要な機能はCSSにおける変数であるカスタムプロパティです。
カスタムプロパティ (–*)： CSS 変数 – CSS： カスケーディングスタイルシート ｜ MDN
CSS カスタムプロパティ (変数) の使用 – CSS： カスケーディングスタイルシート ｜ MDN
カスタムプロパティは次のように用います。カスタムプロパティの適用対象は定義したHTMLElementの子方向の要素全てです。
div.hoge-box {
--hoge-box-width: 3em; /* --hogeで宣言 */
width: var(--hoge-box-width); /* var(--変数名)で使用 */
}
div.hoge-box > div {
width: calc(var(--hoge-box-width) / 6) /* calcでも使える */
}
html {
--global--base-color: hsl(0, 0, 0); /* html, :root, bodyの様な広い範囲で指定するとグローバル的に使える */
}
コンポーネントのルートエレメント上でコンポーネントの持つ値を用いてカスタムプロパティを定義することでCSSへ任意の値を与えます。これは例えば次のようにpropsで与えられた値をcomuputedでまとめ、まとめた値をルートエレメントであるdiv.check-boxのスタイルとして定義、定義した変数をCSS内で扱う、というやり方です。
<template>
<div
:style="styleVariables"
class="check-box"
>
<div class="check"/>
</div>
</template>
<script>
export default Vue.extend({
props: {
checkboxWidth: {
type: String,
default: '3em',
},
},
computed: {
/**
* このコンポーネント中で用いるCSS変数をまとめる.
* @return {object}
*/
styleVariables() {
return {
'--checkbox-width': this.checkboxWidth,
};
},
},
};
</script>
<style lang="scss" module>
.check-box {
--checkbox-width: 3em;// 事故防止のデフォルト値
border: 2px solid #9e9e9e;
border-radius: 2px;
width: var(--checkbox-width);
min-height: var(--checkbox-width);
display: flex;
justify-content: center;
align-items: center;
}
.check{
position: relative;
top: calc(var(--checkbox-width) / 6); // def=0.5em
left: calc(var(--checkbox-width) / -20);// def=-0.15em
transform: rotate(-45deg);
transform-origin: left top;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
width: calc(var(--checkbox-width) / 2.4 * 1.618); // def=2.0225em
height: calc(var(--checkbox-width) / 2.4); // def=1.25em
}
</style>
上記コードの動作は次のデモの通りです。
いたるところでサイズをemで指定していますが変数を介しているためデザインを崩さずデザインを容易に変更できます。変数はコンポーネントのプロップで決定しているため、コンポーネントを呼び出す側が安全にデザインを変えられます。この変数渡しのやり方に加えて、アニメーションや状態の定義と変化を用いることで自由に簡単に扱える最小単位のコンポーネントを作りやすくなります。
余談ですが、カスタムプロパティを用いる際、CSS独立ファイルでは未定義の変数名を呼び出そうとするか、定義セレクタを多量にコピペすることになり辛くなります。SCSSの様な階層構造を定義できるCSS拡張言語を用いると安全に簡潔に記述できます。
// scssコード
div.hoge-box {
--hoge-box-width: 3em; // --hogeで宣言
width: var(--hoge-box-width); // var(--変数名)で使用
div { // div.hoge-box divと同じ意味になる
width: calc(var(--hoge-box-width) / 6) // calcでも使える
}
}
著者:村上
【React】Material-UIのListsコンポーネントのrightIconButtonについて
ちょっとハマったので、対応方法をまとめ。
今回は、React のプロジェクトでマテリアルデザインを導入するために利用している「Material-UI」というフレームワークについてです。
このフレームワークで用意されている Lists コンポーネントを使ってリストを作成しているのですが、リストアイテムの右端にアイコンボタンを設置したとき、ボタンを押すとリストアイテムまで反応してしまうという現象が発生していました。
バージョンが古いのも問題なのでしょうが…依存関係の問題もあり、まだアップデートができていません。
時間を見つけて行いたいと思います。
サンプルのコードはこちら。
const rightButton = (
<IconButton onClick={this.clickButton}>
<MoreVertIcon color={grey400} />
</IconButton>
);
<ListItem
onClick={this.listClick}
primaryText={[タイトル]}
secondaryText={[サブタイトル]}
leftAvatar={<img src={[画像URL]} height="40" width="40" style={style.image} />}
rightIconButton={rightButton}/>
上記のように、右端に表示したいアイコンボタンを rightIconButton を使って定義したのですが、このボタンをクリックすると、ListItem で指定した onClick も発火してしまいます。
ドキュメントによると、rightIconButton を使って定義したボタンをクリックした時は、ListItem のクリックイベントは発火しないと書かれているのですが…。
で、正直面倒くさくなってしまったため、力業で解決することにしました。
それが下記のコードです。
<div className="listItem">
<ListItem
onClick={this.listClick}
primaryText={[タイトル]}
secondaryText={[サブタイトル]}
leftAvatar={<img src={[画像URL]} height="40" width="40" style={style.image} />}
rightIconButton={rightButton}/>
<IconButton onClick={this.clickButton} className="rightButton">
<MoreVertIcon color={grey400} />
</IconButton>
</div>
ListItem から IconButton を外に出してしまい、CSS で位置を調整しました。
なお、CSS は下記のとおりです。
.listItem {
position: relative;
}
.rightButton {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
}
恐らく上記の CSS であれば、ListItem の高さが変わってもボタンの位置は上下中央揃えになるはずです。
なお、CSS はデザインに応じて適宜変更してください。
以上、Material-UI のLists コンポーネントの rightIconButton が思った通りの動作をしなかった時の対処法でした。
正式な方法ではありませんが、少なくとも私の環境では問題なく動作しておりますので、お急ぎの時はこの方法を検討してみてはいかがでしょうか。
著者:asaba
【css】縦長のページで画像が一緒にスクロールしてしまう時の対処法
divタグにくっつけたimgソースが、下にスクロールした時に一緒に移動してしまったときの対処法です。
今回は他のページで使われているアイコンを流用することにしたのですが
cssで設定した要素は絶対に一緒のはずなのになぜかスクロールと同時に画像もおりてくる事態に。。。
仕方がないのであわてず騒がず要素を触りながら確かめることにしました。
どうやら原因はpositionに何も設定していなかったのが原因
だったみたいで、ralativeだのabsoluteだのfixedだの何かしらの設定をする必要があったみたいです。
top: {
height: "40px",
position: 'relative'
},
↑このように高さが設定してあるタグに対しては何らかのpositionの値を与える必要があります。
この中で一番無難なのがralativeで、同じタグに要素をぶち込まない限りは機能してくれるので
何も制約がない場合はこいつをおすすめします。
ちなみにabsoluteはブラウザによっては反映されないものもあるので個人的にはあまり推奨しません。
著者:村上
【CSS】テキストの上下中央寄せができない時の対処法
Android 7 以下でのみ発生するテキスト位置のずれに対処したので、その方法についてまとめ。
CSS の height プロパティと line-height プロパティを指定していたのですが、何故か文字が上にずれるという謎現象が発生していました。
そして Android 8 以上の端末や、iPhone では再現せず…。
で、調べたところ下記の記事がヒットしました。
inline-blockで上下が中央に揃えるのに時間かかった – Qiita
https://qiita.com/nagito25/items/fb0e8455a8b2fdcd480b
上記の記事によると、子要素に display: inline-block; を指定してある場合、親要素で height と line-height を指定し、子要素で vertical-align: middle; を指定すると綺麗に整うとのことでした。
具体例は下記のとおりです。
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>
CSS はこちら。
ul {
height: 50px;
line-height: 50px;
padding: 0;
}
li {
display: inline-block;
width: calc((100vw / 3) - 6px);
text-align: center;
border: solid 1px;
vertical-align: middle;
}
なお、子要素の li が 1行の場合は vertical-align: middle; を指定しなくてもOKです。
2行以上になる事が考えられる場合は必ず指定しておきましょう。
以上、テキストが上下左右中央揃えにならない時の対処法でした。
最初、ずっと子要素の li 内で height と line-height を指定していたのですが、親要素で指定しないと崩れるとは…分かりませんでした。
無事解決できてよかったです。
同じことでお困りの方の参考になれば幸いです。
著者:村上
【CSS】要素の横スクロールが効かない時の対処法
今日少しハマったので備忘録としてまとめました。
CSS の overflow-x プロパティを使って、要素からはみ出た分を横スクロールで表示しようとしたところ、思った通りに動作せず…。
ただし、スクロールバーだけは表示されていたので、overflow-x: scroll; は効いていたようです。
で、原因が分からなかったので検索したところ、下記の記事がヒットしました。
CSSのoverflowを使ってはみ出た表示の指定方法 | TechAcademyマガジン
https://techacademy.jp/magazine/9428
こちらの記事によると、横スクロールを実装する際には、要素に white-space:nowrap; を追加する必要があるとのことでした。
こちらは要素内で自動的に改行しないようにするためのプロパティです。
具体的なコードは下記のとおりです。
div {
padding : 10px;
height: 200px;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
}
上記コードでは、縦スクロールは禁止し、横スクロールを強制にしています。
で、6行目の white-space:nowrap; を追加したところ、問題なく動作しました！
確かに要素内で改行が発生してしまっておりましたが、その解決策が分からなかったんですよね。
以上、要素の横スクロールが効かない時の対処法でした。
縦スクロールを実装するときには、単純に overflow-y: scroll; を追加すれば動くことが多かったので、手こずってしまいました。
どなたかの参考になれば幸いです。
著者:杉浦
【Vue】改行とv-htmlとXSS対策
Vue.js上で文字列を展開したい時があります。例えばそれは誰かが投稿したコメントをコンポーネント上に表示する時です。こういった時コメントの改行が反映されていない場合、見栄えが悪くなります。改行を行う必要があります。
HTML上の改行と言えばbrタグです。PHPにはnl2brという改行コードを改行タグに変換する組み込み関数があるぐらいです。
PHP： nl2br – Manual
改行の実現でありがちで危険なアンチパターンはこのnl2br関数を用いたコメントをそのまま表示しようと考えるものです。Vue.jsにはv-htmlというディレクティブがあり、これを用いると普段かかっている安全装置のHTMLエスケープを外し、HTMLとしてパース、実行します。brタグとv-htmlを用いることで改行コードを改行タグに変換して表示できます。
v-htmlはXSSをまあまあ容易に招く危険性を持ちます。まあまあ危険というのは単純な
<script>alert('XSS')</script>
ぐらいならVueの仕組み上実行されず済むからです。とはいえ
<EMBED SRC="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH A6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv MjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hs aW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOTQiIGhlaWdodD0iMjAw IiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlh TUyIpOzwvc2NyaXB0Pjwvc3ZnPg==" type="image/svg+xml" AllowScriptAccess="always"></EMBED>
の様な多少の変化球（scriptタグをbase64形式でエンコード、埋め込んだコード中でデコードして実行）であっさり破られるのでやはり危険です。
XSS 脆弱性を容易に引き起こすので、ウェブサイトで動的に任意のHTMLを描画することは、非常に危険です。信頼できるコンテンツにだけ HTML 展開を利用してください。ユーザーから提供されたコンテンツに対しては決して使用してはいけません。
これの対策は実現したい機能に関しての実装を生のHTMLに頼るのでなく個々の別手法を用いるのが一番でしょう。
例えば改行に関してはCSSのwhite-space実現できます。white-spaceは要素内のホワイトスペースをどう扱うか決定するスタイルであり、ホワイトスペースの一種（少なくとも正規表現の\sグループでまとめられる）である改行文字の制御もこれでできます
white-space – CSS： カスケーディングスタイルシート ｜ MDN
上記リンクから引用した次の表の’改行を残す’スタイルを用いれば
と生のHTML実行を用いるまでもありません。
| 改行 | 空白とタブ文字 | テキストの折り返し | 行末の空白 | |
|---|---|---|---|---|
normal |
まとめる | まとめる | 折り返す | 除去 |
nowrap |
まとめる | まとめる | 折り返さない | 除去 |
pre |
残す | 残す | 折り返さない | 残す |
pre-wrap |
残す | 残す | 折り返す | ぶら下げ |
pre-line |
残す | まとめる | 折り返す | 除去 |
break-spaces |
残す | まとめる | 折り返す | 折り返す |
著者:村上
【JavaScript】文字列を扇状に表示するためのスクリプト「Arctext.js」
今回は使わなかったのですが、今後使う機会があるかもしれないので備忘録としてまとめ。
文字列を扇状に表示する方法です。
画像にしてしまうのが一番簡単そうですが、それができない場合には有効です。
そのスクリプトがこちらの「Arctext.js」です。
公式サイトは下記からご確認ください。
Arctext.js – Curving text with CSS3 and jQuery
https://tympanus.net/Development/Arctext/
使い方は、まず公式の配布ページから、ソースをダウンロードします。
で、ダウンロードしたファイル内にある jquery.arctext.js を任意の場所にアップロードし、HTML の head 要素内で読み込みます。
なお、こちらの実行には jQuery も必要なので、一緒に読み込みます。
コードは下記のとおりです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="./jquery.arctext.js"></script>
準備はこれでOK。
あとは実装ですが、まず、装飾したいテキストに任意の ID 名を指定します。
<p id='arc-text'>扇状に表示したいテキスト</p>
そして、任意のタイミングで下記の処理を実行します。
$('#arc-text').arctext({radius: 300});
HTML が読み込み終わったタイミングとかでOKだと思います。
なお、上記の記述では、半径 300px の扇状にテキストをカーブさせています。
もう少し急なカーブを描きたい場合は、数値を大きくしてください。
ほかにもオプションがあり、文字列をカーブさせたいけれど、文字の向きはまっすぐなままにしたい、ということもできます。
$('#arc-text').arctext({radius: 300, rotate: false});
また、今までの指定では、山型のカーブになりましたが、dir: -1 というオプションを追加すると、谷型のカーブを描くようにもできます。
$('#arc-text').arctext({radius: 300, dir: -1});
これらを組み合わせれば、文字列を円状に表示することもできますね。
以上、文字列を扇状に表示するためのスクリプト「Arctext.js」のご紹介でした。
機会があればぜひ使ってみたいと思います。
著者:杉浦
【CSS】疑似要素による番号リストの連番を任意に飛ばす
ol、liを用いた番号リストがあります。これの番号部のみを好きに作る方法に:beforeの疑似要素を用いるものがあります。
これは
ol.only-before {
list-style-type: none;
}
の様に元々の番号を消し、
ol.has-before {
counter-reset:num;
}
ol.has-before li:before {
counter-increment: num;
content: counter(num);
background: cyan;
border-radius: 50%;
display: inline-block;
height: 1em;
width: 1em;
text-align: center;
}
の様にcounter-reset, counter-increment, contentで番号を制御、表示し、background以下で好きなように修飾する方法です。
このように好きに番号リストの番号部のデザインを作れますが、面倒な部分もあります。それは疑似要素はDOMでないためJavaScriptで操りにくい点とli要素の度のcounter-increment: num;でしか値を増やせない点です。
本来の番号リストは次の様にli要素の属性valueで番号を制御できます。:beforeの方は制御できていません。
制御する方法の一つはCSSです。適宜リセットするstyleを定義します。この方法はCSSが膨れ上がるという問題点がありますが、一応対処が可能です。
適宜インクリメント、デクリメントするのみの要素を定義する、ということもできます。これはこれでHTMLの要素数が無駄に増えます。また、抜け版を表すのには適していますが、任意に操りやすいとは言い難いです。
両方を使えばそれぞれの欠点は多少補いあえます。
もしデザインに最初から関われるのであれば、CSSで閉じている疑似要素を使うのでなく、本物の要素を扱った番号リストを作った方がよいでしょう。その方が後の変更が楽になります。Vue.jsなら簡単です。
著者:村上
【CSS】背景色と要素のブレンド方法を指定する「mix-blend-mode」プロパティ
こんなのあるんだ！というプロパティを見つけたので、簡単にまとめ。
もしかしたら今後使う機会があるかもしれませんしね。
それがこちらの「mix-blend-mode」プロパティです。
mix-blend-mode – CSSリファレンス
http://www.htmq.com/css/mix-blend-mode.shtml
このプロパティは、背景色とその要素の色の重なり方を指定できるものです。
初期値は normal で、要素に背景色ををブレンドしない状態です。
使いそうなのは、乗算の multiply と、光を重ね合わせたようになる screen、下レイヤー色に応じて、multiply か screen になる overlay くらいでしょうか。
他にもたくさん種類がありますが、使いこなせそうにないので、とりあえずこのあたりだけでも覚えておけばいいのではと思います。
なお、上記の記事に、ブラウザ上での表示例が載っているので、参考にしてください。
もしくは、こちらの記事に載っているサンプルも分かりやすくておすすめです。
mix-blend-mode – CSS:カスケーディングスタイルシート｜MDN
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode
以上、背景色と要素の色の重なり方を指定できるプロパティ「mix-blend-mode」のご紹介でした。
是非、ご活用ください。