読者です 読者をやめる 読者になる 読者になる

知識探偵クエビコ

人類史・古代史・神話の謎を探ったり、迷宮に迷い込んだり……

はてなブログ記事へのCSS直書きを試してみる

はてなCSS、どうしてます?

いちいち設定行って直すとかめんどくさいし、特定の書類でしか使わない設定って多いでしょ?

たとえばTABLEのデザインなんて使用目的で毎回変わるんだし、そんなもの共用の一般設定に入れたら重くなるばかりだし。

一時<style scoped>があったんだけど仕様書から削除された話読んだり

なんでかって言えばそれはShadow DOMのCSSがscoped相当になるため「重複機能」と判断されたって話を読んだり

そりゃそうだよ。

本当なら個別にスタイル設定使いたい場面は多いんだから。

毎回必要性の変わる<TABLE>のデザインをCSSでやれとか、いろいろな機能をCSSに無茶振りしてるんだし、こんな動きが出てくるのは当然。

 

でまあ、こんなの読んだり

 

それで思ったわけですよ。

 

これ、<STYLE>直書きしちゃえばいいんじゃね?

 

不安はあるんですよ。

今後どういう風に実装されるかがわからないし、今現在でもいろいろなブラウザでどう動作するか保証がない。

しかし既にトレンドとして、<BODY>の中で個別に<STYLE>を使用することを禁止するような大義名分が立っていない。

むしろこれは時代が求める、必要とされる機能であり、禁止する意味がない。

実は<style scoped>だって単なる言い訳みたいなものだったんだし。

 

実際にやってみましょう。

はてなのデザインCSSを使用しない、ブログ記事へのCSS直書き。

 

実はもうやってるんですけどね。

とりあえず簡単に、太字にした文字を大きくする設定を<strong>に仕込んでみました。

みなさんのところではどう動作してますか?

 

次はもうちょっと複雑なことを試してみましょう。

やっぱり使うたびに要求の違うTABLEで、背景色と文字の揃えをnth-childで変えてみました。

1 サンプル 111
2 文字と 1
3 数字で 111111
40 どうなるか 0.11
500 1111.111

 どうなるか?

 

あ、このページに直接書いたstyleの中身はこんなのです。(表示する中身にstyle定義入ってると、はてなエディタにpreもcodeもなかったことにされちゃった)

  strong.big {font-size: 1.5em}
  table.sample {width: 400px;border: 1px solid #666; }
  table.sample td:nth-child(2n+1) {text-align:right;}
  table.sample td:nth-child(2n+0) {text-align:left;}
  table.sample tr:nth-child(2n+1) {background-color:#FCC;}
  table.sample tr:nth-child(2n+0) {background-color:#CCF;}

 

注意事項

今の段階では適応範囲が同時に表示されてる記事全体に拡がっちゃうんで、ちゃんとクラス名とかは設定しなきゃダメですよ。

しかし、とりあえずスタイルシートの設定を試すのには使えます。いちいち設定行ってCSS書き直す必要がないから。