記事内での囲み枠の設定です。

今回は、シンプルな囲み枠の設定になります。

texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

シンプル枠線は、こんな感じになりますね。

実際に記事内にこの囲み枠を設定する場合には、以下のタグをコピーして記事内に貼り付けて使ってみてください。

この下<div>から</div>までをコピーしてください。

<div style="border:1px solid #999999; margin: 10px; padding: 10px;">
ここに文字を入力してくださいここに文字を入力してください<br>
ここに文字を入力してくださいここに文字を入力してください<br>
ここに文字を入力してくださいここに文字を入力してください<br>
</div>

線の太さを変更したい時は、

  • 1px の数値をお好きな数値に変更してください。

線の種類を変更したい場合は、

solid の部分を

  • solid:1本線
  • double:2本線
  • groove:立体的に窪んだ線
  • ridge:立体的に隆起した線
  • inset:上と左のボーダーが暗く表示され、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだようになります。
  • outset:上と左のボーダーが明るく表示され、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したようになります。
  • dashed:破線で表示されます。
  • dotted:点線で表示されます。

に変更してみてください。

線の色を変更したい場合は

#999999 の部分をこちらのサイト、web色見本原色大辞典 で色を確認してコードを変更してみてください。