ブログ 記事中のコードなどを折りたたむ方法の紹介と解説[コピペ可能]
あいさつ
どうも、はかせです。
先日闇の深そうなコードとともに配列の基本を書きました。
hakase0274.hatenablog.com
その中であまりにも行数が長くなってしまった(してしまった)ため
コードがあり読みづらくなるという観点から
任意で畳んだりできるようにしました。
なのでその方法をご紹介します。
やり方
やり方は極めて簡単で下記のコードをコピペするだけです。
<div onclick="obj=document.getElementById('oritatami_part').style; obj.display=(obj.display=='none')?'block':'none';"> <a style="cursor:pointer;">▶クリックで展開</a> </div> <div id="oritatami_part" style="display:none;clear:both;"> 「この中にあるものが折りたたまれる」 </div>
※追記 2020/04/01
上記のコードをはてなブログのHTML編集で打ち込むと
最初のdivタグ内のonclick以降のコードが消えてしまうことが発覚しました。
はてな記法かMarkdownで編集することでコード削除を回避できます。
実際に使ってみましょう。
とりあえずこんなコードをたたんでみます。
Console.WriteLine("Hello World")
さっきの
「この中にあるものが折りたたまれる」と言う部分を
上のコードに置き換えて
こんな感じ
一応解説的な
さて目的の折りたたみは
上のコードをまるっとコピペしてもらえれば
実装できます。
ただこのブログは一応
プログラミングメインの雑記ブログです。
ということでコードを上げたからには解説します。
まずは前半部分から
<div onclick="obj=document.getElementById('oritatami_part').style; obj.display=(obj.display=='none')?'block':'none';"> <a style="cursor:pointer;">▶クリックで展開</a> </div>
＜div＞ってのはブロックを表すタグです。
こいつそのものにはそれ以上の意味はありませんが、
その他色んなものを設定できるので
こういったカスタマイズではよくお世話になります。
onclickは文字通りクリックされた時に
このコードないしメソッドを呼び出すってやつです。
今回はコード直書きですね。
ではコードの中身ですが、
そこまで難しいことはしていません。
obj=document.getElementById('oritatami_part').style; obj.display=(obj.display=='none')?'block':'none';
(見やすいよう改行しています)
getElementByIdってのは引数に渡したidを持つ要素を取得する命令です。
そしてその要素のstyleプロパティを最終的に変数に格納しています。
そしてそのプロパティ内のdisplayの値がnone(非表示)であればblock(表示)
blockであればnoneにしています。
つまりクリックされた時に
該当要素の表示非表示を切り替えているわけですね。
うん、実にシンプル。
前半の残り部分ですが
<a style="cursor:pointer;">▶クリックで展開</a>
これは該当要素の上にカーソルが乗った時
カーソルの表示を変えているだけです。
続いて後半部分
<div id="oritatami_part" style="display:none;clear:both;"> 「この中にあるものが折りたたまれる」 </div>
divとidはもはや説明不要でしょう。
styleはさっきのjavascriptで弄られる前に初期値を設定しています。
clearってのは回り込みの解除設定です。
回り込みってのは画像とかあった時に文字をずらすやつですね。
こっちはただ要素としてあるだけなので
特別変わったことはありませんでしたね。
あとがき
今回は前回使った折りたたみのコードの紹介でした。
よく
「このコードをコピペすればこうなるよ！」
っていう記事とかは見ますけど、
こんな感じで何やってるかの説明までついてるのは
中々珍しいんじゃないでしょうか？
このブログを改造してその都度こんな感じの
解説付きで紹介するのも面白いかもしれませんね。
今回の記事が良ければスターやコメント等よろしくお願いします。
それでは今回はこの辺でノシ
