コピペ用ソースコード集
ページの文章のちょっとした装飾に、コピペ(コピー・ペースト)するだけで簡単に使えるHTMLソースコードをご用意しました。
ソースコードの種類は定期的に追加していきますので、ページ制作に活用してワンランク上のホームページを実現しましょう！
コピペ用ソースコードの使い方
各ページに記載されている「ソースコード」をHTMLソースにコピー・ペーストして使用してください。
concrete5で使用する場合は編集画面の「ブロックを追加」→「HTMLコード」にコピペ、
または、編集記事のツールから「HTMLソース編集」を選択し、任意の場所にコピペしてください。
囲み枠線
囲み線
ソースコード
<p style=”border: 1px solid #cccccc; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
点線
ソースコード
<p style=”border: 1px dashed #cccccc; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
二重線
ソースコード
<p style=”border: 3px double #cccccc; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
太線
ソースコード
<p style=”border: 3px solid #cccccc; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
カラー背景枠
枠なし
ソースコード
<p style=”background-color: #ffdddd; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
枠付き
ソースコード
<p style=”background-color: #ffdddd; border: 1px solid #ff0000; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
文字色反転
ソースコード
<p style=”background-color: #ff0000; color: #ffffff; padding: 10px;”>ここに本文が入ります。</p>
実際の表示
ここに本文が入ります。
区切り線
点線
ソースコード
<hr style=”border-style: dotted; border-width: 1px 0 0 0;” />
破線
ソースコード
<hr style=”border-style: dashed; border-width: 1px 0 0 0;” />
太線
ソースコード
<hr style=”border-width: 3px 0 0 0;” />
赤線
ソースコード
<hr style=”border-color: #ff0000; border-width: 2px 0 0 0;” />
第2弾を公開しました
コピペ用ソースコード集 第2弾「シチュエーション編」を公開しました。こちらもぜひご活用ください。
