自分用のメモです。




・<ul> <li>のヘッダーの点を消す
・長い文章の２行目以降を字下げする
・【ドロップキャップ】文章の１文字目を大きくする
・画像に対して文字列を回り込ませる
・div横並びで、中身を縦センタリングする。２行以上にも対応
・<hr>タグで高さ1pxの線を描く
・レスポンシブで指定の位置で改行する
・単語や文の途中で改行させないようにする
・横並びのdivを、ウィンドウ幅が狭くなったとき右側を上段に配置する


list-style: none; を記述することでヘッダーの点を消すことができますが、これだけでは周囲にすきまができてしまうので、margin: 0; padding:0; ですきまを詰めます。

<style>
.listheader {
	list-style: none;
	margin: 0;
	padding: 0;
}
</style>
<ul class="listheader">
	<li>１行目</li>
	<li>２行目</li>
	<li>３行目</li>
</ul>

css ２文字目から1字下げるには text-indent を使います。
spanでは字下げされません。div で囲う必要があります。

<style>
.jisage {
	padding-left: 1em;
	text-indent: -1em;
}
</style>
<div class="jisage">
	※二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、
	ぴかぴかする鉄砲をかついで、白熊のような犬を二疋ひきつれて、
	だいぶ山奥の、木の葉のかさかさしたとこを、
	こんなことを云いながら、あるいておりました。
</div>
<div class="jisage">
	※「ぜんたい、ここらの山は怪しからんね。鳥も獣も一疋も居やがらん。
	なんでも構わないから、早くタンタアーンと、やって見たいもんだなあ。」
</div>

li 要素を使えば、２行目以降は自動的にインデント（字下げ）されますが、リスト全体の周囲に隙間ができてしまいます。
その隙間を詰めるために、ul 要素に margin:0 padding:0 のスタイルを適用すると、こんどはヘッダーの「・」が左側に寄りすぎてしまいます。
扱いづらい ul li 要素を使うことを避けて、上記のような字下げのテクニックを使うことがあります。


ul 要素に margin:0　padding:0 を適用した例。
行頭の「・」が左に寄ってしまいます。






１文字目だけ大きくすることを、Adobe In Design などではドロップキャップと呼んでいます。
文字列の１文字目だけ大きくするには、疑似要素　first-letter　を使います。

<style>
	.dropcap p::first-letter{ font-size: 36px; }
</style>

<div class="dropcap">
	<p>二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、
	ぴかぴかする鉄砲をかついで、白熊のような犬を二疋ひきつれて、
	だいぶ山奥の、木の葉のかさかさしたとこを、 こんなことを云いながら、
	あるいておりました。</p>
</div>

１文字目を大きくして、さらに文章を回り込ませる
１文字目の周囲に隙間を作るため margin を使って見栄えを整えています。

<style>
	.dropcap2 p::first-letter{
		font-size: 36px;
		float:left;
		margin:0px 15px 0px 0px;
	}
</style>
<div class="dropcap2">
	<p>二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、
	ぴかぴかする鉄砲をかついで、白熊のような犬を二疋ひきつれて、
	だいぶ山奥の、木の葉のかさかさしたとこを、こんなことを云いながら、
	あるいておりました。<br>
	「ぜんたい、ここらの山は怪しからんね。鳥も獣も一疋も居やがらん。
	なんでも構わないから、早くタンタアーンと、やって見たいもんだなあ。」</p>
</div>

画像に対してテキストを回り込ませるには、画像に対して float:left を指定します。

<style>
	.wrap { float:left; overflow:hidden; }
</style>

<img class="wrap" src="./img/bookimg.jpg">
二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲をかついで、
白熊のような犬を二疋ひきつれて、だいぶ山奥の、木の葉のかさかさしたとこを、
こんなことを云いながら、あるいておりました。<br>
「ぜんたい、ここらの山は怪しからんね。鳥も獣も一疋も居やがらん。
（以下略）

画像や複数行のテキストを縦方向に中央寄せする。

<style>
	.centerbox {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content:
		center; padding:0px;
		margin:0px;
	}
	.centerbox div {
		float: left;
		width: 33%;
		text-align: center;
		border:1px solid #000000;
	}
</style>

<div class='centerbox'>
	<div>中央１</div>
	<div>中央１<br>中央２</div>
	<div>中央１</div>
</div>

ul li 横並びの例も載せておきます。

<style>
.centerbox {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 0px;
	margin: 0px;
}
.centerbox li {
	float: left;
	width: 33%;
	text-align: center;
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: 1px solid #000000;
}
</style>

<ul class='centerbox'>
	<li>中央１</li>
	<li>中央１<br>中央２</li>
	<li>中央１</li>
</ul>

<style>
	.thinborder { border:solid #f00; border-width:1px 0 0 0; }
</style>
<hr class="thinborder">

ブラウザの幅をせばめると句点の位置で改行されます。
このページをスマホなどで閲覧している場合はすでに改行されています。

<style>
	.phone { display: none; }
	@media screen and ( max-width: 767px ){
		.phone { display: block; }
	}
</style>
二人の若い紳士が、<br class="phone">すっかりイギリスの兵隊のかたちをして、<br class="phone">
ぴかぴかする鉄砲をかついで、<br class="phone">白熊のような犬を二疋ひきつれて、<br>

white-space: nowrap を指定すると、枠の幅を無視して改行せず文章を表示します。


実行結果を別ウィンドウで確認

<style>
.enter_ctrl { white-space: nowrap }
@media screen and ( max-width: 767px; ){
	.enter_ctrl { display: block; }
}
</style>

二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、<span class="enter_ctrl">
ぴかぴかする鉄砲をかついで、白熊のような犬を二疋ひきつれて、<span class="enter_ctrl">
だいぶ山奥の、木の葉のかさかさしたとこを、<span class="enter_ctrl">
こんなことを云いながら、あるいておりました。<br>

実行結果を別ウィンドウで確認

<style>
.img_txt {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin: 0px;
	padding: 0px;
}
.textbox {
	float: left;
	width: 50%;
	text-align: center;
	border:1px solid #000000;
}
@media screen and ( max-width: 767px ){
	.img_txt {
		display: flex;
		flex-flow: column-reverse nowrap;
	}
	.textbox { width: 100%;
		text-align: center;
		margin: 0px;
		padding: 0px;
	 }
}
</style>
<div class="img_txt">
	<div class="textbox">左側のエリア</div>
	<div class="textbox">右側のエリア</div>
</div>