ビジネスクラフト BUSINESS CRAFT
0
MENU CLOSE

ビジネスクラフト BUSINESS CRAFT

ビジネスクラフト BUSINESS CRAFTビジネスクラフト BUSINESS CRAFT
  • ホーム
  • HP制作プラン
  • 制作料金 各種
  • 制作実績
    • 制作実績一覧
    • ウェブホームページ
    • アニメーション
    • 動画映像制作・編集
    • 講習コンサルティング
  • カテゴリー
    • ウェブデザイン
    • WordPress
    • マーケティング
    • ネットビジネス
    • インターネットの使い方
  • 会社概要
  • 免責事項ポリシー
  • お問い合わせ
  • 高速表示

【HTMLサンプル】文字を線枠で囲う方法

ON 2018年5月19日 BY: ビジネスクラフト 1 COMMENT
スポンサーリンク

ブログやサイトを運用していて「ここの文章を枠で囲いたいな〜」と思ったら、htmlを編集できる画面で枠をつけることができます。WordPress、アメブロ、FC2でも記事を枠で囲うことができます。

 

今回は簡単な枠をつけらえるhtmlのサンプルになります。

 

使いたい枠を見つけたら「ああああああああああああ」の部分を好きなテキストに変えて、HTMLの記述できる画面にしてからコピペしてください。

 

※ワードプレスの場合:テキストエディターに切り替えてコピペします。

 

 

目次

  • 細かい点線の枠
  • 点線の枠
  • 実線の枠
  • 二重線の枠
  • 細かい点線の枠
  • 点線の枠
  • 角丸実線の枠
  • 角丸二重実線の枠
  • 水色の可愛い点線角丸HTML枠
  • ピンク系赤色の可愛い点線角丸HTML枠
  • 黄色の可愛い点線角丸HTML枠
  • 黄緑色の可愛い点線角丸HTML枠
  • 淡いグレーのHTML枠
  • 淡い青色のHTML枠
  • 淡い赤色のHTML枠
  • 淡い黄色のHTML枠
  • 淡い緑色のHTML枠
  • 見出しつき囲い枠
  • 補足

細かい点線の枠

html-sample-boxline-1

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ああああああああああああ
</div>

 

 

 

点線の枠

html-sample-boxline-2

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
    ああああああああああああ
</div>

 

 

 

実線の枠

html-sample-boxline-3

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
    ああああああああああああ
</div>

 

 

二重線の枠

html-sample-boxline-4

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
    ああああああああああああ
</div>

 

 

 

細かい点線の枠

html-sample-boxline-5

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
    ああああああああああああ
</div>

 

 

 

点線の枠

html-sample-boxline-6

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
    ああああああああああああ
</div>

 

 

 

角丸実線の枠

html-sample-boxline-7

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
    ああああああああああああ
</div>

 

 

 

角丸二重実線の枠

html-sample-boxline-8

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
    ああああああああああああ
</div>

 

 

 

水色の可愛い点線角丸HTML枠

ああああああああああああああ
<div style="background:#eaf4fc; padding:10px; border:2px dotted #5eb7e8; border-radius:10px;"> ああああああああああああああ<br> </div>

 

 

ピンク系赤色の可愛い点線角丸HTML枠

ああああああああああああああ
<div style="background:#fce5e2; padding:10px; border:2px dotted #f29c97; border-radius:10px;"> ここに枠で囲みたい内容を入れます。<br> </div>

 

 

黄色の可愛い点線角丸HTML枠

ここに枠で囲みたい内容を入れます。
<div style="background:#fffbc7; padding:10px; border:2px dotted #f9c158; border-radius:10px;"> ああああああああああああああ<br> </div>

 

 

黄緑色の可愛い点線角丸HTML枠

あああああああああああああああああ
<div style="background:#edf2c5; padding:10px; border:2px dotted #c3d83f; border-radius:10px;"> ああああああああああああああああ<br> </div>

 

 

淡いグレーのHTML枠

ああああああああああああああ
<div style="background:#eae5e3; padding:40px; border:4px double #ffffff; border-radius:10px;">ああああああああああああああ</div>

 

 

淡い青色のHTML枠

あああああああああああああ
<div style="background:#d8e8f6; padding:40px; border:4px double #ffffff; border-radius:10px;">あああああああああああああ</div>

 

 

淡い赤色のHTML枠

あああああああああああああ
<div style="background:#fce5e2; padding:40px; border:4px double #ffffff; border-radius:10px;">あああああああああああああ</div>

 

 

淡い黄色のHTML枠

ああああああああああああ
<div style="background:#fffbc7; padding:40px; border:4px double #ffffff; border-radius:10px;">ああああああああああああ</div>

 

 

淡い緑色のHTML枠

あああああああああああああ
<div style="background:#edf2c5; padding:40px; border:4px double #ffffff; border-radius:10px;">あああああああああああああ</div>

 

 

 

見出しつき囲い枠

青い見出しつき囲い枠

<font style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #000066; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

もしくは

<span style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;">■タイトルはこちら■</span><div style="border:1px solid #000066; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

 

赤色の見出しつき囲い枠

スポンサーリンク
<font style="padding:6px 10px; background:#ff0000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff0000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

ピンクの見出しつき囲い枠

<font style="padding:6px 10px; background:#ff1493; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff1493; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

緑色の見出しつき囲い枠

<font style="padding:6px 10px; background:#008000; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #008000; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

黄色の見出しつき囲い枠

<font style="padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;">■タイトルはこちら■</font><div style="border:1px solid #ff9933; padding:10px; font-size:0.9em; margin-top:2px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

黄色の角丸見出しつき囲い枠線

<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#ff9933; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">見出しその1</span></div><div style="border:2px solid #ff9933; padding:25px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">本文記事1<br>本文記事2<br>本文記事3</div>

 

青い角丸見出しつき囲い枠線

<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold;border-radius:5px;">■タイトルはこちら■</span></div><div style="border:2px solid #000066; padding:25px 12px 10px; font-size:1em;border-radius:5px;">本文はこちら!<br>改行後の本文はこちら(ここは削除してください。)</div>

 

水色の四角見出しつき囲い枠線

<div style="background: #a0d8ef; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">あいうえおかきくけこ</span></div>
<div style="border: 1px solid #a0d8ef; padding: 10px;">ああああああああああ</div>

 

マゼンダの四角見出しつき囲い枠線

<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">あいうえおかきくけこ</span></div>
<div style="border: 1px solid #ff1493; padding: 10px;">ああああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="border: 1px dotted #a0d8ef; padding: 10px;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:2px dotted #000;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:2px dotted #0000ff;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="border: 1px solid#e6bfb2; padding: 10px;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="border: 1px solid#7f1184; padding: 10px;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:2px solid #ff8c00;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="border: 5px solid #fdd35c; padding: 10px;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#e0ffff; padding:10px; border:2px solid #afeeee;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#f8f8ff; padding:10px; border:1px solid #b0e0e6; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="padding: 10px; border-radius: 10px; border: 5px double#a1d8e2;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:3px double #afeeee;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:3px double #ffb6c1;">あああああああああああああ</div>

 

 

 

あああああああああああああ
<div style="background:#fff; padding:10px; border:3px double #dda0dd;">あああああああああああああ</div>

 

 

 

ああああああああああああああ
<div style="background:#fffaf0; padding:10px; border:3px double #ffa500;">ああああああああああああああ</div>

 

 

 

補足

  • background・・・背景のことです。
  • border・・・線の太さを調整できます。
  • padding・・・枠線と文字の間の隙間の大きさを調整できます。
  • solid・・・直線にできます。
  • dashed・・・破線にできます。
  • double・・・二重線にできます。
  • dotted・・・ドット線にできます。
  • 点線から線を実線に変更する方法・・・「dotted」部分を「solid」に書き換えます。
  • 線の太さを変更する方法・・・「border:●●●px」の●●●部分の数字を書き換えます。数字を大きくすることで線を太くできます。
  • 四角枠に変更する方法・・・「border-redius:●●●px」の部分を削除します。
スポンサーリンク
前へ
次へ

1 Response

コメントを書く Cancel Reply

  • 高速表示

    高速表示に切り替え

  • 検索

  • 最近の投稿

    • Mac版Excelで改行する方法
    • 【5分】WordPressサイトをプラグインでAMP対応する方法・導入手順
    • 誰でも書ける論文・レポートの書き方簡単10ステップ
    • AMPが表示されない時のワードプレス対処方法【AMP or WP Accelerated Mobile Pages】
    • WordPressスマホで表テーブルを横スクロールする方法【簡単HTMLコピペ】
    • LINEタイムラインに流れてきた投稿を非表示にする方法
    • LINEのタイムライン「いいね」「シェア」の使い方と設定方法
    • LINE「ホーム」「タイムライン」とは
  • カテゴリー

    • WordPress (61)
    • インターネットの使い方 (57)
    • ウェブデザイン (52)
    • コピーライティング (1)
    • ネットビジネス (6)
    • マーケティング (5)
  • 制作について

    • ホーム
    • HP制作プラン
    • 制作料金 各種
    • 制作実績
    • 会社概要
    • 免責事項ポリシー
    • お問い合わせ
    • 高速表示
  • アーカイブ

    • 2018年6月
    • 2018年5月
  • タグ

    .htaccess (2) AMP (2) Android (1) Animate (1) CSS (8) Excel (1) Facebook (2) Gmail (3) Google (8) Google Adsenseグーグルアドセンス (1) Google Drive グーグルドライブ (2) Googleカスタム検索 (7) HTML・XHTML (10) Instagram (4) iPhone (2) JavaScript(jQuery) (2) Line (3) MAC (6) Photoshop (1) PHP (2) SEO・SEM (2) Twitter (5) Windows (1) WordPressセキュリティ (5) WordPressテーマ (7) WordPressプラグイン (23) WordPress使い方 (13) WordPress子テーマ (4) YouTube (6) アプリ・ソフトウェア (15) カスタマイズ (27) サーバー (5) ドメイン (6) パソコンの使い方 (2) ブラウザ (4) ブラウザ・アドオン (3) ブログ運営収益化 (8) ホームページ制作 (82) 仕事効率化 (9) 便利なサービス (11) 収益化 (3) 情報科学 (3) 文章の書き方 (1)
  • スポンサーリンク



制作実績

  • 制作実績
  • オリジナルアニメーション
  • 動画映像制作・編集
  • ウェブサイト制作実績
  • 講習・コンサルティング

制作依頼について

  • 制作料金 各種
  • ホームページ制作お任せ安心プラン

ご利用について

  • 会社概要
  • 免責事項ポリシー
  • お問い合わせ
©️ Business Craft 2019