１カラムで色合い調整のみで使えるシンプル構造
１カラム（シングルコラム）のCSSテンプレートです。。見出しはh1～h4まで。段落文章は<p>でくくられています。
CSSの各属性の色合いを変更すれば様々な様式のwebサイトに対応できるだろうと思って画像は使っていません。
サンプルの色使いで趣味が悪いところもありますがご了承ください。
また当方の趣味で作成しておりますので細かいHTMLとかCSSのルールはあまり知りません。
Dreamwesverで作成しているのでホームページビルダーでも編集は可能ですがクセがあるのでご注意ください。
部分的に２カラムや３カラムになるようなタグCSSを使ってますが、使いにくい場合は消してください。
横データブロック１です。
マージン、余白とも5pixです。
ボックスの横幅は448pixです。
ボーラーは1pixで上下左右。
<br clear="all" />が</dt>のあとに続くことでフローとをクリアしてます。- 横データブロック２です。
大き目の画像などを配置したいなあと思って作りました。
編集ソフトで改行するときは<br />になるようにしましょう。
<br clear="all" />が</dt>のあとに続くことでフローとをクリアしてます。
こういうのをコピペでいろいろ配置すると見栄え調整できると思う
サンプルカラー
シックなブラウン茶色系に仕上げてみたり
サンプルカラー
ゴージャスな暖色系ゴールドっぽく
サンプルカラー
パッションな赤いカラーで染めてみたり
サンプルカラー
清潔感と誠実性をブルー系で表現したり
コピペで使えるテンプレート
白背景の段落です。id="siro"でくくられています。
パーツをHTML編集で好きなところに配置してデザイン調整してくださいね。
h3見出しです。
- ここはリスト表示
- リストは<p>タグの外に配置
- そうすると背景が白いところに表示
- 目立たせたい項目を箇条書き
- リストの活用はポイントです。
リストの背景は白。段落の背景は白バージョンとグレーで使い分けしてます。
見出し4はこんな感じのCSSです
- ここはリスト表示
- リストは<p>タグの外に配置
- そうすると背景が白いところに表示
- 目立たせたい項目を箇条書き
- リストの活用はポイントです。
- わかりやすき書きましょう。
リストも文章もシンプルに。
またまた見出し３です。これって何回か使っても大丈夫でしょ？
画像を使うと記事文章の右側に回りこむように設定しております。
↓
使用の際はご注意ください。
段落の位置からはみ出そうな場合は改行などで調整するといいかもしれません。
<br />出改行しないとこんな感じになりますよ（注）
こういうのもありかも。 ここがオススメポイント とか？→
テキストを改行して見栄え調整。
<br />で改行ですよ！
個人的にこのほうが楽だと思うので
全部改行で調整してます。
こんな感じで、段落のイメージとして使えます。
見出し４ 見た目調整でh3とかh4使ってるだけです。細かいことは気にしないSEO.
- 文法よく知りません。
- なんとなく色合い調整しやすい
- 画像背景は面倒だ
- まあ、無料やからええか。
そういう方（僕のことです）のためのホームページ（1枚ものに向いてるかも）テンプレートCSSセットです。
