自己紹介

自分の写真

田舎でまったり暮らす主婦「さっこ」です。6人家族の紅一点。このサイトではブログに書くほどでもないことをつぶやいていこうかなと思ってます。プロフィールページにはSNS等のアカウントを紹介していますので、そちらもご覧ください。

スキン切り替え

カテゴリ

ハッシュタグ

複合検索

  • カテゴリ
  • #タグ
  • 投稿年月

Sakko Memo

SNSは主にMastodonを利用してます。やり取りはそちらのほうで。ちょっとした感想はプロフィールページの一言メッセージフォームからどうぞ。

タグ「CSS」を含む投稿[8件]

YouTubeのプレイヤー埋め込むのにCSSの検索してたらaspect-ratioプロパティなるものを知った。アスペクト比を定義できるなんてめっちゃ便利やん。まだ最新のブラウザでないとサポートされてないので使うのは躊躇うけど、数年後には普通に使えるんだろうな。
#CSS
動画を埋め込む気があまりなかったので #CSS をいじってなかったけど、今回埋め込んだのでちょいといじっておいた。中央に持ってこないとなんか気持ち悪いのよね。
投稿にHTMLを使える掲示板があったので、ふと「インラインスタイル方式で疑似クラスは記述できるんだろうか?」と調べてみたら記述はできるけどブラウザが対応してないらしい。
古いスレッドだからひょっとしたら対応してるブラウザが登場してるかもしれないけど、普通にサイトを作る場合はそんなめんどくさい事しないだろうし、需要はそうないよね…。
#CSS
投稿本文、標準スキンではURLがボックスからはみ出さないようにword-break:break-allを指定してるんだけど、これやるとリンクを貼った文字の大きさがおかしくなる。いや、パソコンでは普通なんだけど、私のスマホ(Galaxy A41,Android10,ブラウザはyandex Browser・Chrome・Edge)で確認すると文字の大きさが小さくなってたりする。font-sizeで文字の大きさを決め打ちしても駄目。

あれこれ悩んだけれど、[[COMMENT]]を囲ってるdiv要素にword-wrap:break-wordoverflow-wrap:break-wordを指定することで対処しました。今のところ問題はない模様。それにしても折返しに関するプロパティはようわからん…。頭痛くなりそう。

【追記】
結局、word-break-break-allline-break:anywherelooseも継ぎ足してみた。なんか日本語の改行が気になって仕方なかったから。日本語とアルファベットが混在してる文章、マジ面倒。
#CSS
今はtext-decoration-style:wavyって使えるんやな。昔は対応ブラウザがほぼなくて、画像で再現してる人がいたような気がする。
本当に #CSS で出来ることが増えて楽になったw
ドロワーメニューの過去ログ、カテゴリ、ハッシュタグを横並びにするためにdisplay:inlineを使ってるんだけど、これだと文字の途中で折り返してしまうことに気づいた。
flex-wrap:wrapを使ったほうが良さげ。
display:inline-blockで解決やん。無駄なことをするとこやった。
#CSS
テキストの画像置換 : SEO的にまだマシそうな手法 | UNICO LABO

参考になりそうなので書いておく。なるほど、この方法が今どきか…。
#CSS
日本語対応!CSS Flexboxのチートシートを作ったので配布します
Flexbox超便利。20年前にこれがあれば苦労しなかったのに。
#CSS