Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ネットワークチーム講座第2回

北海道科学大学　電子計算機研究部
May 09, 2016
Education
0
81

 ネットワークチーム講座第2回

@charset "utf-8";
body {
margin: 0 ;
padding: 0;
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka,
"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
}
body {
background-color: #f0eaea;
width: 600px;
margin: 30px auto;
padding: 0;
}
body h2{
color: #259959;
font-size: 18px;
line-height: 1.333;
border-left: 10px solid #259959;
border-bottom: 1px solid #259959;
padding-left: 5px;
}
body p {
padding: 0 10px;
font-size: 14px;
line-height: 1.429;
}
table{
width: 500px;
margin: 50px;
}
table, td, th{
border: 1px #000000 solid;
border-collapse: collapse;
table-layout: auto;
}

北海道科学大学　電子計算機研究部

May 09, 2016
Tweet

More Decks by 北海道科学大学　電子計算機研究部

See All by 北海道科学大学　電子計算機研究部
第12回Network講座2019
densan
1
51
第11回Network講座2019
densan
0
67
第10回Network講座2019
densan
0
43
第09回Network講座2019
densan
1
150
第08回Network講座2019
densan
0
46
第07回Network講座2019
densan
0
43
第06回Network講座2019
densan
0
67
第05回Network講座2019
densan
0
48
第04回Network講座2019
densan
0
84

Other Decks in Education

See All in Education
Adobe Analytics入門講座【株式会社ニジボックス】
nbkouhou
0
23k
お仕事図鑑pitchトーク
tetsuyaooooo
0
2.3k
ThingLink
matleenalaakso
28
3.8k
勉強する必要ある？
mineo_matsuya
2
2.3k
ルクソールとツタンカーメン
masakamayama
1
1.1k
AWS All Certが伝える 新AWS認定試験取得のコツ （Machine Learning Engineer - Associate）
nnydtmg
1
700
LinkedIn
matleenalaakso
0
3.4k
TP5_-_UV.pdf
bernhardsvt
0
120
情報処理工学問題集 /infoeng_practices
kfujita
0
160
Генезис казарменной архитектуры
pnuslide
0
150
コンセプトシェアハウス講演資料
uchinomasahiro
0
520
(2024) Couper un gâteau... sans connaître le nombre de convives
mansuy
2
160

Featured

See All Featured
Fireside Chat
paigeccino
34
3.1k
Faster Mobile Websites
deanohume
305
30k
Building Your Own Lightsaber
phodgson
103
6.1k
Designing Experiences People Love
moore
138
23k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Code Reviewing Like a Champion
maltzj
520
39k
How STYLIGHT went responsive
nonsquared
95
5.2k
A better future with KSS
kneath
238
17k
Optimizing for Happiness
mojombo
376
70k
GitHub's CSS Performance
jonrohan
1030
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k

Transcript

  1. 第二回ネットワーク チーム講座資料 ＨＴＭＬ基礎、CSS適用

  2. 概要 • HTML基礎 • CSS • 演習

  3. HTML （HyperText Markup Language） • Webページを作成するための言語。 • 今日のWebページの多くはHTMLで作成されている。 • 「タグ」というものを使って記述する

  4. HTML （HyperText Markup Language） <!-- と -->で囲まれた部分はコメントであり、ブラウザ上では表示されない <!DOCTYPE html> <!--

    HTML5の文書であることを示す --> <html lang=“ja”> <!-- 使われている言語を示す --> <head> <!--文書に関する情報を指定する --> <meta charset=“utf-8”> <!-- 文字エンコーディングの指定 --> <title>タイトル</title> </head> <body> <!-- 文書の本体部分 --> <h2>電算ネットワークチーム</h2> <p>電子計算機研究部へようこそ</p> </body> </html>

  5. タグについて 開始タグから終了タグまでをひっくるめて「要素」という。 <p class=“name”>名前</p>

  6. タグについて タグの名前を「要素名」という。 <p class=“name”>名前</p>

  7. タグについて タグに付帯する情報の指定を「属性」という。 <p class=“name”>名前</p>

  8. タグについて 属性の名前を「属性名」という <p class=“name”>名前</p>

  9. タグについて 属性の値を「属性値」という <p class=“name”>名前</p>

  10. 要素の種類 1. ブロックレベル要素 見出しや段落など、文書の骨組みとなる要素 要素のあとは自動的に改行される 例：<h1>-<h6>,<table>,<p>,<form>…など 2. インライン要素 リンクや画像など、文章の一部と扱われる要素 例：<a>,<br>,<label>,<script>…など

  11. タグ • <h1>~<h6>：見出し 数字の小さい順に使う • <p> ：段落（文章を表示する） • <br> ：改行

    終了タグなし • <a> ：他のWebサイトなどへのリンク（ハイパーリンク） • <img> ：パスで指定した画像を表示 終了タグなし

  12. 表 <table>：表を作る <thead>：表の見出し行 <th>：表の見出しセル <tbody>：表の本体部分 <tr>：表の横一行 <td>：表のセル

  13. 演習① 1. SublimeTextを起動して、右下の「Plain Text」をクリック ↓Click

  14. 演習① 2. リストの中から「HTML」を選択

  15. 演習① 3. エディタ内で「!」マークを入力

  16. 演習① 4. tabキーを押すと、HTMLファイルの雛形が自動入力される。

  17. 演習① 5. html要素（2行目）のlang属性の値を”en”から”ja”に変更する

  18. Emmetについて • HTML・CSSのコーディングを補助するプラグイン • 特定の文字列を打ち込んだ後tabキーを押すと、自動でHTML要素 として整形してくれる • 詳しい使い方はまた後日

  19. 演習② 1. body要素内に以下の赤枠内の要素を追加する

  20. 演習② 2. thead要素の直後(</thead>の次の行)から以下の赤枠内の要素を 追加する ※最低限青枠内だけでも入力しておいてください

  21. None

  22. CSS （Cascading Style Sheets） HTML文書の体裁（見た目）を記述・指定するもの こんな感じ→ これを使って見やすくしよう body { background-color:

    #ffffff; color: #333333; } h2 { color: #a40019; }

  23. 書いてみる ①作業フォルダ内に 「css」という名前のフォルダを作成 ②「style.css」という名前のファイルを cssフォルダ内に作り、次ページと同様に記述

  24. None

  25. CSSの適用 <link>：関連する外部ファイルをパスで指定し、リンクさせる <head>タグ内に記述する 終了タグなし 追加

  26. おしまい 次回はCSSについて