自己紹介

自分の写真

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

スキン切り替え

カテゴリ

ハッシュタグ

複合検索

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

Sakko Memo

プロフィールページの一言メッセージフォームで感想を受け付けてます。お気軽にご利用ください。

タグ「CSS[12件]

ちょこちょこっと#てがろぐ スキンの#CSS を手直し。スマホから直接サーバのファイルを弄ったので、後からパソコンにバックアップしなきゃ。
長さの単位にicというのがあるのか。要素に適用されるフォントの「水」の文字の幅が1icになるそうな。だがしかし、現在サポートしてるブラウザがない。
それにしてもこの単位、どんな経緯で生まれたんだろう。emだけで良さそうなもんだけど。
#CSS
doを運営してるガタガタさんが書籍を執筆されたとのこと。早速予約注文しました。
Webサイト作成に関しては全て独学でやってきたので現在進行形でテンプレートを作成されてる方の書籍は貴重なのです。参考にさせていただきます。
#CSS
プロフィールページ#てがろぐ での投稿をSSIで埋め込んでいるんだけど、ハッシュタグなど内部リンクのURLにスキン名がくっついてくるので(これ自体は正常な挙動)正しいURLにアクセスできない。そこでリンクを無効にするCSSがないかと探したらpointer-eventsプロパティというのを発見。値をnoneにすればポインターイベントが発生しない→リンクが機能しなくなる、という寸法です。これでクリックされることがなくなって安心。
にししさんからの返信でちゃんとリンクできることはわかったけど、これだとスキンの切り替えは諦めざるを得ない。どちらを優先するか悩ましいところ。
#CSS
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