Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@NSC26(Daishi Nishimura)

第一回　Programming夏期講習　HTML & CSS編

Last updated at Posted at 2018-08-01

#講義の目的
実務で使える実力をつける
×課題をこなす

#プログラミングを使っていくうえで大事なこと

  • 綺麗に書く
    誰が見ても分かりやすく書く

  • 区切りを意識する

  • 無駄を省く
    何故そのコードを書いたのか、書く必要があったのかを逐一説明できるようにする。

#HTML & CSS
#HTML

##DOCTYPE宣言
HTMLやXHTML(複雑仕様化するHTMLをXMLでまとめたもの)でプログラムを書く際、まず最初にするのが、このDOCTYPE宣言。
これは、「DTD」というもの。
文書型宣言という。
HTML、XHTMLにはバージョンが各３種類あり、そのバージョンによって文書の形式が違う。

  • Strict
  • Transitional
  • Frameset

これらのバージョンを使用する際、DCTYPE宣言は長々としたものになる。

しかし、それはHTML4.01/XHTML1.0までの話。

現在はHTML5が主流なので、表記は

<!DOCTYPE html>

で十分。

##<head>

<head>タグはタイトルや文字形式など、ページの大枠を表現するもの。
SEO対策で非常に重要。

https://saruwakakun.com/html-css/basic/head

###<title>

ページのタイトルを書く。
検索エンジンのタイトルや、タブに表示されたり、色々な用途で使用される。

###<meta>

<meta>タグは、検索エンジンやブラウザに向けて書くもの。
ページの内容を表したり、文字形式を伝達したりする。


<meta name="description" content="ページの内容説明">

<meta name="robots" cpntent="noindex,nofollow">→クローラーが掲載も巡回もしない

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

<meta name="format-detection" content="e-mail=no,telephone=no,addres=no">→ブラウザによってはページ内の電話番号やメールアドレスを勝手にリンクにしてしまうため、それを防ぐのに使う

<meta name="author" content="著者名">

<meta property="og: " content="">
                   ↑url,ページのurl/image,画像のURL/twitter:site,@twitterのユーザー名

###<link>


<link rel="canonical" href="正規化するURL">→URLを１つに正規化

<link rel="icon" href="画像URL" size="ex.16×16" type="image/png">→タブのアイコン、もしgifにしたいならimage/gif

<link rel="stylesheet" href="cssファイル名">
<script src="java scriptファイル名"></script>
外部ファイルの読み込み

##<body>

ページ本体を表す部分

###<h1>～<h6>
見出し、<h1>のほうが重要度が高く、<h6>に近づくにつれ重要度は下になる。

###<p>
パラグラフ。段脈の略。

###<img>
画像を張り付ける際のタグ。貼り付けたい画像は


<img src="リンク先">

で張り付けることができる。

その他

<img src="リンク先" onload="alert('image loaded')">
 イメージ読み込みが完了したらjavascripを使用して、イベントを呼び出すことができる。

<img src="リンク先"  width="100">
<img src="リンク先" style="width: 100px">
CSSを埋め込むこともできる。

<img src="リンク先" alt="A picture of some code">
alt属性を設定しておくことにより、画像を読み込めなかったときや、画像にカーソルを乗せたときに表示されるツールチップの説明を追懐したいときに便利。

###<a>

anchorの略。
リンクの出発点と到達点を指定するタグ。

ハイパーリンクを指定する。


<a href="#footer">ページ内末尾へ</a>ページ内リンク

<a href="URI">~~~</a>リンク先文書指定

<a href="mailto:~~@~~">メール</a>

<a name="top">ページ内のtopに移動</a>

<a href="index.html#a">別ファイルの生を付けた場所へリンク</a>

###<ol><ul><li>

リストを作る際には、<ol><ul><li>の三つが使える。

  • <ol>…order listの略。番号や、アルファベットなどで、リスト化することができる。
    番号やアルファベットを指定する際にはtype属性の設定が必須。
<ol type = "A">
<li>アサヒ</li>
<li>サッポロ</li>
<li>キリン</li>
</ol>
  • ul
    ulはunoder listの略。上記と違い、黒の点でリストが作成される。ちょうど、この記事のような感じ。
    こちらに関しては、list-style-typeを設定することができる。
    これらを設定することにより、リストの形を変更することができる。
<ul style="list-style-type: disc">
<li>コーラ</li>
<li>ペプシ</li>
<li>ドクターペッパー</li>
</ul>

####list-style-typeの種類

  • disc

  • circle

  • square

  • none

###IDとクラス

HTMLにはIDとクラスがある。これらを指定し、cssと併せることで、細かくスタイルを指定することができる。

IDはそのページ中、名前を一度しか使えない。
Classは何度でも同名を使うことができる。


<p class="red">赤い</p>
<p ID="blue">青い</p>

指定の仕方


p.red{
 color:red;
}
p#blue{
 color:blue;
}

別に、pは無くていい。ただclassの場合、同じページ内でも<div>と<p>で同クラス名を使用する可能性があるので、その場合は<div>のクラスなのか<p>のクラスなのか判断する際に必要。

使い分け方としては、IDはページ内に一度しか使われないので、特別なところに用いる。

ただ、IDは
ページ内リンクに使うことができる。
という長所を持っている。


<a href="#footer">ページ内末尾へ</a>

<div id="footer">
個々からページ末尾～～
<div>

idで指定しておけば、上記のタグの表記の仕方で、ページ内リンクを作ることができる。

###<div>``<span>の違い

この２つ、役割としてはページ内を「区分け」することで、あとの編集をしやすくするという点で、ほぼほぼ一緒。では何が違うか。
それは、cssのdisplayという値の違い。

|deisplay   |できること|        改行|

|---|----------|-------------------|----------|
|div|blockとなる|幅、高さが指定できる|あり|
|span|inlineとなる|色や大きさを指定できる|無し|

####<div>

<div>は上でも述べたように、幅と高さが指定できるため、ページ内をその内容ごとにまとめることができる。


<div class="～～">
</div>

####<span>

<span>は<div>と違い、高さ、幅を指定できないため、ページ内を大きく区分けする際には、向いていない。
しかし、<p>内の文書を部分的に指定し、色や大きさの変更を与えることができるので、小回りが利いて非常に便利。


<p>未来電子で<span Class="blue">プログラミングを勉強しよう</span></p>


.blue{
color:blue;
font-size:24px;
}

###<table>

表を作成するタグ。

～で票の横一行を決定。 ,でセルを定義。 はtable headerの略 はtable dataの略 
<tr>
<th>メニュー</th>
<th>メニュー説明</th>
<th>値段</th>
</tr>
<tr>
<td>カルボナーラ</td>
<td>卵がのっています</td>
<td>1000円</td>
</tr>

###<form>

データ送信には必須のタグ。
<form>タグの間に、利用者に送信させたい<input>/<SELECT>/<textarea>
を配置させておかないと、送信できない。


<form action="URI" method="転送方法(POST/GET)" name="名前">

###<input>

テキスト入力や実行ボタン等、フォームを構成する部品を作成するタグ。
nameで送信する値を決定しておかないと、<form>に認識されない。


<input type="入力形式" name="フォーム部品名" value="送信する値の指定" checked="初期値で選択された状態にする">

<input type="text">

<input type="password">

<input type="checkbox">

<input type="radio">

<input type="hidden">

<input type="submit">

<input type="button">

###<select>

セレクトボックスを作成するタグ。
選択肢は<option>で決めることができる。
<input>同様、nameで送信する値を決めておかないと、<form>に認識されない。


<select name="blood">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
</select>

###rel/href/srcの違い

講義中間違えた、relとhrefの違い。
rel=relation
href=hypertext reference（ハイパーテキスト参照）
relは文書ファイルの関係性。ex.)stylesheetとか...

hrefはそのまま文書のURLを指定するもの。

srcはsource（ソース）の略。
動画や音声を埋め込むための属性。

#CSS

CSSはデザイン。
htmlだけでは殺風景で見にくいので、CSSでデザインを与え、見やすくする。

##CSS文法

全体を宣言。
装飾を適用させる対象を「セレクタ」
装飾を行う部分を「宣言ブロック」という。

　↓宣言ブロック
P{プロパティ:値;}
↑セレクタ
P{プロパティ:値;プロパティ:値;プロパティ:値;}←複数記述も可
*{プロパティ:値;}セレクタを*にすると、全体を指定することになる。

##CSSの記述場所
###HTMLに直書き
インラインで記述するともいうらしい。
さらに、インラインは「埋め込み」という意味らしい。

<p style="font-size:18px;">ああああ</p>

###<style>タグを使用する

<style>
 P{
  font-size:18px;
  font-weight:bod;
}
</style>

###外部ファイルのCSSを読み込ませる

<head>部分に

<link rel="stylesheet" href="index.css">

以上を書き込む。これが一番一般的。

###要素の書き方

要素を書く際に、複数指定がある場合は、コンマで連続して記述することが可能。

h1,h2,h3{
 color:red;
}

<style>
.strongblue strong {
    color: blue;    
}
</style>
<p>This is the <strong>first</strong> sentence.</p>
<p class="strongblue">This is the <strong>second</strong> sentence.</p>

こうした指定の仕方も可能

###marginとpadding
marginは外余白。服
paddingは内余白。脂肪
要素同士のmarginは打ち消し合う。
また、要素同士のmarginが違う場合、大きい方が優先される。
注意：これらのmarginの特性は垂直方向にしか働かない。全てのパターンが当てはまるわけではない。

###疑似クラス

####link
訪問済みのリンクや、未訪問の状態に応じて、リンクの色を変えることができる。

<style>
a.special:link {
    color: green;
}

a.special:visited {
    color: red;
}
</style>

<p><a href="#">This is a standard link, it will become purple when clicked</a></p>
<p><a class="special" href="#">This is a special colored link and become red when clicked</a></p>

####hover
カーソルを乗せる動作に応じて、スタイルを定義できる。

p:hover {
    background-color: yellow;
}

####active
クリックされている要素に対するスタイル

要素.active{
 プロパティ:値;
}

####target
ページ内の特定セクションに移動することで、目的地の要素にスタイルを追加することができる。

要素.target{
 プロパティ:値;
}

####forcus
inputタグなどに使用するクラス。
forcusを設定することで、選択された入力欄にスタイルを適用することができる。

要素.forcus{
プロパティ:値;
}

#Bootstrap

twitterが開発した、cssの「フレームワーク」。
既存のスタイルを用いることができるため非常に便利。

http://getbootstrap.com/docs/4.1/getting-started/download/

jQueryなどと一緒で、ソースコードを埋め込む必要がある。上記のリンクから移動可。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

#講義の感想
タグやコードの意味を聞かれて、実際に答えようとすると、ぜんぜん答えられなかった。
また、答えられないところが自分の理解できていない部分だということがわかり良かった。
覚えたことを人に説明することの大切さを感じた。

0
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?