XHTML+CSSで新聞や雑誌の記事のように見せる方法～日刊にしこり－埼玉版

XHTML+CSSで新聞や雑誌の記事のように見せる方法

投稿者:てつを投稿日時:2007/11/15 12:17:18

参考サイト：Mandarin Design.
XHTML(HTML)とCSSを使って新聞、雑誌の記事のような見せ方ができます。
これは考えつかなかったな。

MandarinDesignさんのソースをそのまま表示した例：

Full instructions for making the first letter big are in the Drop Cap copy and paste style tutorial. For this drop cap we forced the first big letter to span more than five lines. The font-size is adjusted to exactly 100 pixels while the line height is 80 pixels.

…this will look like some of the pullquotes and styles we see in magazinelayout…

The copy and paste code makes Magazine style pullquotes easy. Just start typing your text here. We used the named colors silver and gray.
It’s easy to plug in your own colors. Just change silver and gray to your custom colors.

改造例：

HTMLはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ウェブ上のドキュメントを記述するためのマークアップ言語である。

<html xmlns=”http://…> style=”color:#000;” <style type=”text/css”> <ul><li>

HTMLをXMLの文法で定義しなおしたマークアップ言語がXHTML（Extensible HyperText Markup Language）である。HTMLとの違いとしては、閉じタグの明記とタグ名や属性名を小文字で書かなければならないというところでしょうか。最近、主流になっていますよね。

と、まあ普通の記事にアクセントを付けたいときにも使えます。

ソース：



<div><p style="text-align:justify;"><span style="float:left;color:#008b00;font-size:100px;line-height:80px;padding-top:1px;padding-right:5px;font-family: times;">H</span>TMLはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ウェブ上のドキュメントを記述するためのマークアップ言語である。</p></div>

<div style="float:right; height:6em; width:150px; margin:10px 0 10px 10px; font-family:Arial; font-size:18px; line-height:18px; color:#333; text-align:left;">

<span style="color: #aaaaaa;">&lt;html xmlns="http://…&gt; </span> style="color:#000;" <b>&lt;style type="text/css"&gt;</b> <span style="color: #666666;">&lt;ul&gt;&lt;li&gt;</span>

</div><p style="text-align: justify;">

HTMLをXMLの文法で定義しなおしたマークアップ言語がXHTML（Extensible HyperText Markup Language）である。HTMLとの違いとしては、閉じタグの明記とタグ名や属性名を小文字で書かなければならないというところでしょうか。最近、主流になっていますよね。

</p> 

<div style="clear:both;"></div>

人気度: 7%