高校生のためのWeb制作講座

高校生のためのWeb制作講座66 CSS編 9 ナビ設定(3)

 

a:hover {
          color:#aaaaEE;
       }

header a {
    color: #fff;
    font-weight: bold;
    text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
    text-decoration: none;

  background-color: #0069FF;
  order-width: 1px;
    border-style: solid;
    border-bottom-color: #000000;
    border-left-color: #73A4F4;
    border-right-color: #000000;
    border-top-color: #73A4F4;
    }

header ul {
    list-style: none;
    text-align:right;
    padding: 5px;
}

header li {
    display:inline; 
    padding: 0 5px;
}

hover:フォーバー:マウスのポインタが重なった状態
solid:実線

  • 2020.07.13 Monday
  • 11:13

高校生のためのWeb制作講座

高校生のためのWeb制作講座65 CSS編 8 ナビ設定(2)

 

header a {
    color: #fff;
    font-weight: bold;
    text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
    text-decoration: none;
    }

header ul {
    list-style: none;
    text-align:right;
    padding: 5px;
}

header li {
    display:inline; 
    padding: 0 5px;
}
 

 

text-decoration: none;下線を消す
list-style:リスト内の各項目の先頭に表示されるマーカーを設定
display:inline:横並びにする
ext-align:テキストの水平方向への配置を指定する。
paddingパディング:余白を取る
   padding: 5px:周りの余白

  • 2020.07.11 Saturday
  • 22:07

高校生のためのWeb制作講座

高校生のためのWeb制作講座63 HTML編 20 リストとナビ

 

ページ追加
<title>WP編</title>  wp.htmlのページ追加

  <nav>
    <ul>
     <li><a href="index.html">トップ</a></li> 
     <li><a href="html/html.html">HTML編</a></li>
     <li><a href="html/wp.html">WP編</a></li>
    </ul>
  </nav>

  • 2020.07.07 Tuesday
  • 11:24

高校生のためのWeb制作講座

高校生のためのWeb制作講座62 HTML編 19 別ページとリンク

 

<a href="html/html.html">HTML編</a>

<a href="../index.html">トップ</a>

「a」:Anchor(アンカー)錨の略 ここでは繋がりを持つ
 

  • 2020.07.06 Monday
  • 22:24

高校生のためのWeb制作講座

高校生のためのWeb制作講座61 HTML編 18 ページ追加

 

ページにタイトルをつけて区別する。
<title>Web制作</title>
<title>HTML編</title>

  • 2020.07.06 Monday
  • 12:58

高校生のためのWeb制作講座

高校生のためのWeb制作講座60 CSS編 6 header内の見出し

 

  HTML
<header>
<h1>高校生のためのWeb制作講座</h1>
</header>

 CSS
 header h1 {
         color:#ffff80;
         font-size: 2.3em;
         text-shadow:1px 1px rgba(0,0,0,1),-1px -1px rgba(0,0,0,1);
         padding-top: 50px;
         }

RGBAカラーモデル:RGBカラーモデルのred・green・blueに、alphaが加わったもの。色の数値は0〜255まで
alpha:透明度 0〜1
 

 

  • 2020.07.05 Sunday
  • 21:21

高校生のためのWeb制作講座

高校生のためのWeb制作講座59 CSS編 5 header背景画像

 

<header>
</header>

header {
    background-image: url("../gz/header1.jpg");
    height: 150px;
    width: 50%;
    background-repeat: no-repeat;
}
 

  • 2020.07.04 Saturday
  • 21:38

高校生のためのWeb制作講座

高校生のためのWeb制作講座58 CSS編 4 背景画像設定

 

HTML言語
<body background="gz/bac.gif">
CSS言語
body {background-image: url("../gz/bac.gif"); }

url:「Uniform Resource Locator」の略称で、インターネット上に存在する情報資源(文書や画像など)の場所を指し示す技術方式です。 通常はホームページページの住所(アドレス)のことです。

  • 2020.07.03 Friday
  • 22:46

高校生のためのWeb制作講座

高校生のためのWeb制作講座57 CSS編 3 CSSフォルダ作成

 

CSSファイルで作成した物をスタイルシートと呼び、このファイルは多数作成することがある。そのためにそのファイルを入れるcssフォルダを作っておく。
そうすると、HTMLファイル内のリンクタブ内も変更する。

  • 2020.07.03 Friday
  • 16:07

高校生のためのWeb制作講座

高校生のためのWeb制作講座56 CSS編 2 初めてのCSSファイル作成

 

ファイル名:style1.css
@charset "UTF-8";
 h1 {color:#f0f000;}

index/html で呼び出す
<link rel="stylesheet" href="style1.css">

link:リンクタグ:「このページ」と「別のファイルやページ」と繋げるタグ
rel:レル:relationの略:関係
href:エイチレフ:hrefはhypertext referenceの略:「ハイパーテキストを参照する」:「ページ/ファイルの場所」を指定する

  • 2020.07.03 Friday
  • 15:01