てみブログ

てみブログ

個人的な覚書用です

HTML・CSS基本文法

HTML・CSS 基本文法

文法

[HTML]

<h1>見出しをつける
<h2>見出しをつける
<p> 段落
<!-- コメントアウト -->
<a href="http://xxx.xxx">リンク</a>
<img src="\img\test01.jpg"> ：画像を貼る

[HTML]リスト

liで列挙する。ulで囲むと中点、olで囲むと番号が付く。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>
  • リスト1
  • リスト2
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
</ol>
  1. リスト1
  2. リスト2

[CSS]

h1{
  /* コメントアウト */
  color: #ff0000;  /* 文字色変更（カラーコード指定） */
  color: red;  /* 文字色変更 */
  font-size: 10px; /*フォントサイズ指定 */
  font-family: "Avenir Next"; /* フォント指定 */
  background-color: #dddddd; /* 背景色指定 */
  width: 500px;  /* 要素幅指定 */
  height: 80px;  /* 要素高さ指定 */
  width: 50% 
   /* %指定した場合、親要素のサイズに対しての割合でサイズを決定する。 */
  font-weight: normal / bold;  
   /* 文字太さの変更 通常か太文字か指定する */




基本形

[HTML]

<!--タイプ、htmlの宣言-->  
<!DOCTYPE html>  
<html>

  <!--構成要素をheadとbodyとする-->
  <head>
    <meta charset="utf-8">   文字コードの定義
    <title>ページタイトル</title>　ブラウザのタブに表示されるタイトル
    <link rel="stylesheet" href="stylesheet.css">   CSSの読み込み
  </head>

  <body>
     <!-- body内をdivにより分割する。各divに任意にclass名をつける。-->
     <!-- class名はスペース区切りで複数指定可能。例）class="header logo" -->
     <!-- 実際はdivをネストして各ブロックとして管理することになる。 -->
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </body>

</html>

[CSS]

body{
  /* フォントの指定（OSに入っているフォントと前方一致でヒットさせる。） */  
  font-family : "Avenir Next", sans-serif;  
}

/* 各divに背景色と高さを設定 */
.header {
  background-color: #f7f2b4;
  height: 90px;
}
.main {
  background-color: #bdf7f1;
  height: 600px;
}
.footer {
  background-color: #ceccf3;
  height: 270px;
}




各要素のパディング

[CSS]

.logo1{
    padding: 20px;
}

padding: 20px; 全方向20pxパディング
padding: 20px, 10px; ←縦方向、横方向
padding: 20px, 10px, 20px, 10px; ←順に、上、右、下、左
1方向のみのパディングなら、
padding-top, padding-bottom, padding-right, padding-left
とかもある。

float:left; 左方揃え
float:right; 右方揃え


・境界に線を引く
border: 2px solid red; (赤枠をつける）
border-bottom:2px solid black; （下線を引く）


・リストスタイル
list-style: none; リストの頭につく中黒を消去

<h1>とか<p>タグで書いている文のうち、一部だけスタイルを変更したい場合は、<span>でくくる
例） [HTML]

<div class="container1">
    <p>ここは変えたくないけど、<span>ここだけ変えたい</span></p>
</div>

[CSS]

.container1 span{
    スタイルを書く
}

デフォルトのマージンをキャンセルする

*{
  margin:0px;
}





入力ボックスを作る

1行の場合は、以下で良い。

<input>




あらかじめ値を入れておくには、valueを指定する。

<input value="ほげほげ">



ヒントを表記するには、placeholderを指定する。

氏名 <input placeholder="山田　太郎">

氏名



複数行の入力の場合は、textareaタグを使う。 rowsを指定することで高さを変える。

<textarea></textarea>
<textarea rows="5"></textarea>



ボタンを作る

<button type="submit">ボタン</button>



チェックボックスを作る

<input type="checkbox">　チェックボックス

　チェックボックス



ドロップダウンリストを作る。

<select>
    <option>▼選んでください</option>
    <option>たたかう</option>
    <option>じゅもん</option>
    <option>どうぐ</option>
    <option>にげる</option>
</select>



これらフォームは、javascriptで管理するのが基本になるので、idかnameをつけておく。

<input id="input1">



操作させない入力ボックスは、readonly属性を付ける。
さらに、タブ対象から外す場合は、tabindex="-1"を指定する。
以下では、分かりやすいように背景色をライトグレーにし、テキストを入れている。

<input readonly tabindex="-1" style="background-color:lightgray" value="ここは入力不可">



ボタンを無効化（グレーアウト）する場合は、disabled属性を付ける。

<button disabled>押せないボタン</button>



javascriptからコントロールするときは、
　button1.disabled = true;
　button1.disabled = false;
などで制御する。




中級編

背景画像の指定

[CSS]

div{
  background-image: url(top.png);  /* 画像ファイルを指定 */
  background-size: cover;  /* 1枚の画像を拡大して領域を埋め尽くす（並べて表示にしない） */
}

要素を中央に配置する

→マージンにオートをつける

[HTML]

<div class="container1"></div>

[CSS]

.container1{
    width:900px;
    margin: 0 auto;
}

文字スタイル操作

[CSS]

.container1 h1{
    font-size: 20px;  /* フォントサイズを指定 */
    color: #fff;    /* 文字色を指定 */
   letter-spacing: 5px;  /* 1文字ごとの文字間隔を広げる */
    opacity: 0.7;    /* 0で透明、1で不透明 */
  text-align: cneter;  /* 文字を中央揃えする */
}

ボタンを作る

[HTML]

<a href="#" class="btn login">ログイン</a>
<!-- ↑「btn」と「login」の２つのclassをもたせる -->

[CSS]

.btn{
  padding: 8px 24px;  /* 文字の周りを広く取ってボタンサイズを決める */
  line-height: 10px;  /* パディングなどを指定しない場合に、行の高さを指定する。また、文字は高さの中心に来るようになる。 */
  color: white;  /* 文字色を白に */
  display: inline-block;  
   /*  aタグをインラインブロックにする。ブロック化することで、マージンやパディングなどの指定が可能になる。 */
  /* また、ブロック化によりブロック内のどこをクリックしてもリンクが発動するようになる。 */
  opacity: 0.8;  /*透明度を指定 */
  border-radius: 4px;  /* 角を丸める */
  box-shadow: 0px 6px #000000;  /* 影をつける（右に0px、下に6pxの、黒色の影を指定） */
  cursor: text / pointer / defalut; /*マウスカーソルの形を変える（文字カーソル、指、矢印） */
  
}

.btn:hover{
  opacity:1;  /* ボタンにマウスオーバーしたとき、不透明化する */

}

div{
  transition: all 1s;  /* ホバー時などの変更遷移時間を指定する */
}

div:active{
  /* クリックしている間だけ発動 */
  box-shadow: none;  /* 影を消す。 */
  position: relative;
  top: 6px;    /* ボタンが押されたときに要素位置を6px下に動かす（ボタンが押された描写） */

}


.login{
   background-color: blue;  /* ボタンの色を指定する */
}



アイコンを付ける

Font Awesomeのアイコンを使う。
①HTMLにてFont AwesomeのCSSファイルを読み込む

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

②<span>タグにfaクラスとfa-アイコン名クラスを指定する。

  <span class="fa fa-facebook">

透明化について

・opacity
中身すべてを透明にする
・rgba
背景色のみ透明にする
透明背景に不透明文字を組み合わせることができる。

色指定はカラーコードだけでなく、rgb指定ができる

  background-color: #ff931e;
  background-color: rgb(255,147,30);

rgbaを用いると、4つ目の引数で透明度を指定できる。
透明度はopacityと同様、0~1で指定し、0が完全透明、1が不透明となる。

  background-color: rgba(255,147,30,0.5);

rgbaを用いることで、背景色にのみ透明化を指定することが可能。

要素を重ねる

通常要素は重ならないが、画像の上に文字（pタグなど）を重ねたい場合、要素位置を指定することで実現できる。
[CSS]

  position: absolute;  /*絶対位置を指定（サイトの左上が原点） */
  position: relative;  /* 相対位置を指定（その要素の左上が原点） */
  top: 50px;
  left: 70px;

スクロールした時もヘッダを常に表示する

[CSS]

header{
  position:fixed;  /*位置を固定*/
  top:0px;  /* 固定する場所を指定 */
  z-index: 10px;  /* 常に全面に表示  */
  /* 指定しない場合のz-indexは0。数字が大きいほど手前に来る */



レスポンシブデザイン

Flexbox

PC、スマホ、タブレットなどのマルチデバイスから適切な見え方を提供する。
[HTML]

<ul class="flex-list">
  <li class="li1">item1</li>
  <li class="li2">item2</li>
</ul>

[CSS]

.flex-list{
  display: flex;  /*デバイスによって横並び、縦並びを変える*/
  flex-wrap: wrap;  /*折り返したい要素に指定*/
}
.flex-list li{
  flex: auto; /*幅いっぱいに表示する*/
  width: 50%;  /*1要素50%で表示（2要素ごとに折り返す）*/
}

メディアクエリを合わせる

[CSS]

@media(max-width: 1000px){  
  /*横幅が1000px以下の場合に適用*/
  h1{color: blue;}
  .item{width: 50%;}

.flex-list{
  flex-direction: column;  /* 要素を上から下に並べるようにする */
}
box-sizing: border-box

width: 25%などの、widthの中に、paddingとborderを含めるようにする。
※marginは含まれない。
レスポンシブデザインでのレイアウト崩れを防ぐことができる。
[CSS]

//全要素に対して適用を推奨
*{
  box-sizing: border-box;
}
viewport

[html]

<head>
  <!--head内にviewportを記載-->
  <meta name="viewport" content="width-device-width, initial-scale=1.0">
  <!--レスポンシブ用のcssを読み込む。必ずviewportより下で読み込む-->
  <link rel="stylesheet" href="responsive.css">

</head>
floatをclearする。

[html]

対象の要素内に、空要素「clear」を定義する
<div class="clear"></div>

[css]

.clear{
  clear: left;  //floatを解除
}

JavaScript連携

・JavaScriptのプログラムを読み込む [HTML]

<script type="text/javascript" src="TESTSCRIPT.js"></script>

記載場所は<body>内部の一番下が基本らしい。

・ボタンを押すとスクリプトが起動する [HTML]

<button type="button" id="btn01">押してください</button>

[JavaScript]

$("#btn01").on("click", function() {
 $("#tBox).val("ボタンが押されました");
});