Bloggerの投稿のHTMLモードの使い方

Bloggerのウェブの記事／追加ページの投稿（編集）のHTMLモードはページのHTMLを扱える機能だ。HTMLとはHyperText Markup Language（ハイパーテキストマークアップランゲージ：超越文書記述言語）の頭文字四つで、ブログなどのウェブサイトをブラウザに表示するために使われるものなんだ。ブログの記事の投稿でも使ってページをどのように構成するかを個別にカスタマイズできるようにするのがHTMLモードの最大の特徴になる。追記：2020年9月から投稿画面が変わり、投稿モードはメニューの左端の項目で「HTMLビュー」と「作成ビュー」と呼ばれて区別されるようになった。 Bloggerの投稿のHTMLモードの入力画面と六つのメニューのボタン

投稿のHTMLモードの入力画面｜Blogger

通常の作成モードはプレーンテキストで入力可能で、何でも書き込んだまま、ブログに表示される。さらに入力画面にコンテンツやデザインのスイッチも色々と付いていて便利だけど、ただしどのように表示されるかを根本的に変更することはできない。Bloggerのサーバーかテンプレートで先んじて規定される仕方でしか投稿を作成することができないのが通常の作成モードの一つの限界だ。HTMLモードを使うと入力画面のスイッチに予め用意されてないものも含めて全てのHTMLタグを使えるし――反対に何も使わずにプレーンテキストと同じように記載しても大丈夫だ。ブログ自体のHTMLによってブラウザに投稿そのものは表示される――さらにCSSでデザインを付けたり、JavaScriptで動作を付けたりするのも容易になるので、記事／追加ページを構成する投稿へのブロガーの表現の幅は格段に広がる。

BloggerのHTMLモードの三つの利点
BloggerのHTMLモードの六つのメニュー
Ｂ（太字）
Ｉ（イタリック）
~~ABC~~（取り消し線）
リンク
🖼️（画像）
“（区分け引用）
HTMLのその他の良く使われるタグ
見出し
Ｕ（下線）
リスト
改行
罫線
マーク
定義
プリ

BloggerのHTMLモードの三つの利点一般的にいってサイト作成の入力モードのHTMLはプレーンテキストと比べて幾らか不便だけれども何でもできるのが良いところだけど、しかしながらBloggerではもう少し状況が変わっていてプレーンテキストの作成モードに加わえられた変更を反対に打ち消せる分だけHTMLモードにはサイト作成の利点も増えている。

HTMLのサイト作成のコーディングが可能（普通）

入力された文字の装飾を個別に付けない（Blogger）

コンテンツに段落のpタグを付けられる（Blogger）

HTMLモードでHTMLやCSSやJavaScriptなどのコーディングのタグ付けが可能になるのは普通にサイト作成のプレーンテキストの入力モードにはない機能として重宝される。Bloggerではさらにプレーンテキストの作成モードが独特に動作するためにそれを止めて使わずに済ませられる後二つの利点がある。一つは他のアプリで書いたか、または閲覧するサイトの文章を作成モードの入力画面にデバイスでコピー＆ペーストすると元々のアプリか、またはサイトの文章のデザインが残ってしまう場合がある。なのでブログの記事／追加ページの投稿毎の文字サイズやフォントを統一できなくなる恐れがあるんだ。取り込まれた文章にspanタグのstyle属性（インラインCSS）で文字装飾のデザインが付くかも知れず、HTMLモードに切り替えるとコーディングが確認される。サンプルのソースコード<span style="background-color: white; font-family: sans-serif; font-size: 16px;">コピー＆ペーストの文章</span>三つのデザインのbackground-colorとfont-familyとfont-size／背景色と字体（フォント）と文字サイズが他のアプリやサイトから引き継がれ得る。HTMLモードへのコピー＆ペーストでは他のアプリやサイトの文章のデザインが投稿に取り込まれることは、一切、ないので、投稿毎に文字装飾を統一するには安心していつも使える。Bloggerの投稿のどちらのモードでも半角スペースがコピー＆ペーストで数値実体参照の「 」と記載される場合があるのは変わらないんだ。半角スペースだから見えないし、HTMLモードでも入力画面に数値実体参照のマークアップは現れなくて投稿のソースコードを確認しないと分からない。デザインに支障はないから大抵は構わないけれどもソースコードに紛れ込むと不具合の原因になり兼ねないので、色んなソースコードを扱うHTMLモードでは特にコピー＆ペーストの半角スペースを用心するには越さない。もう一つはブログの投稿の表示に殆ど影響しないからおよそ無視して構わないけど、とにかく作成モードにはHTMLの段落のpタグが使えないというサイト作成における文章構成の基本からすれば不都合に他ならない弱点がある。現時点、投稿のオプションの「プレビュー（HTML を解釈）」を使っても他のタグのように正常に動作しないし、ソースコードを確認すると一つも記載されないんだ。追記：2020年9月からBloggerの管理画面が刷新されて段階のpタグが二つのモードで使えるようになり、途中でHTMLから作成に切り替えても消えなくなった。見出し以外の通常の文章などのコンテンツには概して段落のpタグを<p>コンテンツ</p>のように記載するのがセマンティック（機械向け）に適正とされるので、不味いと感じる。Webサービスのシステムの問題らしくて世界中で昔から指摘されているのにBloggerには無理なのか、一向に修正されないんだ。このことはGoogleなどの検索エンジンのブログの読み取り（クローラーという機械がやって来てコンテンツを把握する）にも全く影響しないとはかぎらないので、投稿に段落のpタグがないともしかしたらSEO（検索エンジン最適化）対策に反していて検索結果からのアクセスアップを多少とも阻害する要因になると不安視されもする。HTMLモードだと段落のpタグを受け付けるからHTMLのマークアップを文章構成を踏まえてセマンティックに適正に行いたいか、またはSEO対策のアクセスアップを細かく細かく突き詰めたい場合には作成モードを使ってはならない。注意点として投稿／編集の途中で作成モードに切り替えるだけでも打ち込んだ<p>と</p>が、全部、消えてしまうので、入力画面では最初から最後までHTMLモードだけを使ってやって行くと良いと思う。段落のpタグを一つずつ手作業で打ち込むのは大変なので、HTML編集のアプリを使うのが簡単だ。コーディングの変換機能が付いていれば一発で仕上がったり、例えばパソコンのWindowsのOpen Live Writerは段落のpタグの自動変更が可能で使い易いらしい。

Open Live Writerを使えば、文字を打つだけで必要に応じて自動的にｐタグを挿入してくれるので、ＳＥＯ的に優しい記事が書きやすくなります。

Blogger勢に告ぐ！Open Live Writerが泣けるほど便利なので紹介していく｜トーマスイッチ

僕がAndroidのスマホ／タブレットで愛用するWebMaster's HTML Editor Liteではコーディングの置き換え機能が楽に使える。前と後のコードを設定したら――改行の終わりと始まりに段落のpの終了タグと開始タグを重ねるようにする――必要な分のボタン／Replaceを押すだけだから相当に早い。

参考サイト

BloggerのHTMLモードの六つのメニュー入力画面の左上の六つのメニューの使い方について。投稿の設定のオプションの構成モードの「HTML コードを表示」と「プレビュー（HTML を解釈）」はどちらでも結果は同じになる。Ｂ（太字）<b></b>太字の表示太字のbタグが出て来るので、開始タグと終了タグの間に太字に表示したい文字を入れて使う。HTMLで重要性を意味するのはstrongタグで、これも使うとデフォルトで太字のデザインになる。bタグは重要性などのマークアップの特別な意味付けはなく、太字のデザインでコンテンツを目立たせるためにある。デザインを変えるだけの場合はCSSの「font-weight:bold」を使うとコンテンツが太字になる。

参考サイト

Ｉ（イタリック）<i></i>イタリックの表示イタリック／斜体の一種のiタグが出て来るので、開始タグと終了タグの間にイタリックに表示したい文字を入れて使う。HTMLで強調を意味するのはemタグで、これも使うとデフォルトでイタリックのデザインになる。iタグは強調などのマークアップの特別な意味付けはなく、イタリックの表示でコンテンツを目立たせるためにある。デザインを変えるだけの場合はCSSの「font-style:italic」を使うとコンテンツがイタリックになる。

参考サイト

~~ABC~~（取り消し線）<strike></strike>~~取り消し線の表示~~取り消し線のstrikeタグが出て来るけれどもHTMLとしてもう既に古びてしまっている。

視覚上の整形のみを目的とした <strike> 要素は、HTML 4 および XHTML 1 で非推奨となり、HTML5 では完全に廃止されています。「削除されたテキスト」というセマンティクスを示すには <del> 要素が適しています。それ以外の場合は <s> 要素を使用します。

<strike>｜MDN｜Mozilla

Bloggerの公式テーマだと少なくともHTML5の設定で、それ以前のバージョンと互換性があるからstrikeタグを使ってもエラーにはならないし、取り消し線が表示されるけれども正式なのはdel（削除）タグかs（取り消し線）タグのどちらかになっている。sタグはdelタグのように削除などのマークアップの意味付けがなくて中線のデザインのために使われる。CSSだとtext-decorationのline-throughを使って同じように表示できる。

参考サイト

リンク<a href="URL"></a>リンクの表示※ブログ名へのジャンプリンク。ボタンを押すとポップアップで「URL を入力:」が表示される。リンク先のURLを入力して「OK」でリンクのaタグにhref属性で記載される。開始タグと終了タグの間にリンク名（アンカーテキスト）を記載するとリンクが使えるようになる。URLを入力するだけで、リンク名を記載しないと記事／追加ページには何も表示されなくてリンクは使えないから忘れないように注意を要する。

参考サイト

<a>: アンカー要素

🖼️（画像）<div class="separator" style="clear: both; text-align: 位置取り;"><a href="画像URL（元のサイズ）" imageanchor="1"><img border="0" src="画像URL（選択されたサイズ）" width="選択されたサイズの横幅" height="選択されたサイズの縦幅" data-original-width="元のサイズの横幅" data-original-height="元のサイズの縦幅" /></a></div>Bloggerの画像投稿は画像のimgタグだけではなくて元のサイズの画像へのリンクのaタグが必ず付いていてさらに「画像の位置合わせ」がなし以外（左／中央揃え／右）の場合に領域のdivタグも付けられる。2020年9月以降の画像のソースコード<div class="separator" style="clear: both;"><a href="画像URL（元のサイズ）" style="display: block; padding: 1em 0; text-align: 位置取り; "><img alt="" border="0" height="600" data-original-height="元のサイズの縦幅" data-original-width="元のサイズの横幅" src="画像URL（選択されたサイズ）"/></a></div>画像に使われる三つのタグ、divとaとimgは変わらないけれども内容が少し変わり、位置取りの「配置」はdivではなくてaのデザインに記載される。画像投稿のdivタグについて位置取りを選択するとデザイン付きの親ボックスとしてdivタグが追加される。style属性のtext-align（文書の整列）で位置取りが可能になって左寄せは「left」、中寄せは「center」、右寄せは「right」だ。追記：2020年9月からdivタグのstyle属性はaタグに移動されてリンクを対象としてデザインが付けられるように変わった。class属性のseparatorは主に2017年の公式テーマのContempoとSohoとEmporioとNotableで子要素のリンクのaタグとセットで画像の位置取りの補足（リンクのaタグの外側の余白を選択済みの寄せの反対側だけ空けて他の三方向は消す）のCSSの指定先に使われている。style属性のclear（解除）のbothは前のコンテンツにfloat（浮遊）が左端／leftか右端／rightへ部分的に使われていた場合に画像が空いた方へ回り込んでしまうのを左右のどちらでも解除するためにある。

参考サイト

<div>: コンテンツ分割要素

画像投稿のaタグについて画像をクリック／タップした際に元のサイズの画像が見られるようにリンクが付けられる。アイコンやロゴなどでリンク先を画像以外に求める場合はhref属性の画像URLをサイトURLに置き換える。imageanchor属性の1は主に2017年の公式テーマのContempoとSohoとEmporioとNotableで画像の余白を調節するために使われている。位置取りのdivタグのseparatorのclassとセットになって位置取りの補足を行ったり、それ自体ではstyle属性で、float（浮遊）がかけられた場合の位置取りの補足を行ったり、複数の画像を連続で載せた場合に二枚目以降の上の外側の余白を指定したりしている。追記：2020年9月からstyle属性で「配置」の左と中央と右が「text-align」（文書の整列）の「left」と「center」と「right」で指定されるようになった。何も選ばない場合は中央の「center」の値が入る。その他、「display:block」でリンクを一行分（前後の文章などと並ばない）で扱う、「padding: 1em 0」でリンクの内側の余白を上下に一文字分と左右になしのデザインが指定されている。

参考サイト

<a>: アンカー要素

画像投稿のimgタグについてHTMLでimgタグは閉じタグが不要な空要素だけど、XHTML（XMLのHTMLへ互換性を持たせたもの）など、もしも開始タグに収めるならば<img />という仕方で、最後に半角スラッシュを置く。Bloggerの画像投稿ではXHTMLのマークアップが自動的に取られるけれどもテンプレートの設定そのものはHTMLだから最後の半角スラッシュは消しても構わない。テーマのHTML編集はXMLファイルで扱われて実際にHTMLを使いたい場合にはXHTMLへ書き換えないとエラーで保存できなくなる。しかし投稿のHTMLモードは正しくHTMLとしてXHTMLとどちらでも使える。src属性の値は選択された画像サイズの個別の画像URLが使われる。border属性の「0」は画像に枠線を付けないことを指定する。width属性とheight属性は画像の横と縦の長さを示す。data-original-width属性とdata-original-height属性はBloggerの独自の記載だけれども画像の元のサイズの横と縦の長さを示す。そららは画像に直接は影響しないけれどもCSSやJavaScriptでデザインを操作するときに使うこともできる。Bloggerの画像URLのパターンhttps://番号.bp.blogspot.com/画像コード/画像サイズ/ファイル名.拡張子

番号

1から4までの何れかで、画像が格納されるBloggerのサーバー（blogspot.com）内のサブドメインのサイトアドレスを示す。

画像コード

画像毎に一意で、七十七文字の半角の英数字とスラッシュ（/）と半角ハイフン（-）の記号の組み合わせを取る。

画像サイズ

選択された画像サイズの横幅（px単位）の先頭に「s」を付けて五種類で記載される。

小：s200
中：s320
大：s400
特大：s640
元のサイズ：s1600

※元のサイズだけは画像の最大幅を示していて横幅1600pxまでしか取得できない。実際に取得される元のサイズがもっと小さい画像でも元のサイズの画像URLは全て「s1600」として扱われる。

ファイル名

BloggerかGoogleフォトなどの投稿可能なGoogleアカウント（アルバムアーカイブ）に関連したサーバーにアップロードした時点の画像のファイル名を示す。

拡張子

画像のファイル形式で、現在はjpeg（jpg）かpngかgifが使える。

border属性の0は画像の枠線を消す。殆どのブラウザでは画像の枠線は付かないのが初期値だから消しても変わらないかも知れない。HTML5ではboder属性は非推奨なので、現行のBloggerブログで画像の枠線を消すにはCSSの「border:none」を使うべきだ。取得する画像サイズで元のサイズ以外の小か中か大か特大を選んだ場合は実際に表示するサイズの横幅のwidth属性と縦幅のheight属性が追加される。data-original-width属性とdata-original-height属性は元のサイズの画像のそれぞれに横幅と縦幅を示していてテンプレートのJavaScriptで画像の加工や差し替えなどに使われる場合がある。

参考サイト

<img>: 埋め込み画像要素

説明とプロパティを追加する作成モードでは位置取りと画像サイズに加えてさらに説明とプロパティのカスタマイズが可能なので、HTMLモードでも同じように記載する方法を取り上げる。画像に説明を追加する方法画像の直後に文章を載せれば説明の表示は同じだけれども作成モードでtable（表）タグが使われているので、専用のHTMLのマークアップを考えてみる。tableタグを画像の説明に使うのはHTMLとして古いから止める。表を作りたいわけではないし、一般的にいって画像と説明文の組み合わせにtableタグが使われるのは他の仕方でデザインが付けられないためだ。公式テーマで対応済みのHTML5からすると図表のためのfigureタグが新しく用意されていて説明にもfigcaptionタグが用意されている。画像を含めて図表のコンテンツに適したマークアップが可能だから使いたい。<div> <figure> <a> <img> </a> <figcaption> 説明文 </figcaption> </figure> </div>画像投稿に必要なタグ付けの順番を示す。先ずは図表のfigureタグで画像を入れたリンクを囲む。その中で図表の説明のfigcaptionタグを画像を入れたリンクの後に記載すると画像に続いて説明文が表示される。位置取りを指定した場合には親ボックスのdivが付くので、その中にfigureタグを記載しておけば囲んでいる画像と説明文にも反映してくれる。注意点としてfigureタグはデフォルトで外側の左右に大きめの余白（初期値は40px）が付いて囲んだコンテンツが通常よりも小さく表示されるデザインなので、もっと小さなコンテンツならば何も変わらないけれどもバランスを崩さないように元に戻すにはCSSで消さなくてはなくてはならない。figure {margin-left:0;margin-right:0;}左右のmarginを0にすればfigureタグで外側に左右の余白は付かなくなる。

参考サイト

画像にプロパティを追加する方法二つの属性、titleとaltが使える。前者はパソコンなどのツールチップ（カーソルが重なると出て来る内容）で、後者は画像が表示されない場合の代替（どんな画像かの説明）だ。マークアップは何れも画像のimgタグに記載する。<img title="画像のツールチップ" alt="画像の説明文" />プロパティは使わなくても構わないし、画像の表示に支障はないけど、ただし検索エンジンの画像の読み取りに関して特にalt属性は影響を与えるからSEO対策でアクセスアップを望むならば欠かせない。

Google では、代替テキストに加えて、コンピュータビジョンアルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。

Google 画像検索に関するおすすめの方法｜Search Console ヘルプ｜Google

Google検索のクローラーがサイトの「画像のテーマ」を理解できるかどうかがサイト評価を左右するので、サイト解析に間違いなく使われるalt属性の「代替テキスト」でどんな画像かを伝えるのが大事なんだ。“（区分け引用）<blockquote></blockquote>区分け引用の表示区分け引用のblockquoteタグが出て来るので、開始タグと終了タグの間に区分け引用に表示したいコンテンツを入れて使う。他の前後のコンテンツは除外されて横並びには表示されない。一般的に区分け引用は段落なので、段落のpタグも入れて記載される。<blockquote> <p> 区分け引用のコンテンツ </p> </blockquote>ただしBloggerでは投稿の段落のpタグが非常に使い辛くてHTMLモードでのみ可能だけれどもどんなところで使う場合でも途中で作成モードに切り替えて消さないように注意しなくてはならない。HTMLの引用はblockquoteタグではなく、段落内の単語や文章などの区分けしない場合はqタグ、作品名や商品名などにはciteタグも使える。

参考サイト

HTMLのその他の良く使われるタグBloggerの作成モードで出て来るのとBlogger以外でも良く使われるHTMLのタグを取り上げる。見出し見出し<h2></h2>h2の表示小見出し<h3></h3>h3の表示準見出し<h4></h4>h4の表示HTMLの見出しタグはh1からh6の六種類が使える。デフォルトのデザインはどれも太字で、見出しの番号が先とコンテンツへの意味合いが広いほどに文字サイズが大きくなる。Bloggerでは準見出しと呼ばれるh4が通常の文字サイズと同じになるのが普通だ。見出しの使い方は文章構成でもコンテンツのアウトライン（外形）に関係している。大見出しのh1はテーマを明確化するためにページ毎に一つしか使わないのが望ましい。Bloggerの公式テーマならばブログ名で、オリジナルテーマでは公式テーマと同じか記事名にも使われる場合があるかも知れない。記事の本文に使われる見出しは記事名の見出しを追い越さない程度に止めると内容の纏まりを伝え易くなる。公式テーマは記事名の見出しがh3なので、作成モードではh2から使えるけれども本来ならば大きくてもh3以下を使う。オリジナルテーマで記事名がh1の場合はサイトに一つしか使わないのが望ましいので、h2以下を使うのが適しているだろう。

参考サイト

Ｕ（下線）<u></u>下線の表示コンテンツの意味合いが通常とは変わるようなところ（正しい表記に対して誤った表記を示す場合など）で注意を引くために使われる。デザインを付けるだけならばCSSで「text-decoration:underline」を指定すると下線を引ける。その他、追加されたコンテンツを示すinsタグやBloggerの公式テーマでは消されているけれどもリンクのaタグを使ってもデフォルトで下線が引かれるデザインになる。

参考サイト

リスト番号付きリスト<ol> <li><li> <li><li> <li><li> </ol>

番号付きのリストの表示

番号なしリスト<ul> <li><li> <li><li> <li><li> </ul>

番号なしリストの表示

どちらもリスト項目に一つ以上のliタグを使うのは同じで、リスト項目の全体を番号付きならばolタグ、番号なしならばulタグで囲む。さらに作成モードで出て来ないけれどもサイト作成で良く使われるタグを取り上げる。リスト項目のliタグは他のリストなどのタグを入れ子にして表示できる。<ol> <li><li> <li><li> <li><li> <ul> <li><li> <li><li> <li><li> </ul> </ol>

番号付きのリストの表示

番号なしリストの表示
番号なしリストの表示
番号なしリストの表示

リスト項目に他のリストを追加したりすると繋ぎ目が離れる場合もある。くっ付けるには内側のコンテンツの上の外側の余白が影響しているからCSSの「margin-top:0」を指定して消す。

参考サイト

改行<br>改行
の
表示画像のimgタグと同様にHTMLで終了タグは不要な空要素だけれどもXHTMLなどで開始タグに収める場合は最後に半角スラッシュを追加して<br/>と記載する。brタグは一つのコンテンツを二つの行に分けて表示する。連続して入力すると行間を広げれられる。HTMLの意味付けとして段落などのコンテンツの纏まりを示さないので、どんなに切り分けても全ては一つの内容上の繋がりを持つままになる。Bloggerの投稿では右端の投稿の設定のオプション（歯車）の改行で動作が変わる。

<br> タグを使用

改行タグを記載しないとコンテンツは改行できない。

Enter キーを押して改行

入力画面の改行がそのままでブログに反映される。

HTMLモードの投稿の改行は「Enter キーを押して改行」を選択済みでbrタグを記載すると必要以上に行間が広がるから注意しなくてはならない。

参考サイト

<br>: 改行要素

罫線<hr>※罫線の表示。画像のimgタグと同様にHTMLで終了タグは不要な空要素だけれどもXHTMLなどで開始タグに収める場合は最後に半角スラッシュを追加して<hr />と記載する。hrタグは文章の段落を変える程度の複数のコンテンツの区分けを意味する。デザインで水平線を引く場合はCSSのborder（枠線）を使ってコンテンツを囲んだ領域のdivタグや段落のpタグなどの枠線として「border-bottom:4px #c0c0c0 solid」のように記載する。

参考サイト

<hr>: 主題分割 (水平線) 要素

マーク<mark></mark>マークの表示コンテンツを他と区別して目立たせる場合に役立つ。

参考サイト

<mark>: 文字列マーク要素

定義<dl> <dt></dt> <dd></dd> </dl>

定義の命題の表示

定義の定義文の表示

最大で三種類のタグを組み合わせる。外側にdlタグを使う。dtタグで定義する命題、または説明する対象を記載する。次いでddタグで定義文、または説明文を記載する。dtタグとddタグのセットは何個でもdlタグの中に入れられる。dtタグは必ずしも必要ないので、dlとddタグの二種類だけでも構わない。さらにdtタグとddタグはどちらも一つずつではなくて複数を連続して使える。dtタグなし<dl> <dd></dd> </dl>連続のdtタグ<dl> <dt></dt> <dt></dt> <dd></dd> </dl>連続のddタグ<dl> <dt></dt> <dd></dd> <dd></dd> </dl>命題のdtタグと定義文のddタグはどちらも他の定義などのタグを入れ子にして表示できる。<dl> <dt></dt> <dd> <dl> <dt></dt> <dd></dd> </dl> </dd> </dl>

定義の命題の表示

定義の命題の表示: 定義の定義文の表示

定義の命題や定義文に他の定義を追加したりすると繋ぎ目が離れる場合もある。くっ付けるには内側のコンテンツの上の外側の余白が影響しているからCSSの「margin-top:0」を指定して消す。

参考サイト

プリ<pre></pre>プリの表示コンテンツのホワイトスペース（空白）や改行をそのままで表示する。いい換えると入力画面と同様の結果をブラウザでも得させる。範囲内にHTMLやCSSやJavaScriptなどのコーディングを行うのも可能だ。主にソースコードを載せる際にコードを示すcodeタグと一緒に使われる。<pre><code></code></pre>プリとコードの表示※ソースコードの記号はHTMLならば実体参照などの所定の書式へエスケープしないとブラウザに読み込まれて文字としては表示できない。preタグもcodeタグもデフォルトの字体が等幅フォント（monospace：モノスペース／どの文字の幅も等しくなる字体）で、細かい文字が密集したソースコードに使うと見易くて適している。デザインでは文章の折り返しが付かなくてカラムを突き抜ける場合があり得るので、CSSでスクロールボックスに入れたり、文章の折り返しを付けたりすると良いと思う。スクロールボックスpre {overflow:scroll;}CSSのoverflow要素はコンテンツがはみ出した場合の処理を指定する。スクロールボックスは「scroll」になる。他にも「auto」がブラウザに任せるけれどもはみ出しに対してはスクロールボックスが作られる。文章の折り返しpre {white-space:pre-wrap;}CSSのwhite-space要素は空白と改行と折り返しを指定できてpreタグのデザインに最も適している。全てをブラウザに反映させるのが「pre-wrap」になる。連続する半角スペース（）を無効にする（一つずつしか表示しない）には「pre-line」を指定する。