トップ カテゴリー 問合せ


目次


・アンダーラインの削除方法
・文字デザインの色々
・下線部の装飾方法色々
・HTML記述で必要になりそうなサンプルコード集


アンダーラインの削除方法


まずは、よく見る記述方法を確認しておきましょう。
リンク先の記述方法は以下が基準となります。

  1. <a href="../index.html">トップページ></a>

↑の内容は単純に指定したファイルをクリップすると遷移するというものです。
ですが、これだと下線にリンク表示の意味の線が表示されてしまいます。

今回は、これを消して見栄えを良くしたいです。
ちなみに、../などの絶対パスでなくても画面遷移など指定することも可能です。
こちらの方が、階層の修正などが簡単で便利です
相対パス・絶対パスなどは調べて理解しておきましょう。

では、ここからが本題です。 アンダーラインの表示を消すためには、以下のコードを追記する必要があります。

  1. <a href="../index.html"style="text-decoration:none;">トップ<a>
 アンダーラインの表示を消すためには、以下のコードを追記する必要があります。
  1. <a href="../index.html"style="text-decoration:none;">トップ<a>

はい！
これで簡単にアンダーライン表示が消えました。
「text-decoration:none」の意味は、下線を消すという意味です。
細かい記述方法は、覚えなくてもよいと思います。
重要なことはやりたいことが目的通り作れることです。

細かい部分はどんどん忘れても調べればよいので、自身のサイト開発の内容と即しているか、
目的通り動作するかを考えながら作っていきましょう。

これだけでも、十分見栄えはよいのですが、背景色と馴染みやすいように色も変更することが出来ます。


  1. <a href="../index.html"style="text-decoration:none;"><c style="color:#556b2f;">トップ</c></a>
 これで、色も変更することができました。
「c」などの別名はなんでもいいです。分かりやすい名前がいいと思います。
たった2ステップだけで見栄えやアクセスのしやすさが全然違いますので、

自作サイトを作っている人は細かい部分も気にするようにしましょう。

文字デザインの色々


次は、文字の装飾についてです。
内容は決まったけど、どんなデザインにすればいいか迷ってしまう方も多いですね。
私も背景色とよくなじむためにどんな色にしていったらよいか悩む部分です。

サンプルのソースコード共に例をまとめたので使ってみてください。
①文字の装飾
HTML

  1. <div class="sample2"><h2>H２ 見出しタイトル</h2></div>
  2. <div class="sample2"><h3>H３ 見出しタイトル</h3></div>
  3. <div class="sample2"><h4>H４ 見出しタイトル</h4></div>
 CSS
  1. html body .sample2 h2, html body .sample2 h2::before, html body .sample2 h2::after,html body .sample2 h3, html body .sample2 h3::before, html body .sample2 h3::after,html body .sample2 h4, html body .sample2 h4::before, html body .sample2 h4::after {
  2. all: initial !important;
  3. content: '' !important;
  4. }
  5. html body .sample2 h2 {
  6. font-size: 22px !important;
  7. background-color: #ff937a !important;
  8. font-weight: bold !important;
  9. color: #fff !important;
  10. padding: 0.5em 1em calc(0.5em - 6px) !important;
  11. padding-top: 10px !important;
  12. padding-bottom: 10px !important;
  13. position: relative !important;
  14. display: block !important;
  15. margin-bottom: 2em !important;
  16. }
  17. html body .sample2 h2::after {
  18. content: '' !important;
  19. background-color: #ff937a !important;
  20. width: 100% !important;
  21. height: 3px !important;
  22. position: absolute !important;
  23. bottom: -6px !important;
  24. left: 0 !important;
  25. }
  26. html body .sample2 h3 {
  27. overflow: hidden!important;
  28. display: block !important;
  29. font-family: sans-serif !important;
  30. font-size: 22px !important;
  31. font-weight: bold !important;
  32. margin-bottom: 2em !important;
  33. border-left: 7px solid #ff937a !important;
  34. padding: 0.5em 1em calc(0.5em - 6px) !important;
  35. padding-top: 10px !important;
  36. padding-bottom: 10px !important;
  37. position: relative!important;
  38. background-color: #ff937a26!important;
  39. }
  40. html body .sample2 h3::after {
  41. content: ''!important;
  42. position: absolute!important;
  43. border-left: 20px double #ff937a !important;
  44. height: 100%!important;
  45. top: 0!important;
  46. right: 50px!important;
  47. transform: skew(-20deg)!important;
  48. }
  49. html body .sample2 h4::before {
  50. margin-top: -5px!important;align-content;
  51. height: 25px !important;
  52. width: 25px !important;
  53. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,18L16,12L10,6L8.6,7.4L13.2,12L8.6,16.6L10,18Z' fill='%23ff937a'%3E%3C/path%3E%3C/svg%3E")!important;
  54. background-size: cover;
  55. background-repeat: no-repeat;
  56. display: block;
  57. }
  58. html body .sample2 h4 {
  59. font-size: 22px !important;
  60. font-weight: bold !important;
  61. display: flex!important;
  62. align-items: center!important;
  63. column-gap: 8px!important;
  64. color: #333333!important;
  65. margin-bottom: 2em !important;
  66. }

下線部の装飾方法色々


特定の文字を強調させたいときに活用できます。

点線のパターン、太字のパターンなど色々あるので調べて実装してみてください。

①通常表示
HTML
  1. <p class="seotext_00">ホームページの順位を上げるためにSEO対策が必要です。</p>
 CSS
  1. p.seotext_00 {
  2. text-decoration:underline;/*下線を引く*
  3. text-decoration-color:#FF0000;/*下線を赤色*
  4. }
 ②点線にする。
HTML
  1. <p>ホームページの順位を上げるために<span class="seotext_01">SEO対策が必要</span>です。</p>
 CSS
  1. .seotext_01 {
  2. border-bottom:dotted;/*下線を点線にする*/
  3. border-color:#FF0000;
  4. border-width:1px;
  5. }
 ③太さを調節する。
CSS
  1. .seotext_02 {
  2. border-bottom:solid;
  3. border-color:#FF0000;
  4. border-width:5px;/*5ピクセルの太さにする*/
  5. }
 ④二重線にする。
CSS
  1. .seotext_03 {
  2. border-bottom:double;/*二重線を引く*/
  3. border-color:#FF0000;
  4. border-width:3px;
  5. }
 ⑤位置を調整する。
CSS
  1. seotext_04 {
  2. text-decoration:underline;/*下線を引く*/
  3. text-underline-position:above;/*下線の位置をテキストの上に引く*/
  4. }
 ⑥マーカー風に引く
CSS
  1. .seotext_05 {
  2. background:linear-gradient(transparent 70%, #FFFF00 0%);
  3. }
 ⑦下線として波線を引く
CSS
  1. .seotext_06 {
  2. text-decoration:underline;/*下線を引く*/
  3. text-decoration-style:wavy;/*下線を波線で表示*/
  4. }

HTML記述で必要になりそうなサンプルコード集



最後に、自身でホームページを作成する上で抑えておかなければならない内容を書いておきました。
改修する際などに適宜見直してみてください。 また、ここにない物は自身で調べて作れるようにレベルアップしていきましょう！

・ひな形
  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
  6.  <link rel="icon" href="img/ファビコン.ico">
  7.  <title>トップページ｜トップページ</title>
  8.  <link rel="stylesheet" href="../index.css">
  9.  </head>
  10.   <body background="img/img001.gif">
  11.   <a href="../index.html"><img src="img/welcome.gif"></a>
  12.   <br>
  13.   <a href="../index.html"style="text-decoration:none;"><c style="color:#556b2f;">タイトル</c></a>
  14.   <a href="../category.html"style="text-decoration:none;"><c style="color:#556b2f;">タイトル</c></a>
  15.   <a href="../contact.html"style="text-decoration:none;"><c style="color:#556b2f;">タイトル </c></a>

戻る