cssまとめ

200企画前に書きあがっていたやつをようやく上げられました。
ちなみにもし記述をコピペする時はコピー欄を開かずそのままコピーしてくれればといった感じです…ああしないとタグとして認識してしまうみたいです。

なんか間違ってることありそうだな～って感じなんですけど、おおむねこれで試して僕は問題ない感じなので…よしとしましょう…。
西郷さんが褒めてくれたので嬉しかったです！

かなり一部の方々向けの記事だったと思うので、もうちょっと万人ウケする知識書くと
アンカー(>>215とか>>>30とか)の仕様はWhocares掲示板のFAQに載ってます。
>>1,5,135とか>>>30.215とかね、これはURLでも同じ方式なので割と便利に使えます。知ってる人も多いと思いますが。

あ、あと私信近いうちにお返ししたいと思っております！
200のお祝いや本棚入り等々、本当にありがとうございます…。頑張って良かったです。

僕のネットリテラシーが高いところ
・リアルタイムの話はおろか当日の話すら日記に書かない
・友人との話は書かない
・西郷との話でもこれきわどいかなってやつは確認する

僕のネットリテラシーが低いところ
・きわどくないと判断した西郷との話は全部話しちゃう

ネットリテラシーが低いとかそういう問題ではないですね。

あと酔っ払うと西郷にクレカの番号とか銀行口座の番号とか言いかけちゃうんですけどどうしたらいいんですかね？酒癖悪いんですね僕ねえ…。全桁は言ってないですよ…。(そもそも番号見ながら言ってるわけではないので正しいかも定かではないです)
リアルタイムの話は日記はじめてすぐの時はしてましたけど、しなくなっちゃいましたね…ハロウィンの時もリアルタイムで書こうとして失敗してたね。
どうも断片的なことを継続して話すよりまとめてバーって話すほうが得意みたいです。オタクの典型だねえ！！

でも西郷さんも私のBAND一覧見ます？いいですよーとか言ってくるのでなかなかアレです。
人間長く一緒にいると感覚が壊れるものなのでしょうかね。

ちなみにこのリテラシーの話も10月前半とかに書いた話です。11月8日の僕より。

11/8追記
補足なんですが、友人との話は書かないと言うのは書く方を否定しているわけではないです。
なんだろうな、確かにネットなので気を付けているというのはあります。恋人の友人が書いている日記からなんやかんや問題が起きたとか聞かないことないですからね。
でも、もちろんそういうことは可能性としてかなり低いですし、僕は友達と楽しく遊んだ日記とか読むの大好きですから全然否定してるわけではないんですけどね。
考えが古いから無駄に色々気にしがちなんだねえ…

まぁあと、なんていうか、単純に西郷さんとの話を書きたくなっちゃうんですね。

はい。
お粗末様でした。

そのうち一年くらい前の話とかは書きたいなと思ってます。西郷ぐるみの付き合いの友人も多いですしね。

Whocaresでcssを使う時のコツ改

完全に自己満で書いた記事が案外反応を頂けたのですが、認識が間違っている部分がありましたので
具体的な記述も含め、加筆修正を加えたものを上げておきます。

この内容は、僕が今までWhocares掲示板内でのcssについて格闘してきたことのまとめのようなものです。
とりあえず調べて作ってみたけどなんか違うなとか、表示されないぞ…？という人は参考になるかもしれません。
(cssに関しての知識がまったくない人にはよくわからない内容かもしれません、ごめんなさい…)

まず、掲示板内でcss組む際は、元々掲示板自体に設定されたcssがあるため、普通のHPを組むより難しい…というかコツがいります。
そういう場合の検証と解決方法です。(基本的にPCから試す方法です)

<三行まとめ>
・Whocares掲示板は元々タグが入ってるのでcssがうまく反映されないことがある
・そういう場合は元々のタグを上書きする記述が必要
・この掲示板の場合は*セレクタやstyleタグを入れて上書きするとよい

<目次>
1.検証方法<プレビューを試す><ページを更新する>(このページ)
2.掲示板に入っているcssについての解説と解決方法
3.具体的な記述
4.おまけ・書いてみての雑感

■ 検証方法
1.プレビューを試す
僕はcodepenというコードを書いたらすぐ反映してくれるブラウザツールを使用してやっているのですが、そういうツールはいろいろあるので使いやすいものを使用してプレビューしてみてください。
この地点で表示されない・思ってたのと違う場合はcssの組み方が間違っています。cssの記述そのものを直しましょう。
(※ こういったツールでは改行は反映されませんのでそこは気にしなくて大丈夫です。気になる場合はbrタグを足してください)

2.ページを更新する
日記ページはもちろん、外部cssがある場合はそのcssページも同じように更新してください。最悪ブラウザの履歴をクリアしましょう。
一度そのcssで開いてしまうとブラウザはそれを記憶してしまうので、更新が反映されずに表示されていないことがあります。
外部cssを使用している場合、特にこれに引っ掛かりがちです。

ここまでやっておかしい場合はWhocares掲示板にかかっているcssと干渉している可能性があります。

よくある問題は
「フォントが反映されない」
「文字の大きさが違う」
「設定していないのに余白が入った」
などです。
次のページで詳しく書きます。

Whocaresでcssを使う時のコツ改 2

この記事の続きです。

■ 掲示板に入っているcssについての解説と解決方法
この掲示板にかかっているcssは分かりやすく言えば2種類あり、

【元々whocaresという掲示板そのものに設定されているcss】
【掲示板を借りたユーザー(このサイトの場合だと管理人さんのことです)が設定しているcss】
です。
この2種類のcssでページ全体のデザインができあがっており、僕らが何も設定していない状態でも見やすいようにしてくれているわけです。(ソースを見ると何が設定されているかわかります)

ただし、投稿欄から投稿できる内容はこれらを上書きすることが可能です。
cssの書き方によっては上書き出来ないようなものもありますが、現状このサイトの日記板に設定されているcssについてはすべて容易に上書きが可能です。
(cssの上書きや優先順位についての解説は省きます。詳しく書いてあるサイトがいっぱいあるので調べていただければと思います)

ちなみに以前、僕がまだ知識のなかったとき、hr要素上書きできない！ギャー！って喚いたんですが(>>50,51)管理人さんが秒で対応してくださいました。本当にありがとうございます。(これに関しては別ページで補足します)

そういう訳ですので、今現在設定されている中で全体に影響を及ぼしているのは*セレクタとbodyセレクタの内容のみです。
それらを表記に加え、指定しなおすことでほとんどが解決するはずです。

以上、掲示板に入っているcssについての解説と解決方法でした。
具体的な記述例はこちらです。

Whocaresでcssを使う時のコツ改 ３

この記事の続きです。

■ 具体的な記述
基本的に、元々入っている記述としてデザインに干渉しやすいのは

・フォント
・フォントサイズ
・ページ全体の余白

この三つになります。
なので、一番簡単な方法としてはこれら元々入っている記述を加えてプレビューしてしまうことです。

■ 外部cssの場合

body {
font-family: "Hiragino Kaku Gothic ProN", "Osaka", Meiryo, "MS UI Gothic", "ＭＳ Ｐゴシック", sans-serif;
font-size: 12px;
margin: 15px;
}

■ html(投稿欄)に直接記述する場合

<div style="font-family: 'Hiragino Kaku Gothic ProN','Osaka','Meiryo', 'MS UI Gothic',ＭＳ Ｐゴシック', sans-serif'; font-size: 12px; margin: 15px;">ここに本文とかタグ</div>

これで表示が違う…ということはほぼなくなると思います。
元のcssから変えたい(上書きしたい)場合については、

フォントを変えたい：font-family
フォントサイズを変えたい：font-size
余白を変えたい：margin

上記の項目の指定されている数値や表記を弄ることで変えることができる…のですが、外部CSSの場合、優先順位の関係で更に上書きされてしまいます。
なので上記の記述をbodyではなく*セレクタに指定するか、クラス名を命名してdiv等で囲むと反映されるかと思います。

ちなみに、外部フォントを使用する場合は@importと@font-faceを入れた上で*セレクタに指定するか、クラス名をつけてそこに指定するかで使用できるかと思います。(これは普通のcss解説サイトを調べればできると思います)
※htmlに直接記述する方法で外部フォントを使う方法は多分ない…と思います。やり方があればお教えいただきたいです！

以上、具体的な記述についてでした。

ちなみにここまでやって解決しない！！！という場合もなくはないです…
全角空白などが関係している場合もあるので、1から書き直すと案外スルっと反映してくれたりします。

cssに関して僕は、この日記を作るまでクソサイトを作った当時程度の古い知識しか持ち得ておらず(今ってテーブルタグあんまり使わないんだ…へえ…って思いました…)
この日記を作る時から今まで、生放送や仕事の合間にたらたらと勉強しただけなので
そんなに難しいことではなく、ある程度わかっている人なら当たり前くらいの話だとは思うんですけれど、自分の中での整理ついでに参考になればいいなあと思って書きました。

まだまだ勉強中なので、坂ちゃんそれ違くない？法律に触れてない？詐欺やめて？？みたいなことがありましたらご一報ください…。
奇声上げながら書き直します……。

おまけ・書いてみての雑感です。興味のある方はどうぞ。