 |
 |
Ⅲ 博学(Expert life) 41:HTML+CSS=ウェブ基礎 -Markup Cording- ウェブ開発言語、HTMLとCSSについて。このページで多用される「コーディング」とは、 コンピューターに指示を与えるための記述のことを指す。 <目次> 【1】ウェブ開発環境を整える 【2】HTMLのコーディング 【3】CSSのコーディング  ★更新：2022/11/24 ★ページ完成度：50% ★文字数：約5000字(OK)   『これから学ぶHTML/CSS Kindle版』：斎藤新三 
 ウェブプログラマーの視点で、プログラミングに必要なHTML/CSSを学習するために書かれた初心者向けの本。448ページ。 |
【1】ウェブ開発環境を整えるHTML+CSSをコーディングするためのソフトや基礎知識 Ⅰ 専用ソフトを使う HTMLを記述しサーバーにアップロードするためのソフト (1)ホームページビルダー：(株)ジャストシステム 初心者向けソフト。 ●ホームページビルダー22 2020年4月発売 (2)Dreamweaver:Adobe 自由なデザインのサイト制作ができる本格的なWEB制作ソフト。HTMLコードを自分でいじる必要があるので、初心者には厳しい。 (3)シリウス：(株)ACES ※シリウス公式サイト HTMLやCSSの知識がなくても簡単にホームページを作れる。アフィリエイトやSEO機能が充実しており、 商品情報をAmazonなどから自動で取得したり、アフィリエイトリンクの張り替えに便利な 「モジュール」を無制限に作成可能。 Ⅱ コーディング基礎知識と技術 HTMLの歴史や記述方法。 (1)HTMLのバージョン 種類は下記の通り。 ・HTML4（1997/12～） ・XHTML1.0（2000～） ・HTML5（2014/10～） ●HTML4 特徴は下記の通り。 ・対応しているブラウザが多い ●XHTML1.0 特徴は下記の通り。 ・対応しているブラウザが多い ●HTML5（HTML Living Standard） 特徴は下記の通り。 ・<!DOCTYPE html>で始まる ・一部のブラウザでは対応していない ・他の言語やファイルの埋め込みに柔軟に対応可能 ・<video>タグが使える ・<font>タグが廃止され、font-sizeなどのCSSに置き換えられた ※HTML5が2021/1/28に廃止→HTML Living Standardに仕様を一本化 (2)HTMLの記述方法 ●<html>（内容）</html> ウェブ系言語はすべて<html>で始まり</html>で終わる。<html>の前（コードの先頭）はHTMLのバージョンを意味するDOCTYPE宣言を入れる ※HTML5の場合<!DOCTYPE html> ●辞書登録を活用せよ コーディングは1文字でも間違えると正しく表示されないため、間違えないようにコードは辞書登録しておくことを推奨。例えば下記の通り。 ・<font size="4">→「ｆ」で登録 ・style="background-image:url();"→「st」で登録 |
【2】HTMLのコーディングHTML=Hyper Text Markup Language。コンピューターが理解できる言語のこと。ウェブサイトやアプリの開発に使われる。 Ⅰ HEADのコーディング ページ内部には反映されないが、ページのタイトルや説明文など、 検索する段階やサイズの設定などで使われる部分のコーディング。 (1)META系タグ ●<meta name="viewport"content="width=〇"> ページ全体の横幅を指定する。単位はpx。 (2)Script系タグ ●<script>（内容）</script> 実行できるコードやデータを埋め込むために使用。いわゆるJavaScript（※）。例えば下記の通り。 ・Google Adsenseの広告コード ・Google Analyticsの計測コード ※JavaScript：ウェブ上で複雑な機能をできるようにするプログラミング言語 Ⅱ BODYのコーディング 訪問者に目に見える形で公開されるページ内部のコーディング。 (1)枠やまとめて指定 ●<table width="〇">（内容）</table> <tr>や<td>などと組み合わせ、表を作成。BODYの先頭と最後に入れる。 ●<tr>（内容）</tr> table row。各表の横方向を指定する。 ●<td>（内容）</td> table data。各表の内容を同じテーブルにまとめる。 ●<span>（内容）</span> ●<div>（内容）</div> 内容をグループ化する ・<span class="〇〇"> ・<div class="〇〇"> 「class」は分類という意味 ●<p>（文章）</p> 段落を指定する (2)FONT系タグ 文字のサイズを変えたり、太くしたりする。 ●<font size="〇">（文章）</font> ●<span style="font-size:〇pt;">（文章）</span> 文字のサイズを指定する。いつくか指定方法がある。上の例では単位がなく、 〇には1～7 までの整数で指定する。これは現在のフォントサイズに対し「＋」か「-」かで指定するというもの。 下の例はCSSだが、色んな単位で指定可能。WordPressでは、デフォルトではptが使われている。単位の意味は下記の通り。 ・〇pt：ポイント。 ・〇px：ピクセル ・〇mm：ミリ ・〇cm：センチ ・〇in：インチ ●<b>（文章）</b> ●<strong>（文章）</strong> 文字を太くする。<b>が単に文字を太くするだけに対し、 <strong>はSEO対策に有効という違いがある。但し、使いすぎるとペナルティを受ける。 ●（文章）<br>（文章） 改行する ●<i>（文章）</i> 文字を斜めにする ※サンプル ●<s>（文章）</s> ●<del>（文章）</del> 取り消し線を入れる ※ ●<u>（文章）</u> 下線を入れる ※サンプル (3)文字の色をつける：<font COLOR="〇"> 〇の部分に色を意味するコードを入れると、文字の色を指定できる。 コードは#から始まり、以降記号6文字で構成される。原色などは英単語でも指定できる。例えば下記の通り。 ・#000000（black）＝黒 ・#ffffff（white）＝白 ・#ff0000（red）＝赤 ・#0000ff（blue）＝青 ・#00ffff（aqua）＝水色 ・#00ff00（lime）=黄緑 ・#ffff7b＝薄い黄色 (4)画像や動画を挿入する ●<img src="（HTMLファイル名）/（画像の名前）"width="〇"height="〇"border="〇"> 画像を挿入する。挿入するにはまず画像をHTMLファイルに入れておく。HTMLファイルや画像の名前は自分で決めたもので、 次の「width=画像の横サイズ」 「height=画像の縦サイズ」「border=画像の枠サイズ」になる。 ●<video> (5)ボタンを挿入し、ウィンドウを表示させる ●<button type="submit"onClick="alert('〇〇');">（ボタンの中の文字や画像）</button> ボタンを作成し、クリックしたらポップアップウィンドウを表示させる。 submitとは「送信」の意味。alertのあとの〇〇には、ポップアップウィンドウで表示される文字を入れる。 ※参考サイト ・<BUTTON>-HTMLクイックリファレンス (6)リンク系タグ 文章や画像をクリックすると、他のページやページ内部の別の部分に移動させるリンクをつける。 ●<a href="（URL名）">（文章や画像）</a> 他のページへのリンクを設置する。リンク先はサイト内ページでも外部ページでもOK。 ●<a href="#〇">（リンク元の文字や画像）</a>（～リンク元からリンク先の間～）<h2 id="〇">（リンク先の文字や画像）</h2> 同じページ内へのリンクを設置する。〇の部分には適当な文字を入れる（123、abcなど）。 (7)フォームの導入 ●<form></form> ウェブサーバーに情報を送信する。 ●<input type="text" style="width:〇px;height:〇px;"> inputとは入力窓のこと。〇は入力窓の横幅を指定する。縦幅を指定するには、CSSを使う。 名前： |
【3】CSSのコーディングCSS（カスケーティング・スタイルシート）とは、HTML言語を修飾する言語のこと。 Ⅰ 文字や背景を装飾する (1)文字のサイズや色、太さを指定する ●<span style="font-size:〇pt;font-weight:〇;color:〇;">（文字）</span> HTML5では<font>タグは使わず、<span style>でまとめて指定する。font-weightは文字の太さを示す。 ●font-family:'〇' fontの書体を指定する。書体の例は下記の通り。〇の部分に書体名を入れる。 ・HG明朝E ・HGP創英角ポップ体 ・メイリオ (2)文字の背景に色や画像を入れる 見出しに背景をつけたい場合は、<h2 style=～>のように入れる必要がある。見出しではない太字の背景に色や画像を入れたい場合は、<b style=>～と入れる。 ●<h2 style="background-color:〇">（文字）</h2> 見出しの文字の背景に色をつけることができる。〇の中に色を指定する7文字のコード(#～）を入れる。 ●<h2 style="background-image:url(HTMLファイル名/画像名);">（文字）</h2> 見出しの文字の背景に画像を挿入する。〇の中にパソコンの中に保存された（フォルダ名/画像名）を入れれば挿入できる。jpgなど拡張子は必ず入れる。 ●<h2 style="style=font-size:〇px;font-weight:700;background-image:url(HTMLファイル名/画像名);">（文字）</h2> 見出し文字を太くし、かつ背景画像を入れる (3)テーブルの背景色や画像などの指定 ●<td style="background-color:#〇;">（テーブル内のコンテンツ）</td> テーブル内の背景色を指定する。 ●<td style="background-image:url(HTMLファイル名/画像名);">（テーブル内のコンテンツ）</td> テーブル内の背景画像を指定する ●<td style="text-align:left;"> テーブル内の文字を左揃えにする。 Ⅱ 動きをつける (1)カウンター：counter ●counter-increment incrementとは「増加」の意味。カウンターの値を進める (2)フォームの縦幅を指定する ●<input type="text" style="width:〇px;height:〇px;">    |
|
|
