CSS

HTML・CSSを実際に記事を作りながら覚えていこう

Sponsored Link

Sponsored Link

CSSの基本、それとCSSの芭蕉については以下をご覧ください。

CSS最低の書き方の基本 CSSはどこにあるの?

HTML・CSSの書き方基本のまとめ

HTML・CSSを実際に書きながら使い方を復習してみます。

エディタを用意

まずテキストディタにHTMLで記述をしてみます。

HTMLとCSSを書くにはテキストエディターが必要です。
メモ帳のようなものから高度の機能を備えたものがありますが。

例えばATOMとか。

テキストエディタATOM インストールから基本編集・操作を詳説(初心者向け)

今回はシンプルなのに高機能な「Sublime Text」を使ってみます。
他のものでもよいのですが。
もしご興味があれば使ってみてください。はじめにsublime textのダウンロードページにアクセスします。

すると画面の上に以下のように表示されています。


MacならOS Xをクリック。
Windowsの場合、パソコンが32bitならWindowsを、64bitならWindows 64bitをクリックするとダウンロードが完了します。
ダウンロードしたファイルをクリックするとインストールが開始され。
インストールが完了すればすぐに使えるようになります。

HTML・CSSでの記述の仕方

タグの基本については以下で解説をしておきました。
文書の構造に目印をつけるための記号として使用されるHTMLタグを使用することで。
PCはその目印を認識し。
画面にどのような表示をすればよいかを理解します。

規則はそれほど難しくはありませんので。
もし私のようにHTMLを見ただけで散る肌が立つようなデジタルデバイドの方であってもなんとかなると思います。

HTMLの勉強で押さえておくべきこと①Markup Languageとして使われるタグ

またリンクを埋め込むことで画像やリンク、動画を埋め込むことができます。

HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本

さらに記事を装飾するCSSをHTMLとリンクすることによって記事の装飾ができます。

HTML文書と同じフォルダに入れてあるCSSファイルの名前を「external file.css」にした場合。

以下のように記述して紐付けをします。

<link rel="stylesheet" type="text/css" href="external file.css">

HTMLで上記内容を記述をしたら一つフォルダを作ってそこに保存していきます。

リンクは別として埋め込みたい動画や画像、またはCSSは同じフォルダに入れておく必要があります。
フォルダを作るのはそのフォルダに要素をまとめておくことが反映させるのに必要だからです。
同じ階層に入れておかないと反映されません。
今回は「HTML・CSS練習」と名前をつけておきます。

そこで例えば今回はデスクトップに「HTML・CSS練習」という名前をつけてフォルダを一つ作ってみました。

今回の簡単な記述のために同一フォルダの中に以下のものを入れました。

HTMLとCSS,画像と動画です。

実際にHTML・CSSを使って記事を書いて記事を作ってみよう

これらの素材を使って簡単な、以下のようなページを作ってみました。


HTMLの記述は以下のようにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>

</head>
<body>
  <h1>セキセイインコを飼いました。</h1>
  <p>かわいいよ😁</p>

 <img  src="インコ3.jpg" alt="" width="400" height="533" />
 <br>

 <a href="https://maliajoy.com/" target="_blank" rel="noopener">サイトのトップページ</a>

  <h2>インコはどこで飼う</h2>
  <p>
    眠る以外は部屋で放し飼いです。
  <br>
    <span >私の部屋</span>から隣の部屋に行ってもいいんですが
    <br>
  <span>うんちをする</span>のが困りものですね。
 </p>
</dl>
 <dt>セキセイインコ</dt>
<dd>かわいいかわいいかわいい</dd>
<dt>オカメインコ</dt>
<dd>とってもかわいい</dd>
<dt>コザクラインコ</dt>
<dd>めちゃくちゃかわいい</dd>
</dl>

<table border="1">
<tbody>
<tr>
<th>インコ</th>
<th>特徴</th>
</tr>
<tr>
<td>セキセイインコ</td>
<td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td>
<td>性格は温厚であり人懐っこく長生き</td>
</tr>
<tr>
<td>コザクラインコ</td>
<td>ベッタリと甘えてくるよ</td>
</tr>
</tbody>
</table>

<h2>おまけ</h2>
 インコはこんな動画に興味を持ちました。
  <video src="Atoms - 132321.mp4" controls loop autoplay muted width="400px" height="300px"></video>    

</body>
</html>

以下説明をしていきます。

宣言

まずこの文書は(HTMLまたはXHTMLの)どのバージョンで記述をしているのかということ表すために
今回はHTML5desuga,それを以下のようにして明らかにします。

<!DOCTYPE html>

<html>タグ

次にこのHTML文書は日本語で記述してあることを明らかにします。

<html lang="ja">


<html/>

<head>タグ

<html>の下に<head>タグを入れます。
<head>タグは必ず<html>タグのあと、<body>タグの前に置きます。

<head>タグで囲まれた内容はhtmlファイルの<title>タグ、<meta>タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定するもので。
さらにスタイルシート(CSS)やJavaScriptを外部ファイル化した場合に、<head>タグの中に記述して読み込ませます。

 <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>

</head>

今回は文字化けしないやめにUTF-8という文字コードを指定し。

 <meta charset="UTF-8">

別に作っておいた「external file.css」というCSSに紐づけしてあります。

 <link rel="stylesheet" type="text/css" href="external file.css">

ちなみに紐づけした先のCSSは先程のHTML文書と同じフォルダに収納してあり。

以下のように記述してあります。

charset "UTF-8";
body {background-color: red} 
span{color:yellow}

CSSフィルを開くと確かに以下のようになっています。

つまり、まず文字化けしないように文字コードを指定。
背景は赤。

それから<span>タグで囲まれた部分の文字を黄色に指定しました。

このようにしておくと紐づけされたHTML文書にその設定が反映されます。

後は<title>タグですが。

 <title>鳥は可愛い</title>

<head>タグ内にあるタイトルは記事中ではなく。
お気に入りとか、タブにタイトルとして表示されるものです。

<body>タグ

<body>タグの中が実際に画面に表示されるものです。

今回はここによく使われるものをいくつかピックップして載せておきました。

<h1>セキセイインコを飼いました。</h1>
  <p>かわいいよ😁</p>

見出しは記事をわかりやすくするために重要で。
以下のように数字が小さいほど見出しが大きくなります。

見出し1です。

練習しています!

見出し2です。

練習しています!

実際の表示では以下のようになりました。

次に画像を貼ってみました。

<img src="インコ3.jpg" alt="" width="400" height="533" />

画像はimgタグで終了タグがありません。

タグの中に画像の場所を指定します。
画像は名前をつけてHTML文書と同じフォルダに入れておきます。

src="インコ3.jpg" alt="

サイズを指定します。
幅400px高さ533pxにしてあります。

" width="400" height="533"

次にリンクを張っておきました。

<a href="https://maliajoy.com/" target="_blank" rel="noopener">サイトのトップページ</a>

<a href=”リンクしたいページのURL”>ウエブ上に表記される文字</a>

が基本形です。

サイトのトップページと入れた場合実際の画面では以下のように表示されます。

「a href」はアンカーエイチレフと読み。

aタグは「以下はリンクである」ということを示し。
その次にはどんな種類のリンクかを表す属性タグが続きます。

hrefはhypertext referenceの略で「ハイパーテキストの参照」という意味で別ページに飛ばすリンクを指定するタグです。

今回はこのサイトのトップページに飛ぶようにしましたのでa href=の次に

https://maliajoy.com/

を挿入します。
その他に以下のように記述しています。

target="_blank" rel="noopener"
target="_blank"

はリンクを別ページで開きなさいという指示をします。
<target >タグはリンク先の文書を開くフレームやウインドウを指定するための属性となっており
_blankは開くウインドウは新しいページで開きなさいという指示をします。
しかし現在その脆弱さが指摘されていて。
フィッシング詐欺にかかりやすくなるそうです。
そこで。
それを防ぐために

 rel="noopener"

というものを入れてカバーします。
<rel>タグはrelation(関係)の略で。
noopener(関係ありません)を指定することで。
リンクを指定したページとリンクされたページは関係がないから辿れないようににします、という意味です。

<p>タグ<br>タグspanタグ

次は以下のように記述しました。

<h2>インコはどこで飼う</h2>
  <p>
    眠る以外は部屋で放し飼いです。
  <br>
    <span >私の部屋</span>から隣の部屋に行ってもいいんですが
    <br>
  <span >うんちをする</span>のが困りものですね。
 </p>

すると実際の表示は以下のようになります。

<h2>は先程も説明したとおり見出しタグです。

Pタグは「Paragraph」の略で、「段落」を意味するタグです。

<p>~</p>まで一塊になります。
<br>タグは改行をしたい場合に使います。
一般的には<diiv>タグで囲うとそのまとまりの後は改行されますので
そちらを使うほうが多いとおもいます。
<span>タグはそれ自体では意味を持ちませんが。
そのタブに含まれるフレーズをグループ化することができます。
<diiv>タグも同じような働きをし。
<span>タグと<diiv>タグはまとまりを作るためのタグで。
これはCSSの活用のときに重要な働きをします。
今回はCSSの方に

span{color:yellow}

として<span>タグに囲まれた部分の文字は「黄色」にすると指定しておきました。
すると確かにその部分が黄色に表示されています。


この様に<span>タグはCSSで範囲を指定するときによく使われます。
同じような利用法としてclassとidがありますが。
これはまた別のHTML文書のところで解説をします。

リストを作成する<ol>・<ul>・<li>、<dl>・<dt>・<dd>

リストを付けるタグは4種類あります。

<li></li>はlist itemの略で<ol>?</ol>(順番のあるリスト)あるいは<ul>?</ul>(順番のないリスト)内の各項目を作成するときに使用します。

今回は説明付きリストを記述してあります。

<dl>はDefinition Listの略で、<dl>~</dl>の範囲が定義リストであることを表します。

定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。

<dt>とは「definition team」の略で、定義語を表すタグです。

<dd></dd>は「definition description」の略で、定義の説明を表すタグです。

定義リストを表す<dl>タグとその説明を表す<dd>タグを組み合わせて定義リストを記述します。

<dl>
<dt>セキセイインコ</dt>
<dd>かわいいかわいいかわいい</dd>
<dt>オカメインコ</dt>
<dd>とってもかわいい</dd>
<dt>コザクラインコ</dt>
<dd>めちゃくちゃかわいい</dd>
</dl>

すると以下のように表示されます。

テーブルを作成する<table>・<tr>・<td>・<th>

次に表を作ってみました。

テーブルを作成するには以下の4つのタグが必要です。
table:表全体をはさむタグ。<table>~</table>の範囲が表になります。
tr:Table Row(テーブル行)の略。このタグを使用した数だけ行が追加されます。
th:Table Headerの略。テーブルの見出しのセルに使用します。

td:Table Dataの略。trの中でセルになります。表の中身が記述されるセルとなります。

また<table border=”1″>のborderは表の枠線の太さを決めるもの でこの場合線の太さを1pxに指定しています。

<table border="1">
<tbody>
<tr>
<th>インコ</th>
<th>特徴</th>
</tr>
<tr>
<td>セキセイインコ</td>
<td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td>
<td>性格は温厚であり人懐っこく長生き</td>
</tr>
<tr>
<td>コザクラインコ</td>
<td>ベッタリと甘えてくるよ</td>
</tr>
</tbody>
</table>

実際の表示は以下のようになります。

動画の埋め込み

<h2>おまけ</h2>

 インコはこんな動画に興味を持ちました。
  <video src="Atoms - 132321.mp4" controls loop autoplay muted width="400px" height="300px"></video>    

実際の表示はこんな感じになります。

動画埋め込みタグにはifarmeタグとvideoタグがあります。
YouTubeの動画はifarmeタグを使っていますが。
ifarmeタグは廃止になるということです。
なのでvideoタグが使えるようになっていれば良いと思います。
HTML文書と同じ階層(フォルダ)に動画ファイルを用意し。
その名前を入れればそれだけでOKです。

<video src="動画の名前" controls></video>

が基本の形になります。

controlsはコントロールパネルを表示します。

これがないと不便ですので大概の場合は入れていきたいものです。

controlsのあとに autoplay(自動再生) loop(繰り返し再生)width/height(横幅と高さを指定する)などの属性を付け加えることができます。

まとめ

HTML・CSSは実際に作業をしながら覚えていくのが一番楽だと思います。

次にCSSの使い方を中心にしたものを作りながらCSSのセレクタとプロパティと値の基本についてやっていきたいと思います。

次の記事

CSS セレクタとプロパティと値の基本まとめ

Sponsored Link

Sponsored Link

関連記事

  1. テキストエディタATOM インストールから基本編集・操作を詳説(…
  2. CSS marginとpadding 余白の指定方法 基礎
  3. CSS WEBアイコンフォントの使い方 Font Awesome…
  4. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  5. CSS最低の書き方の基本 CSSはどこにあるの?
  6. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  7. HTMLの勉強で押さえておくべきこと①Markup Langua…
  8. CSS positionの使い方

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. 【Basics of site construction】ワードプレスで日付を消す方法
  2. サーバって何?どのレンタルサーバーを選べばよいのか?
  3. WordPressのフォルダ構成とバックアップの仕方
  4. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  5. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  6. WordPressエディタ「Gutenberg」の使い方 総まとめ
  7. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  8. Windows10でブルーライトカットの設定 コントロールパネルの使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl 便利で楽しい カスタムオブジェクトの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtlのすべてのエフェクトについての解説⑤透過・透明化エフェクト クロマキー・カラーキー・ルミナンスキー
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)

ソフト・アプリの使い方

PAGE TOP