検索結果: Atelier

隠居のMT備忘録：ソースコードを縦スクロールつきコード・ボックスで表示する

　エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>?</code></pre>という形で記述している。
　私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの　<pre>　は次のように設定されている。backgroundの色は、いじっていているが。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #ffffe0;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}

　このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
　これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、

pre {
  ,,,,
  height: 150px;
  ,,,,
 }

といれればよいことが分かった。　
　が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで

<pre style="height: 150px">

とスタイルを指定すればいいことが分かった。この方法を使えば、ボックスの縦の大きさを表示するコードの行数に合わせて変えることができる。スタイルを指定しなければ、縦スクロールがなく、全てのソースコードが表示される。余りにも基本的なことなので、ブログに載せるのは恥ずかしいが、自分自身の備忘録として残しておきたい。

　なお、、<pre><code>　?　</code></pre>　の　?　部分（ソースコード）にある　<　>　は、特殊文字と判定されるので、< > とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が、  に、" が "に、& が &にエンコードされるが、エンコードされたものをそのまま　Copy&Paste して使っても問題はない。
　また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。

break コマンドは、loop の途中である条件になれば、その loop を中止する。
例を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

結果は次の通りになる。
The number is 0
The number is 1
The number is 2

continue コマンドは、loop の途中である条件になる場合のみloop を実行しないが、loop は続ける。
例を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

結果は次の通りになる。
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

　構文は理解できたが、どのような時に使われているのか分からない。

　なお、このようなエントリーを編集するときに、< や > を使う場合には、< >　とエンコードしなければならないが、今回から HTML エンコードホームというサービスを使わせてもらうことにした。
　W3Schools などの example コードをこのページのエンコード前ボックスにコピペ（copy & paste）すれば、エンコードされた結果がエンコード後ボックスに表示されるので、これをエントリー編集画面にコピペすればよい。
　今までは、< などを一つずつ< などと書き直していたのでずいぶん楽になった。
　今頃気がつくのは、老齢化現象の一つと思うが。

Atelier

Atelierで“HTMLエンコード”タグの付いているブログ記事

隠居のMT備忘録：ソースコードを縦スクロールつきコード・ボックスで表示する

タグ:

隠居のお勉強：JavaScript Basic (9) Break and Continue

タグ: