カテゴリーアーカイブ CSS

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

著者:杉浦

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

著者:村上

【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 ではなく、div の overflow で見切れているだけの場合があるようで、そうすると切り抜き位置を変更できないとのこと。

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

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

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

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