青色プログラム。

日々楽しくプログラミングを学ぶ

【HTML・CSS】基本と全体構造

 

 

 

HTMLハイパーテキストマークアップ・ランゲージ)

HTMLはプログラミング言語ではなくマークアップ言語といい要素の集まりで出来ており、どのように見えるか動くかを表現するためのタグで囲まれたまとまり

 

<h1></h1> 見出し h2→h6となるほどに文字の大きさが小さくなる

<p></p> 段落 <h2>や<p>タグで囲むとテキストは改行して表示される

<!-- コメント --> コメント 表示されなくなりメモ用に

<a href="URL">ここに文字</a> リンク 『スペース、" "』忘れずに

<img src="画像のURL">  画像を表示  img(イメージ)、src(ソース)

<li></li> リスト <ul>要素で囲むと黒点が付き <ol>だと数字が付く

  • こんにちは
  • こんばんは
  • おやすみ
 <ul>
 <li>こんにちは</li>
 <li>こんばんは</li>
 <li>おやすみ</li>
 </ul>

囲む方の要素を親要素<ul>、囲まれる要素<li>を子要素と呼ぶ。 

 

インデント 入れ子構造の要素がある場合、複雑でも分かりやすくなります。

上の例でいうと<li>を改行と左の空き、必須ではないが大事。

 

このタグは100個以上ある模様。


 

CSS(カスケーディング・スタイル・シート)

CSSはHTMLの要素に色.大きさ.配置などを指定しページをデザインする言語です。

ウェブページのデザインやレイアウトなどの見栄えですね!

 

・文字の色を変える 『color

例:HTML <h1>おはようございます</h1> の場合(あいさつ部分は適当)

  CSS

 h1{
 color: 色を指定;
 }
※インデントを忘れずに、コロン『:』セミコロン『;』も必要なので注意! 
※色は『色 コード』で検索
 
 
 ・文字の大きさを変える 『font-size
例:HTML <h1>おやすみなさい</h1> の場合
  CSS
 h1{
 color: 色を指定;
 font-size: 数字px;
 }
※px(ピクセル)単位で指定
 
 
・文字の種類を変える 『font-family
例:HTML <h1>HELLO WORLD</h1>
        <p>HELLO WORLD</p>
  CSS
 h1{
 font-family:フォント名;
 }
 p{
 fomt-family:"Avenir Next";
 }
※色んなフォントを指定する事ができ、名前は覚える必要は無い
※スペースがある二つ目のフォント名みたいな場合、ダブルクォーテーションで囲む
 
 
・コメント 『/*  */
HTMLと同じくCSSファイルにもコメントが出来る
 h1{
  /* 文字の色を赤色に指定 */
  color: #ff0000;
 }
※書いてるコードは例です。コメントは/* */の部分
 
 
・背景色を変える 『background-color
例:HTML <h1>今日はいい天気</h1>
  CSS
 h1{
  background-color: 色を指定;
 }
 
 
・横幅、高さを変える 『width』『height
 width 幅・・・ウィドゥス、ウィズなど
 height 高さ・・・ハイト
例:HTML <h1>これは飼っている犬と猫です</h1>
        <img src="画像のURL">
  CSS
 h1{
 width: 数字px;
 height: 数字px;
 background-color: 色を指定;
 }
 img{
 width: 数字px;
 height: 数字px;
 }
 

 
・特定の要素にCSSを適用する 『class
HTMLで書いた<li>要素みたいにリストが複数ある場合すべての色が変わるので、
要素にclassを使って名前を付け、それぞれの要素を識別し別々のCSSを適用する。
例:HTML
 <ul>
 <li class="selected">こんにちは</li>
 <li>こんばんは</li>
 <li>おやすみ</li>
 </ul>
  CSS
 .selected {
 color:red;
 }
※classでCSSを指定する場合、先頭にドット『.』が必要なので忘れずに。
これでリストの・こんにちは だけを赤色に出来た。
 
※classに同じCSSを適用する
上記HTMLの <li>こんばんは</li> にも同じ名前のclassを付けた場合、・こんばんは も赤色にする事が出来ます。

 

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

<body> 実際に表示したい内容

HTML要素の中には<head>要素と<body>要素が必要
 <!DOCTYPE html>
 <html>
  <head>
   ¦
  </head>
  <dody>
   ¦
  </dody>
 </html>

 

※ブラウザに表示されるのは<body>のみ

 

・HTMLバージョンを指定 DOCTYPE宣言

どのHTMLバージョンで記述されたファイルなのかを冒頭で宣言する

 最新のHTML5 <!DOCTYPE html>

 

 

<head>要素 

webページの設定に関する情報を書きます。

 <head>
  <meta charset="utf-8">
  <title>青色プログラム。</title>
  <link rel="stylesheet" href="stylesheet.css">
 </head>

 

文字コードの指定 <meta>

文字コードを指定すると文字化けを防げる

HTMLで推奨されている文字コードの場合 <meta charset="UTF-8">

 

・ページのタイトル <title>

ブラウザのタブに表示されてるやつです。

 

CSSの読み込み <link rel="stylesheet.css">

 href属性で読み込むCSSファイルを指定します。

 

 

<body>要素

第一回のページで書いた事は、この<body>要素に書いていく事になります。

第一回 → 【HTML・CSS #1】基礎を学ぶ


 

 レイアウト

 ・<div>要素

要素をグループ化する事の出来るタグです。『division』の略

 水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることがでる。

 

・floatプロパティ 『froat: left;

要素を横並びにする事が出来ます。

left(左寄せにする) right(右寄せにする)

 

・paddingプロパティ 『padding: 数値;

上下左右に余白を指定する事が出来ます。

値を2つ指定 → padding: 30px 50px;(これで上下に30px.左右に50px)

値を3つ指定→上記のpxを増やす(上、左右、右)

値を4つ指定→さらに増やす(上、右、下、左)

 上、下、左、右だけの場合:padding-top padding-bottom padding-left padding-right

 

・boderプロパティ 『border: 数字px 種類 色;

要素の上下左右に枠線を付ける事が出来ます。

特定の場所のみならborder-top   -bottom  -left  -right

 

・marginプロパティ 『margin: 数字px;

余白、paddingはborderの内側なので外側の余白。


 

・<span>要素

本文の一部にCSSを適用させたい場合

例:HTML
 <h1>
  ブログのタイトルは</span>青色プログラム。<sapn>です
 </h1>
  CSS
 span {
  color: #ff0000;
 }

 これで 青色プログラム。 の部分のみにCSSが適用されます。


 

ブロックレベル要素、インライン要素

・ブロックレベル要素

イメージとしてはブロック

<h1>見出しや<p>段落などは1つのブロックとして認識される。

 

・ インライン要素

ブロックレベル要素の内容の要素で文章の一部

段落のなかの一部を強調するような使われ方をする<strong>要素など

<strong>の例:今日は、いい天気ですよ (いい天気の部分)


 

・input要素 <input>

一行のテキスト入力を受け取る為の要素。この要素には終了タグが不要

 

・textarea要素 <textarea></textarea>

複数行のテキスト入力を受け取る為の要素

 

・type属性、balue属

 <input type="submit" value="保存">

 <input>要素にはtype属性を指定でき、submitを指定すると入力欄ではなく送信ボタンになる。

value属性でボタンのテキストを変更する事が出来る。