1p
トップ > 超初心者でも分かるホームページの作り方 > 超初心者でも分かる見出しの書き方

超初心者でも分かる見出しの書き方

初心者向けに、見出しの書き方について解説します。これまで、「h1、h2、h3……」と、わざわざ書いてきたのが、報われる時です。hタグで書いただけで、CSSを使って、色々デザインすることができます。

見出しの書き方

  1. サルワカ」で、好みの見出しのデザインを選びましょう。
  2. 選んだら、「コードを表示」をクリックして、CSSのコードを「CSSファイル」に追加します。ここでは、以下のCSSを選びました。
  3. 
    h1 {
      position: relative;
      background: #dfefff;
      box-shadow: 0px 0px 0px 5px #dfefff;
      border: dashed 2px white;
      padding: 0.2em 0.5em;
      color: #454545;
    }
    
    h1:after {
      position: absolute;
      content: '';
      left: -7px;
      top: -7px;
      border-width: 0 0 15px 15px;
      border-style: solid;
      border-color: #fff #fff #a8d4ff;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }
    
    
  4. 「HTMLファイル」には、「h1」などと見出しを書くだけです。
  5. 
    <h1>美しい見出しのデザイン</h1>
    
    
  6. これで、表示させてみましょう。下記の表示が出れば、成功です。
  7. 見出し

上手くいかない場合

豆知識

引用サイト



前へ  目次  次へ

免責事項・著作権表示

情報が古かったり、間違っていることなどによる損害の責任は負いかねますので、ご了承ください。

Copyright (C) SUZ45. All Rights Reserved.