どーもです。ホオズキとビワでお届け致します。
ＣＳＳのコードを使えば、ブログにも無限の表現の可能性と言うものを感じました
・ＣＳＳのコード
キッカケは、我ながらあまりにもしょうもない思いつきやった・・・。ちょっとここだけは諸事情によりスクショを使わせて頂く。
は？なんだこりゃ？昨日の記事かこれは。これがどうかしたか？
アホか！己は分からんのか！これに込められた「工夫」がッ！！！
工夫？
「～」の文字が、縦書きなのが分からんのかァ！！！
そ、そう言えば・・・でもこんなの画像データでいくらでも回転なんて出来るんじゃない？
アホか！これは「ＣＳＳ」で描かれた縦「～」なのやで！それをスクショした画像なのや！
へ、へぇ～そりゃまた。こんな細かいところにこだわったもんだね。
ちゃうのや！元々はこれを管理人は記事公開当時「 | 」（縦線）で公開しとった！真っ直ぐな線とグニャグニャの線の違いや！！！
「 | 」と言うのはどうにも無機質と言うか、セリフっぽい感じがしない！出来れば「～」で表現したい！でもうまく出来んから諦めとったのや。
そもそも縦にしなければいいだけなのでは。
アホか！ここは縦表記にして強調したいと言うのが大前提や！そんで、それでうまく行かなかったというようなことを、ＬＳＳさん（id:little_strange）さんのブログにボソっと愚痴ったのや。
ＬＳＳさんはＣＳＳのエキスパートな方で、あくまでもこれっぽっちのことも自分はＣＳＳで実現できないのに、様々な表現を実現なされて改めてスゴイ！と言う主旨の発言やったのやけど・・・。
ま、まさか・・・！？
そう！それでなんとＬＳＳさんは自分のこのしょうもない思いつきを実現してくださるために骨を折ってコードをご提示くださったのや！
ば、バカヤロー！人様の手を煩わせやがって！しかもこんなしょうもない思いつきのために！！！
まさに神様仏様ＬＳＳ様と言うものや！しかし、記事部分でまぁ知恵を授かったコードを使ったのやけど、一度公開した記事の追記みたいな形になるからな。
これではあまりにも勿体ないと思ってな。そんで今回は、このコードを使ってなんか記事を作りたいと思ったのや！ちょうどネタも不足気味やし・・・。
おい最後本音！！！
・閲覧環境について
あ、ちなみにやねんけど、このコードの縦回転はパソコンブラウザ（chrome、firefox）で確認したもので、スマホ（xperia）の標準ブラウザや、スマホのはてなブログアプリでは縦回転しないことを確認している。ＰＣモードでもアカンかった。
それが冒頭でスクショにした理由や。なんで表示されんのか理屈は分からんけど、記事のここ以下の部分はパソコンブラウザでの閲覧を推奨する！！！
そんなの不親切じゃね！？
バカヤロー！！！
うわ！声デケェ！！！
ええか！ワイがパソコンでと言うたらパソコンなのや！当てはまらんと言うならおととい来やがれと言う話なのや！ただそれだけやで！
自分がそうしたいと思ったら周りが合わせるのが当たり前なのか！しゃらくせぇわ！否！いつだって合わせるのは客の方なのやで！
ワイはどうしてもＦＦ７が遊びたかった！でもマリオやカービィも遊びたかった！でも小遣いは有限やで！さらば！マリオ！カービィってなものや！！！
ゲームハードの話と一緒にすんな！！！
ともあれ、スマホブラウザやとキチンと表示されんかもしれんけど、それは予め言うたからな？と言うおことわりや！！！
・回転コード
まずは管理人が教わったコードを表記するで！
ちなみにはてなブログにはブログ編集画面で画面の上の方に「ＨＴＭＬ編集」と言う画面があって、そこにこう言う＜コード＞を埋め込むことで、ブラウザ上ではこう言う＜表記＞になります。
＜コード＞
<p>タ</p>
<div style="display: inline-block; transform: rotate(90deg);">～</div>
<p>イ</p>
<p>ム</p>
＜表記＞
タ
イ
ム
＜コード＞
<p style="writing-mode: vertical-rl; font-size: 200%;">タ～～～～～イム</p>
＜表記＞
タ～～～～～イム
＜コード＞
<p style="writing-mode: vertical-rl; font-size: 250%; margin: 0 50%;">タ～～～～～イム</p>
＜表記＞
タ～～～～～イム
なるほど、対応ブラウザで見る限りは確かに「～」の文字がどれも回転しているね。
最後のヤツは公開当時の中央寄せまでＬＳＳさんが考慮してくださったものや。中央寄せを使わないならば１、２番目を使うのが良いやろう。
・実践編
そんでなんとかこのコードを活用したものを作りたい！そもそもこの記事はそれが全てや！そんでいくつか案を考えてみたで！
じゃあもうこっからで良かったんじゃね！？
まずこれや！どうや！ツッコむ感じが出てるんと違う？
う～ん・・・どうだろうか？
これはどう？ズッコケる感じが出てるんと違う？
どうでしょうかね・・・。
！
や
っ
て
み
ろ
や
続いて言葉をぶつけ合う感じ。ホンマはもうちょっと行間つめたいのやけど、<br/>＝改行のタグはなんかはてなやと勝手に<p> </p>＝段落のタグに書き換えられてまうのや。
う～ん・・・読みにくいとしか。っつ～かこのためだけにボクの後頭部のアイコンとか描いたの！！？
・結び
そんなワケで以上やで！
これで終わりかいッ！うちにあるまじき短さだな！
いやそら長々綴ってもしゃ～ないし。ただ言えるのはＣＳＳには無限の可能性があると言うことやな。はてなの編集画面を使っている限り、出来ることには限りがあるけど。
それは確かにね。パパっと作れるＬＳＳさんはやはり神です！
・・・今回はここら辺で。
お読みいただきありがとうございました。
※一つ前の記事
サンデー・バセバル（baseball）・タイム！【ビッグボスの船/早くも暗礁に乗り上げる/33-4/それ行けカープ！】
※クリックお願いします！
※フォロー、読者登録お願いします！
