ホームページ制作、千太の絵空事

時に勝つ!投稿できることに感謝しています。(千太) SINCE 2005

全体表示

[ リスト ]

執筆フィールドの秘密

執筆フィールドの秘密


新規投稿ページにある 執筆フィールドに文字を入れると実際のHTMLソースどうなっているのでしょうか?
  • [td要素の内容として]
  • [wiki文法にチェックした場合]

td要素の内容として


実は、wiki文法にチェックを入れる、入れないの違いなく、
入れ子状態の、td要素の内容として、出力されます。
そして、P要素の内容に、われわれの書いた、テキストやタグ、
wiki文法にチェックした場合は、テキストや、class属性のある、ブロック要素や、タグなどが出力されます。
  • 実際に出力されているHTML(一部わかりやすいようにしています)
    <td>
    <p>
    テキスト
    </p>
    </td>
    
td要素(表のセル)の内容として<P>が出力されています。

このP要素の意味は、んーん段落と思っていいでしょう。
  • P要素はインライン要素しか含めない
このP要素はブロック要素になりますが、文法的(strict)に、中に含めるのはインライン要素となります

※見た目にはわかりません
ブロック要素
かたまりとでも思ってください(笑)。実際には高さや、幅があります。

インライン要素
んーん、テキストなど文字列などと思ってください(笑)。

  • 文法的には破綻?(読まなくていいですよ、笑)
    (P要素はインライン要素しか含めない)ここで、文法的には、すでに破綻を起こす場合がwikiではおこっていますが、全体のHTMLのソース
    はいわゆる、strict(厳格な表記)ではなく、さらに、DTD宣言もいわゆる、IE
    向けの宣言(後方互換モードによるような宣言)になっていて、標準モードでのレンダリングは期待できませんので、ここだけいってもしかたありませんねー。


wiki文法にチェックした場合

そして、
実はこの執筆フィールド、wiki文法にチェックを入れているだけでも、
一般に記事投稿した場合と大きな違いがあります。

見た目ではっきりわかるのが、「行の高さ」が指定されているのです。
つまり、行間があきます。

これは、只、文を普通に、書くだけです。
ブロック要素のDIVが出力され、class属性で、スタイルシートが適用されるからです。
  • スタイルシート
    font-size:12px;line-height:18px;
    
が設定されています。

簡単にいうと12pxの文字サイズに18pxの行の高さになり見た目、行間があいて見えます。

行頭から他のwikiでの表記をしてる場合でも、
入れ子の一番外のブロック要素として、出力されています。
  • 実際に出力されているHTML(一部わかりやすいようにしています)
    <p>
    <div class='wiki'>
    テキスト
    </div>
    </p>
    
td要素(表のセル)の内容として<P>が出力され、その中にブロック要素の<div>が出力ています。



.
*************
*************
非公開 / 非公開
人気度
Yahoo!ブログヘルプ - ブログ人気度について
検索 検索

過去の記事一覧

ブログバナー

友だち(1)
  • ペーパーキャプテン・りヴぁ
友だち一覧

Yahoo!からのお知らせ

よしもとブログランキング

もっと見る

プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事