おばちゃんでも学べるプログラミング

おばちゃんでも学べるプログラミングは、実際に44歳の私がプログラミングを学んでいくリアリティーブログです。

HTMLとCSS(初級編)②

こんにちは。休日の雨・・・たまにはいいですね。こうして一日中コンピューターの前にいても罪悪感がわかないので。

f:id:s345310s:20180217185746p:plain

HTMLのページデザイン(色・大きさ・配置など)として使うCSSの基本的な式は↓ 

h,div,a,span,etc....要素 {色 : 赤;}

尚、CSSでもブラウザに表示されないメモのタグは→ /*コメント */ です。

ちなみにHTMLは→ <!-- --コメント-- -->

 

1)実際の色、大きさ、配置などのプロパティは以下↓

color = 色

font-size = フォントサイズ

font-family = フォントの種類 (※フォント名にスペースがある場合は " フォント名  " をダブルクォーテーションで囲む)

background = 背景

background-color = 背景色

width = 横幅

height = 高さ

float = 要素を横並びにする 

 

2)HTML内の特定の要素にCSS適用する方法

例:<li></li>内の一つだけを赤くしたい場合

  <li class="selected"></li> (HTML)

       .selected{ ~~~~~~} (CSS)  ※Class名の前にドットをつける

  classにはドット有でタグにはドット無(CSS)

 

3)HTMLの全体構造

まずははじめにHTMLバージョン宣言→ <DOCTYPE.html>

<html>には<head>と<body>が必要!

<head> : ページに関する情報

                 <head>ブラウザには表示されない</head>

                 <head>内には3つの要素を指定

      ①文字コード指定 <meta charset="utf-8">

      ②ページタイトル指定 <title></title>

      ③CSSの読み込み指定 <link rel="stylesheet" href="stylesheet.css">

 

4)レイアウトは<div>要素で構成

例: <div class="header"></div>

           <div class="main"></div>

           <div class="footer"></div>

           ※タブ名+tabキーで補完される。

 

5)ヘッダーの作り方: ヘッダーロゴとヘッダーメニューの作り方。

  ヘッダーロゴ: <div class="header-logo">ヘッダーロゴ名</div>

  ヘッダーメニュー:  <div class="header-list">

                                          <ul>

                                                <li></li>

                                          </ul>

                                          </div>

                                         ※<li>+noneで黒点がなくなる

             CSS で li { list-style:none;}

6)余白の調整: CSS内で padding(top, bottom, left, right) を使う。

例:padding: 20px(top) 30px(right) 10px(bottom) 70px(left) ※時計回り

  padding: 20px(top&bottom) 30px(right&left)  

 

7)footerを作る

  入れ子のセレクト方法:.header-list li {  }

       ★leader-list の li にのみCSSが適用される。

 

8)mainの構造

  mainはcopy-container, contents, contents-formで構成されている。

  文中の一部にCSSを適用したい場合は<span></span>タグを使う。

  ★HTMLには

   ① ブロック要素: <div>, <p> 

   ② インライン要素:  <span>, <a> 

 

9)コンテンツ部分:各言語目に使うcontents-item

例: <div classs="contents-item">

            <img src=" リンク ">

            <p>名前</p>

           </div>

 

10)ボーダーを作る

CSSでボーダーの太さ、種類、色を指定する。

例: border-top:10px(f太さ) solid(種類) color(色)

   ※それぞれをスーペースで区切る

borderの内側→ padding

              外側→ margin

 

11) ボックスモデルはborder, padding, marginから出来ていて(CSS)

  ※全ては時計回りで表示

  例)margin: 20px(top) 10px(right) 20(bottom) 10px(left)

 

12) 問い合わせフォームの作り方

レイアウト

<imput>: 1行入力用 ※終了タグ無

<textarea></textarea>: 複数行入力欄

 

13)送信ボタンは→ <input type="submit">

例)<input type="submit" valu="保存”>

       ※valuをつける事でブラウザ上のボタンには送信ではなく保存が表示される。

 

14)複数のセレクトに同じCSSを指示するには( , ) で区切る。

例)h1, p, { color, font-size, } 

 

なんだか、私だけがわかる学習ノートになってしまいましたが・・・私的にはこうしてアウトプットした事でかなり学習になりました。(自己満足でごめんなさい・・・)

HTMLとCSSの初級編はこれで終わりです。次はHTMLとCSSの中級編になります。

to be continued...