備忘録【見出しの装飾やレイアウト】など

見出しの装飾見本

見出し２

見出し3

見出し4

見出し5

見出し6

画像を左に寄せて文字の回り込み

寄せ画像CSS_800x400px 秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　秋田県横手市平鹿町浅舞字浅舞　

HTML

<div>
    <p>
        <p-left>
        <figure-left><img src="xxxxxxx.jpg" alt="xxxx"></figure-left>
           秋田県横手市平鹿町浅舞字浅舞>
        </p-left>
    </p>
</div>

<div>

<p>

<p-left>

<figure-left><img src="xxxxxxx.jpg" alt="xxxx"></figure-left>

秋田県横手市平鹿町浅舞字浅舞>

</p-left>

</p>

</div>

※HTMLのコードを<>タグで入力する時はdivタグで囲むことを忘れずに

CSSのコード

/*画像を避けて文字の流し込み*/
p-left {
	margin-bottom: 15px;
	line-height: 1.8em;
	font-size: 16pt;
}
.float_none {
	clear: both;
}
figure-left {
	float: left;
	margin: 0 15px 0px 0;
	width: 50%;	/* ←ここで画像サイズ指定 */
}

/*画像を避けて文字の流し込み*/

p-left {

margin-bottom: 15px;

line-height: 1.8em;

font-size: 16pt;

}

.float_none {

clear: both;

}

figure-left {

float: left;

margin: 0 15px 0px 0;

width: 50%; /* ←ここで画像サイズ指定 */

}

Follow me!

@asamai_cts

投稿者プロフィール

近江公人

asamai-cts Owner
あさまいCTSの代表オヤジです（2024年現在＝63歳）
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会　実践支援員」を経て、一時会社勤めをするが再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年１月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成　その他　何でも屋みたいなものです・・・