カテゴリーアーカイブ CSS

村上 著者:村上

【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 が思った通りの動作をしなかった時の対処法でした。
正式な方法ではありませんが、少なくとも私の環境では問題なく動作しておりますので、お急ぎの時はこの方法を検討してみてはいかがでしょうか。

  • この記事いいね! (0)
asaba 著者:asaba

【css】縦長のページで画像が一緒にスクロールしてしまう時の対処法

divタグにくっつけたimgソースが、下にスクロールした時に一緒に移動してしまったときの対処法です。

今回は他のページで使われているアイコンを流用することにしたのですが

cssで設定した要素は絶対に一緒のはずなのになぜかスクロールと同時に画像もおりてくる事態に。。。

仕方がないのであわてず騒がず要素を触りながら確かめることにしました。

どうやら原因はpositionに何も設定していなかったのが原因

だったみたいで、ralativeだのabsoluteだのfixedだの何かしらの設定をする必要があったみたいです。


top: {
    height: "40px",
    position: 'relative'
  },

↑このように高さが設定してあるタグに対しては何らかのpositionの値を与える必要があります。

 

この中で一番無難なのがralativeで、同じタグに要素をぶち込まない限りは機能してくれるので

何も制約がない場合はこいつをおすすめします。

ちなみにabsoluteはブラウザによっては反映されないものもあるので個人的にはあまり推奨しません。

  • この記事いいね! (0)
村上 著者:村上

【CSS】テキストの上下中央寄せができない時の対処法

Android 7 以下でのみ発生するテキスト位置のずれに対処したので、その方法についてまとめ。
CSS の height プロパティと line-height プロパティを指定していたのですが、何故か文字が上にずれるという謎現象が発生していました。
そして Android 8 以上の端末や、iPhone では再現せず…。

で、調べたところ下記の記事がヒットしました。

inline-blockで上下が中央に揃えるのに時間かかった – Qiita
https://qiita.com/nagito25/items/fb0e8455a8b2fdcd480b

 

上記の記事によると、子要素に display: inline-block; を指定してある場合、親要素で heightline-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 内で heightline-height を指定していたのですが、親要素で指定しないと崩れるとは…分かりませんでした。
無事解決できてよかったです。
同じことでお困りの方の参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【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; を追加すれば動くことが多かったので、手こずってしまいました。
どなたかの参考になれば幸いです。

  • この記事いいね! (0)
著者:杉浦

【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 展開を利用してください。ユーザーから提供されたコンテンツに対しては決して使用してはいけません。

テンプレート構文 — Vue.js

 これの対策は実現したい機能に関しての実装を生のHTMLに頼るのでなく個々の別手法を用いるのが一番でしょう。
 例えば改行に関してはCSSのwhite-space実現できます。white-spaceは要素内のホワイトスペースをどう扱うか決定するスタイルであり、ホワイトスペースの一種(少なくとも正規表現の\sグループでまとめられる)である改行文字の制御もこれでできます
white-space – CSS: カスケーディングスタイルシート | MDN
 上記リンクから引用した次の表の’改行を残す’スタイルを用いれば
と生のHTML実行を用いるまでもありません。

  改行 空白とタブ文字 テキストの折り返し 行末の空白
normal まとめる まとめる 折り返す 除去
nowrap まとめる まとめる 折り返さない 除去
pre 残す 残す 折り返さない 残す
pre-wrap 残す 残す 折り返す ぶら下げ
pre-line 残す まとめる 折り返す 除去
break-spaces 残す まとめる 折り返す 折り返す
  • この記事いいね! (0)
村上 著者:村上

【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」のご紹介でした。
機会があればぜひ使ってみたいと思います。

  • この記事いいね! (0)
著者:杉浦

【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なら簡単です。

  • この記事いいね! (1)
村上 著者:村上

【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」のご紹介でした。
是非、ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【CSS】object-positionが効かない時の対処法

今回は、CSSのプロパティ object-position について。
object-fit: cover で画像をトリミングした際に、トリミングする位置を画像中央から任意の位置に変更するためのプロパティです。
今までは画像中央の切り抜きで問題なかったのですが、今回は画像の下の方を切り抜きたかったので、使ってみました。

が、img タグにプロパティを追加したのに、反映されず…!
なので、調べてみたところ、下記の記事がヒットしました。

CSS だけで画像の切り抜きをうまくやる – Qiita
https://qiita.com/tmorikawam/items/9947a22e9a5e1183502d

 

なんでも、object-fit を指定した img に、高さが指定されていないと object-fit:cover が効かないのだそうです。
その場合は、object-fit ではなく、divoverflow で見切れているだけの場合があるようで、そうすると切り抜き位置を変更できないとのこと。

そのため、object-fit を追加したい img タグには、高さもしくは幅を指定すればOKです。
色々いじって追加してしまったので、一旦 CSS を元に戻してから、下記のように img タグに幅・高さを指定したところ、ようやく切り抜き位置を変更できました。

img {
    width: 100%;
    height: calc(100vh - 30px);
    object-fit: cover;
    object-position: 50% 100%;
}

なお、上記のコードでは、左右中央で下部分を切り抜いています。
表示したい画像の下の方にメッセージがあったので、下部分が欠けるのはNGだったので、このようにしました。

 

以上、object-fitobject-position で画像を切り抜いた際、切り抜き位置を変更する方法でした。
意外と見落とすかもしれないので、お気を付けください。

  • この記事いいね! (0)
著者:杉浦

色々便利なフロントエンド技術の書いてあるFrontEndHandbook2019の紹介

 昨年度までは日本語訳したものがQiitaなどどこかしら分かりやすい場所に上がっていた様なのですが、今年度は見当たらないの本元を検索。githubにありました。
FrontendMasters/front-end-handbook-2019: [Book] 2019 edition of our front-end development handbook
Front-end Developer Handbook 2019 – Learn the entire JavaScript, CSS and HTML development practice!
 FrontEndHandbookには主にJavaScript、CSS、HTMLに関連するその時々の新しい技術と発行直前の流行り、何が出来れば効率よく品質の良いフロントエンドを作れるかなどが載っています。大体の記事は短めの話とリンク集で、そういったものが集まっています。リンクの先は結構がっつりした話が多いです。
 即物的に役立つのはChapter 5. Front-end Dev Toolsです。この章には、これ便利だよ、といった編集者らのおすすめ開発ツールが載っています。有名どころが多いですが、とにかく数が多い為何かしら知らない有益なツールを見つけられます。

  • この記事いいね! (1)