Image

随時更新

2015年 5月23日

キャッツアイ !
　　キャッツアイはどれ!

Code

     
        <h1> <p style="font-size: 30px;">2015年     5月23日 </p></h1>
          <div style="margin: auto; width: 900px; position:relative;">
             <p class="padding-23">キャッツアイ<br>
             <span class="cap-i">キャッツアイという花は、どれでしょうか。<p>
              　<img src="カムスの画像.jpg"width="250"hight="63"> 　
              　<img src="キッツアイの画像.jpg"width="250"hight="63">
            <p class="padding-23">
      　       <img src="楓の画像.jpg"width="250"hight="63"> </p> 
       </div>

コードは以上画像タグは同じタグ内では横並び表示される、ことに注意しよう。

point

例えば、インライン要素の<a>要素や<img >要素などに display: block; を指定すると、
ブロックレベル表示となって前後が改行されて表示されるようになります、以下書き方。
-- CSS --

 img.displayed {
                        display: block;
                            margin-left: auto;
                            margin-right: auto
                        }

-- HTML --

<img class="displayed" src="..." alt="...">

　こちらのページ｜で試してみました！

<pre>とは

「PRE」とは「preformatted text（整形済みテキスト）」の略で、その名の通り＜pre＞〜＜/pre＞で囲んだ整形済みテキストを表示するためのタグです。整形済みテキストとはあらかじめマークアップを行う前に整形してあるテキストのことで、ソース中のスペースや改行などをそのまま等幅フォントで表示します。また、自動的な折り返しがされなくなるので、ソースコードなどをそのまま表示する時に便利です。ただし、「<」、「>」、「&」などは特殊文字として認識されてしまいますので、それぞれ「<」、「>」、「&」のように実体参照で置き換えて書く必要があります。

[前へ] [次へ]