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

2010年1月30日

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

タグ:

Permalink | Category : HP作成, JavaScript | Comments [0] | Trackbacks [3]

2008年4月 7日

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

　JavaScript の勉強が、１週間ほど空いているので再開することにした。

　W3Schools の次のレッスンは、Loop で使う break と continue である。

  • 二つの特殊なコマンド break, continue をloop の中で使うことができる。
    • 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

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

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

タグ:

Permalink | Category : HP作成, JavaScript | Comments [0] | Trackbacks [0]

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

2008年4月 7日

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

　JavaScript の勉強が、１週間ほど空いているので再開することにした。

　W3Schools の次のレッスンは、Loop で使う break と continue である。

  • 二つの特殊なコマンド break, continue をloop の中で使うことができる。
    • 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

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

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

タグ:

Permalink | Category : 005JavaScript, 008HP作成 | Comments [0] | Trackbacks [0]

2007年7月 9日

lightbox のキャプションにリンクを張る

　litebox1.0 jpeg　IE と揃うと写真の表示で白い点々（white noise) が出ることがあることは、以前のエントリーで記載した。それで、litebox1.0 を lightbox2.0 に変更したら、 white noise が出なくなった。この lightbox2.0 の support 欄Q&Aに次のような記載があったので、導入してみた。最近のエントリー＜隠居の庭：夏の花（２）＞のローズアーチの写真で使っている。
Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents.
For example:
<a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a>

　html entity equivalents とは、日本語で言うHTMLエンコードのことのようだが、引用の中で使った &lt; は、エントリーのフォーム(HTML)では &amp;lt; と書かないと表現されない。
　なお、HTMLエンコードするには、 lightbox2.0 のソースコードの中に、エンコードおよびデコードしてくれるページが記載されていた。日本語でも同様のページがある。ありがたいことです。

タグ:

Permalink | Category : 001lightbox, 008HP作成 | Comments [0] | Trackbacks [0]