LIFE ENERGY
Ⅲ 博学(Expert life)

vol.82 HTML+CSS Operater


ウェブ開発言語、HTMLとCSSについて。このページで多用される「コーディング」とは、コンピューターに指示を与えるための記述のことを指す。

<目次>

【1】ウェブ開発環境を整える

【2】HTMLのコーディング

【3】CSSのコーディング





★更新:2021/10/8
★ページ完成度:14%(公開NG)
★文字数:約1400字(未達成)


キーワード検索


PROMOTION

『これから学ぶHTML/CSS Kindle版』:斎藤新三




ウェブプログラマーの視点で、プログラミングに必要なHTML/CSSを学習するために書かれた初心者向けの本。448ページ。





【1】ウェブ開発環境を整える


HTML+CSSをコーディングするためのソフトや基礎知識

WEB

Ⅰ 専用ソフトを使う

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

特徴は下記の通り。

・<!DOCTYPE html>で始まる
・一部のブラウザでは対応していない
・他の言語やファイルの埋め込みに柔軟に対応可能
・<video>タグが使える
・<font>タグが廃止され、font-sizeなどのCSSに置き換えられた


(2)HTMLの記述方法

●<html>(内容)</html>

ウェブ系言語はすべて<html>で始まり</html>で終わる。<html>の前(コードの先頭)はHTMLのバージョンを意味するDOCTYPE宣言を入れる
※HTML5の場合<!DOCTYPE html>

●辞書登録を活用せよ

コーディングは1文字でも間違えると正しく表示されないため、間違えないようにコードは辞書登録しておくことを推奨。例えば下記の通り。

・<font size="4">→「f」で登録
・style="background-image:url();"→「st」で登録


TEST


【2】HTMLのコーディング


HTML=Hyper Text Markup Language。コンピューターが理解できる文章のこと。

WEB

Ⅰ HEADのコーディング

ページ内部には反映されないが、ページのタイトルや説明文など、検索する段階やサイズの設定などで使われる部分のコーディング。

(1)META系タグ

●<meta name="viewport"content="width=〇">

ページ全体の横幅を指定する。単位はpx。

(2)Script

???

Ⅱ BODYのコーディング

訪問者に目に見える形で公開されるページ内部のコーディング。

(1)枠やまとめて指定

●<td>(内容)</td>

内容を同じテーブルにまとめる

●<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を使う。

名前:



TEST

【3】CSSのコーディング


CSS(カスケーティング・スタイルシート)とは、HTML言語を修飾する言語のこと。

WEB

Ⅰ 文字や背景を装飾する

(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;">



TEST






LINK

Programing Master:プログラミング言語の種類

JavaScript Beginner:動的なウェブサイトを作る

PHP Performer:いいねボタンの設置など

IT系専門職目指すナリ(BUSINESS NOTE3)

プログラミング実践するナリ(BUSINESS NOTE4)

電子書籍とサイト特化ナリ(CREATIVE NOTE6)

Office Job:事務、営業、IT系の職業

Server Transport:プロバイダーやWord Press移行

Affiliate:ネットビジネス代表

Creation:ホームページ制作方法