はてな記法

Webの勉強をやっていると、ブログの中にHTMLを表示したくなりますよね。

そこで、「はてな記法」を利用してみましょう。

「pre要素」を以下のように変更しました。

つまり、この囲みの設定です。

.body .section pre {
    font-size: 110%;
    width: 440px;
    padding: 16px;
    background-color: #fcfcfc;
    border: dotted 1px #CCCCCC;
}

きょうの記述は、

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウォンツ ケーキ店 商品のご紹介</title>
<style type="text/css">
<!--
body{
  font-family: san-serif;
  font-size: 0.875em;
  line-height: 1.0;
}
img {
  border: none;
}
ul.nav li {
  margin: 0 0 5px 0;
}
.product{
  width: 600px;
  margin: 0 0 20px 0;
}
.product p {
  margin: 0 0 15px 0;
}
.product p.img {
  float: left;
}
.product p.text {
  line-height: 1.5;
}
.product p.btn {
  display: inline;
}
-->
</style>
</head>
<body>
<h2>商品のご紹介</h2>
<ul class="nav">
<li><a href="#item1">ショートケーキ</a></li>
<li><a href="#item2">バースデーケーキ</a></li>
<li><a href="#item3">洋菓子</a></li>
</ul>
<div class="product">
<h3><a name="item1">ショートケーキ</a></h3>
<p class="img"><img src="images/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真" align="left" hspace="10"></p>
<p><a href="item.html">チーズスフレ</a></p>
<p>1個 480円</p>
<p class="text">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<p class="btn"><a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" hspace="10"></a></p>
<p class="btn"><a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></p>
</div>
<div class="product">
<h3><a name="item2">バースデーケーキ</a></h3>
<p class="img"><img src="images/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真" align="left" hspace="10">
<p><a href="item.html">苺のバースデーケーキ</a></p>
<p>1個 2,480円</p>
<p class="text">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<p class="btn"><a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" hspace="10"></a>
<p class="btn"><a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a>
</div>
<div class="product">
<h3><a name="item3">洋菓子</a></h3>
<p class="img"><img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" align="left" hspace="10"></p>
<p><a href="item.html">焼菓子の詰め合わせ</a></p>
<p>1箱 1,680円</p>
<p class="text">当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<p class="btn"><a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" hspace="10"></a></p>
<p class="btn"><a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></p>
</div>
</body>
</html>

はみでてしまいました。

「はてな」での表示は難しいですね。

で、付け足しました。

.body .section pre {
    font-size: 110%;
    width: 440px;
    padding: 16px;
    background-color: #fcfcfc;
    border: dotted 1px #CCCCCC;
    overflow: auto;
}

同じ状態ですが、色が若干ついています。

「講師日和」で確認してください。

<!DOCTYPE HTML>

<head>

<title>ウォンツケーキ店商品のご紹介</title>

<!--

body{

font-family: san-serif;

font-size: 0.875em;

line-height: 1.0;

}

img {

border: none;

}

ul.nav li {

margin: 0 0 5px 0;

}

.product{

width: 600px;

margin: 0 0 20px 0;

}

.product p {

margin: 0 0 15px 0;

}

.product p.img {

float: left;

}

.product p.text {

line-height: 1.5;

}

.product p.btn {

display: inline;

}

-->

</style>

</head>

<body>

<h2>商品のご紹介</h2>

<li><a href="#item1">ショートケーキ</a></li>

<li><a href="#item2">バースデーケーキ</a></li>

</ul>

<h3><a name="item1">ショートケーキ</a></h3>

<p><a href="item.html">チーズスフレ</a></p>

<p class="text">ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>

</div>

<h3><a name="item2">バースデーケーキ</a></h3>

<p><a href="item.html">苺のバースデーケーキ</a></p>

<p class="text">大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>

</div>

<p><a href="item.html">焼菓子の詰め合わせ</a></p>

<p class="text">当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>

</div>

</body>

</html>

Permalink

求職者支援訓練（基金訓練） Webデザインの勉強｜講師記録

2011年03月10日