2021-02-08に投稿2024-04-17に更新

img(画像)タグ

自己完結型のタグ
画像へのパスはホットリンクを使うこともできる
- ホットリンク = 動的に他のウェブ上の画像をリンクする

1	`<img src="画像へのパス">`

サイズ変更(ピクセル数を指定)

width="" : 幅を指定
height="" : 高さを指定

小ネタ

上下でイメージを配置したい場合、を使うといい

1
2

<p><img src="image.png" width="100" height="40"></p>
<img src="https://1.bp.blogspot.com/-QNMuJ-k-bYU/X68bIi2gjjI/AAAAAAABcUs/39kmQwXcZPM3w4s8O1vrcIswGqd2r6EWgCNcBGAsYHQ/s400/fantasy_unicorn_rainbow.png">

2021-02-07に投稿2024-04-17に更新

段落と改行について

p(Paragraf)タグ

段落を表現するためのタグ

1 2	`<p>これは１つ目の段落です</p> <p>これは２つ目の段落です</p>`

br(Line Break)タグ

改行を表現するためのタグ

1	`改行したい場合<br>を入れる`

使用例

コード

<!DOCTYPE html>
<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<p>これは１つ目の段落です。好きな食べ物はラーメンです。<br>ここには改行が入ることが望ましいです</p>
		<p>これは2つ目の段落です。嫌いな食べ物はカマキリです。</p>
		何も指定指定ない１
		何も指定指定ない2
		何も指定指定ない3
		何も指定指定ない4
		<p>あ<br>い<br>う<br>え<br>お</p>
	</body>
</html>

結果

これは１つ目の段落です。好きな食べ物はラーメンです。
ここには改行が入ることが望ましいです

これは2つ目の段落です。嫌いな食べ物はカマキリです。

何も指定指定ない１ 何も指定指定ない2 何も指定指定ない3 何も指定指定ない4

あ
い
う
え
お

2021-02-06に投稿2024-04-17に更新

リストについて

ul(番号なしリスト)タグ

ul = Unorderd List
<ul></ul>で指定するのはリストのタイトル

li(項目)タグ

li = List Item
<li></li>リスト内の項目を記述する

<ul>曜日
	<li>月</li>
	<li>火</li>
	<li>水</li>
	<li>木</li>
	<li>金</li>
</ul>

ol(番号付きリスト)タグ

ol = Ordered List
基本はul(番号なしリスト)と同じだが、オプションをつけることができる

オプション

複数のオプションを同時に指定も可能

<ol start="番号"> : 振られる番号のスタート数字を変更する
<ol reversed> : 番号を逆順にする
<ol type=""> : 番号の表現を変える
- 1,A,l,a,i

li(項目)タグ

li = List Item
<li></li>リスト内の項目を記述する

<ol start="4" reversed>曜日
	<li>月</li>
	<li>火</li>
	<li>水</li>
	<li>木</li>
	<li>金</li>
</ol>

2021-02-05に投稿2024-04-17に更新

テキストレイアウトについて

参考URL

w3schools.com

strong(太文字)

で表現をすることもできるが、HTML5からは、タグが推奨されている
- 人が目視で確認する時に、の方が読みやすいから

1	`これは<strong>太文字</strong>だよ`

em(イタリック)タグ

で表現することもできるが、HTML5からは、タグが推奨されている
- em = Enphasize

1	`これは<em>イタリック文字</em>だよ`

ins(下線)タグ

で表現でこともできるが、HTML5からは、<ins></ins>タグが推奨されている
- ins = insert

1	`<p>これは<ins>下線</ins>だよ</p>`

sup(上付き文字)タグ

sup = Superscript

1	`<p>これは<sup>上付き文字</sup>だよ</p>`

sub(下付き文字)タグ

sub = Subscript

1	`<p>これは<sub>下付き文字</sub>だよ</p>`

del(打ち消し)タグ

del = delete

1	`<p>これは<del>打ち消し</del>だよ</p>`

hr(区切り線)タグ

自己完結型(</hr>がいらない)
勝手に改行が入る

hr = Horizontal Rule

1	`ここから下に区切り線が入る<hr>ここから上に区切り線が入る`

mark(ハイライト)タグ

mark = marking

1	`<p>これは<mark>ハイライト</mark>だよ</p>`

2021-02-05に投稿2024-04-17に更新

HTMLの概要

HTMLの特徴

全てのコードはタグで囲まれている

1
2
3

<body>
  <title>タイトル</title>
</body>

HTMLのサンプルサイト

サンプルサイト

- <body></body>      : 文章の本文
- <div></div>        : division(領域)画面上の領域を分ける
- <h~></h~>          : Header(タイトル)~部分は数字が入り、数字によってタイトルのサイズが変わる
- <p></p>            : Paragraf(段落)
- <a href="xxx"></a> : リンク

レイアウト関係

- <head></head>      : レイアウトの記述
- <title></title>    : ブラウザのタブに表示される名前
- <style></style>    : 文字やレイアウトの装飾を指定する部分
	- body{}           : <body></body>に対するレイアウト設定
	- div{}            : <div></div>に対するレイアウト設定
	- a:link,a:visited : リンクに対する書式設定
	- @media           : メディアクエリー（デバイスによって切り替える)レスポンシブデザインのための記述

メタ

1
2
3

- <meta charset=""/>    : 文字コードの指定
- <meta http-equiv="" content=""/>	: ページの種類の指定 
- <meta name=""content=""/>         :

img(画像)タグ

サイズ変更(ピクセル数を指定)

小ネタ

p(Paragraf)タグ

br(Line Break)タグ

使用例

コード

結果

ul(番号なしリスト)タグ

li(項目)タグ

ol(番号付きリスト)タグ

オプション

li(項目)タグ

参考URL

strong(太文字)

em(イタリック)タグ

ins(下線)タグ

sup(上付き文字)タグ

sub(下付き文字)タグ

del(打ち消し)タグ

hr(区切り線)タグ

mark(ハイライト)タグ

HTMLの特徴

HTMLのサンプルサイト

タグ

基本

文章関係

レイアウト関係

メタ

カテゴリ

最近の記事

アーカイブ

タグ

広告