再翻訳された猫ランドのCSSメモ

”自分用メモ”だニャ。
main.css内のやつだけ書く。絵ページとか、使い回す想定で作られていないものは書かない。

更新履歴

2023/11/27: テキスト装飾 > 追記と整理
2023/03/02: その他汎用 > リンクカード追加
2023/02/??: その他汎用 > 文字ボックス追加
2023/02/16: ページを公開

ほかサイレント修正多数:-O

h1見出し

h2見出し

h3見出し

h4見出し

テキスト装飾

これは普通のpタグだよ～

これはリンクだよ～これは訪問済みリンクだよ～

class="text_bold"太字です。

class="text_italic"ななめになる文字。いつ使うんだ

class="text_uLine"下線が引かれる文字。underlineの略でuLine

class="text_del"取り消し線が引かれる文字

class="text_whisper"小さな声で話しているような文字

class="text_em"マーカー風の文字　色違いも　あるよ

class="text_gray"文字色が変わる・グレー

class="text_pink"ピンク

class="text_blue"水色

class="text_kiiro"黄色

class="text_background"背景色がつく黄色水色ピンク色（これはどこで使うのか？）

class="text_code"先ほどからclass名の表示に使っている、インラインでコードを載せたいときに使えるやつ

複数のクラスを組み合わせて使う
マーカー文字と取り消し線 → 同じプロパティで表現しているので共存できない
コード表示用のやつ + 何かの組み合わせは、思ってたのと違う感じになりやすい

その他汎用

水平線

文章の区切りに使える線。class名なし<hr>タグ。このページでも何度も使っている。

文字ボックス

まるで箱に入っているような、目立つ文字だよ。とても目立つよ。

長めの文章のほうが
いい感じに見える。
にゃー。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

リンクカード

こういうのをワードプレス製個人サイトさんで何度か見かけていて、なんか良いなあと思ったので作りました。
使いどころは少ない気がする。

そういえば、タグの持つ属性（この場合ならaタグのhref属性）の中身を、疑似要素のcontentプロパティに入れる方法を初めて知りました。便利で楽しいCSS！！

再翻訳された猫ランド

猫の手を借りよう

なんでもセンター寄せ屋さん

class="parts_center"

なんでもセンター寄せしてくれるやつ。
display: block;と width: fit-content;が当てられてしまうので、それが困る場合もあるかも。

リンクの文字色を変えたくないときに

class="parts_notLinkText"

普通のaタグに当てている、下線以外のスタイルを打ち消しているクラス。とても便利。

このクラス名がつけられた要素の下の階層の要素すべてに適用されるようにしたよ。例えばliタグの中のaタグにいちいちクラス名を付けるのは面倒かなと思ったため、このような仕様にした。

再翻訳された猫ランドのCSSメモ

リスト

順序なしリスト

順序ありリスト

inline順序なしリスト

小さい説明リスト