ここに文字を入力する

 

 

TELリンクをボタン風に表示する TELリンクを設定したa要素(アンカータグ)でボタンを囲むことによって、クリックすると、電話を発信するボタンが完成する 電話をかける(090XXXXXXXX)

テスト

文字


タイトル付き枠サンプル

1)細かい点線の枠に入れる

タイトル付き枠ここに文字を入力する。

↓下記をコピー&ペースト


<fieldset style="border: 1px dotted #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

 

 

2)実線の枠に入れる

タイトル付き枠ここに文字を入力する。

↓下記をコピー&ペースト


<fieldset style="border: 1px solid #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

 

 

3)点線の枠に入れる

タイトル付き枠ここに文字を入力する。

↓下記をコピー&ペースト


<fieldset style="border: 1px dashed #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

 

 

4)二重線の枠に入れる

タイトル付き枠ここに文字を入力する。

↓下記をコピー&ペースト


<fieldset style="border: 5px double #000000; padding: 10px;">

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

 

進化形)タイトル部分に背景色を入れる

タイトル付き枠ここに文字を入力する。

↓下記をコピー&ペースト

 

<fieldset style="border: 1px double #000; padding: 10px;"><legend style="background-color: #FF0099; padding: 3px 10px; border-radius: 5px; color: #ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>

 

※ピンク色は、#FF0099 部分です。他の色に変えたい場合は、このカラーコードを変更します。

上付き文字 <sup></sup>

m2←平方メートルなど、上に付けるちっちゃい文字

<sup>2</sup>という感じで、小さくしたい文字を<sup></sup>ではさみます。

下付き文字 <sub></sub>

H2O←エイチツーオーなど、下に付けるちっちゃい文字

<sub>2</sub>という感じで、小さくしたい文字を<sub></sub>ではさみます。

削除された箇所 <del></del>

削除された箇所

<del>削除された箇所</del>という感じで、取消線を入れる文字を<del></del>ではさみます。

アンダーライン <u></u>

アンダーラインは・・・紹介していながら恐縮ですが、使用をおすすめしません。

「知っておきたいエトセトラ」内“読みやすさを考える”を参照してください。

影付き枠サンプル

1.影をつける

ここに文字を入れる。

↓以下をコピー&ペースト

<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 4px 4px 8px #dddddd;">ここに文字を入れる。</div>

 

 

2.影を大きめにする

ここに文字を入れる。

↓以下をコピー&ペースト

 

<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 8px 8px 16px #dddddd;">ここに文字を入れる。</div>

 

 

3.影を抑えめにする

ここに文字を入れる。

↓以下をコピー&ペースト

 

<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 2px 2px 4px #dddddd;">ここに文字を入れる。</div>

見出しを2行にするHTML

 

先に結論をいうと、「コンテンツ」→「見出し」を使わず、「見出し」に該当するhタグというHTMLを使います。
hタグは、大きさ順に123となります。

見出し大 → <h1>ここに見出し大のテキスト</h1>

見出し中 → <h2>ここに見出し中のテキスト</h2>

見出し小 → <h3>ここに見出し小のテキスト</h3>

1)細かい点線の枠に入れる

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ここに文字を入力する。
</div>

 

 

2)点線の枠に入れる

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
    ここに文字を入力する。
</div>

 

 

3)実線の枠に入れる

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
    ここに文字を入力する。
</div>

 

 

4)二重線の枠に入れる

ここに文字を入力する

↓下記をコピー&ペースト

 

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

    ここに文字を入力する。
</div>

5)細かい点線の枠に入れる(角丸つき)

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
    ここに文字を入力する。
</div>

 

6)点線の枠に入れる(角丸つき)

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
    ここに文字を入力する。
</div>

 

7)実線の枠に入れる(角丸つき)

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
    ここに文字を入力する。
</div>

 

8)二重線の枠に入れる(角丸つき)

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
    ここに文字を入力する。
</div>

 

 

1x)細かい点線の枠に入れる -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

 

2x)点線の枠に入れる-背景色付き

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

 

3x)実線の枠に入れる -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

 

4x)二重線の枠に入れる -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

5x)細かい点線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

6x)点線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

7x)実線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

8x)二重線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #ffff99;">
    ここに文字を入力する。
</div>

 

 

1xx)細かい点線の枠に入れる  - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

 

2xx)点線の枠に入れる - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

 

3xx)実線の枠に入れる - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト


<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

 

4xx)二重線の枠に入れる  - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

5xx)細かい点線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

6xx)点線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

7xx)実線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

8xx)二重線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

 

HTMLソース解説(CSSによる指定)

「細かい点線枠(角丸つき) - 濃い背景色付き・文字色変更 」を例に,解説します。
線の色や、幅のバリエーションをつけたい場合、参考にしてください。

 


例)「細かい点線枠(角丸つき) - 濃い背景色付き・文字色変更 」のHTMLソース

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</div>

 

padding: 10px;
→ paddingは、枠の内側の余白です。これは、10px内側に余白を入れています。

   数値の大小で、余白の幅が変更できます。

 

margin-bottom: 10px;

→ marginは、枠の外側の余白です。margin-bottomだと、枠の下の余白です。

   数値の大小で、余白の幅が変更できます。

 

border: 1px dotted #333333;
→ borderは、線の指定です。これは、線の太さ1px、線の種類がdotted、線の色が#333333となります。

  線の太さは、数字の大小で変更します。
  線の種類は、丸い点線が「dotted」、波線が「dashed」、直線が「solid」、二重線が「double」です。

  線の色の指定は、こちらのページをご参考ください。

 

border-radius: 5px;

→ border-radiusは、角丸指定。角丸の半径が5pxとなります。

  数字の大小で角丸の大きさが変わります。
  ※但し、この指定はブラウザ環境で角丸にならない場合もあります。

 

background-color: #009999;

→ background-colorは、背景色の指定です。色指定は、こちらのページをご参考ください。

 

color: #ffffff;

→ colorは、文字色の指定です。色指定は、こちらのページをご参考ください。

 

<おまけ>border-radiusバリエーション

「border-radius:10px 0 10px 0;」とすると、左上、右上、右下、左下の順に角丸の半径を変更することができます。0は、角丸なしの意味。

 

ここに文字を入力する

 

 

文字を2行以上入れたい時は?

二行以上文字を入れたい場合。

ここに文字を入力する。
2行目
3行目


HTML編集画面で、<br />を使って、文字を改行します。
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ここに文字を入力する。<br />2行目<br />3行目
</div>

文字のセンタリングをしたい場合は?

文字のセンタリングをしたい場合。

ここに文字を入力する。
2行目
3行目


HTML編集画面で、 text-align: center; を加えます。
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; text-align:center;">
    ここに文字を入力する。<br />2行目<br />3行目
</div>



 ・お願い・

 

当サロンの情報を無断掲載や無断投稿はしないで下さい。

 

何度か無断で明らかに当サロンを全く知らない方の

口コミ等が他所の情報サイトにあり、大変困惑しております。

 

当サロンが情報をある程度公開している目的は興味を持たれたお客様方に

安心してご依頼をご検討頂く為であり、無断転載や無断掲載の為ではありません。 


所在地|宮城県石巻市鹿又

 

(サロン住所は家族の個人情報でもある為

こちらでの全公開はしておりません) 

 

2023年 6月の情報

©︎ 2018~2023 Miyuki miura.