0 / 0

html-logoHTML基礎--要素名

要素名 読み 意味 記入例 &備考
!DOCTYPE ドクタイプ Document Type…ドキュメント タイプ
文書型宣言の定型文 		<!DOCTYPE html >
html エイチ ティー エム エル hyper text markup language
ハイパーテキストマークアップランゲージの略です。 		<html lang="ja">
head ヘッド 情報を入力する部分です。
body ボディー ブラウザに表示される部分です。
meta メタ メタ（上からの）情報をつける部分です。
<head >に入れます。 		<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" >
title タイトル ページのタブに表示するものです。
<head >に入れます。 		< title >トップページ </ title >
link リンク 主にスタイルシートを紐づけるための鎖(link)。
<head >に入れます。 		<link rel="stylesheet" href ="css/style.css">
div ディブ division…区切りの意味。ブロックの汎用的な括りです。 ブロックは 縦 に並び、 サイズ指定が可能 です。
初期値は親要素の幅 100%まで広がり ます。
span スパン spanも区切りの意味。インラインの汎用的な括りです。
 インラインは 横 に並び、サイズ 指定ができません 。
要素幅に なります。
h1 エイチワン heading1 ヘディング1の略です。見出し1です。
p ピー paragraph パラグラフの略です。段落です。 pをpで括ることはできません。つまり
<p >
   <p ></p > 
</p >
は不可能です。
header ヘッダー ページに表示する上部の枠です。
article アーティクル ページに表示する大枠の記事領域の枠です。
footer フッター ページに表示する下部の枠です。
section セクション articleよりレベルが低い括りです。
articleの中をさらに区切りたいときに使えます。
main メイン articleよりもレベルが高い枠です。
articleをさらに括りたいときに使えます。
aside アサイド 主題とは別のサブコンテンツ用の枠です。
articleに入れてもいいし、外側に置いてもよし。
nav ナビ navigation ナビゲーションの略です。
メインメニューが入ります。
<header >に入れるのが一般的。 		<header >
  <img src="...">
   <nav >
    <ul >...</ul >
   </nav >
</header >
ul ユーエル unordered list（アンオーダードリスト）の略。
番号なしのリストです。 		<ul >
  <li ></li >
  <li ></li >
  <li ></li >
</ul >
ol オーエル ordered list オーダードリストの略です。
番号付きのリストです。
li エルアイ list リストの略です。リストの項目です。
a エー anchor アンカーの略です。
別箇所にジャンプするハイパーリンクを作ります。 		<a href= "index.html">トップページへ </a >
<a href=" # point1">ポイント1へジャンプ </a >※
※<■ id= "point1">...</■>のidの箇所へジャンプします。
strong ストロング 強調の意味から。重要な語句を括るものです。
small スモール 小さいの意味から。注釈を示します。 < small >
  Copyright &copy; XXX.All Rights Reserved.
</ small >
address アドレス 住所を示します。
img アイエムジー image イメージの略です。画像の領域を作ります。 <img src="image/picture.png" alt="" width="200" height="50">
video ビデオ 動画の領域を作ります。 <video src ="video/movie.mp4" controls loop muted autoplay >
iframe アイフレーム inline frame インラインフレームの略です。
マップやyoutube等の別ページコンテンツを
埋め込むために使います。インライン形式です。
<iframe src ="別コンテンツのURL"></iframe >
table テーブル 表の領域を作ります < table >
  <tr >
    <th ><th >
    <td ><td >
  </tr >
</ table >
tr ティーアール table row テーブルローの略です。
表の行を表します。
td ティーディー table data テーブルデータの略です。
表のデータセルを表します。
th ティーエイチ table heading テーブルヘディングの略です。
表の見出しセルを表します。
caption キャプション 表のタイトル（表題）を入れます。
任意ですが、つける場合は <table >タグの
直下に置く決まりです。 		<table >
  < caption >会社概要 </ caption >
</table >
time タイム 日時を表す場合に使用することがあります。
属性にdatetime="xxxx-xx-xx"の形をとります。 		<time datetime= "2025-01-01">2025年元旦 </ time >
form フォーム formは申し込み用紙を意味します。
ユーザー入力フォーム領域を作ります。
< form action="#" method="POST">...</form >※
※ #は動かすPHP等がないときの「とりあえず」の記号
input インプット フォームの入力コントロールを作ります。
type属性でいろいろなものができます。 		<input type="text" >
<input type="submit" value="送信する" >※
※ value属性はinputに表示する値です。
textarea テキストエリア 複数行の入力エリアを作ります。 < textarea ></ textarea >
label ラベル inputの見出しとinput自体を関連付けるために使います。 < label >
  お名前 <input type="text">
</label >

<label for="onamae" >お名前 </label >
<input id="onamae" >
br ビーアール break ブレイクの略です。改行を表します。

html-logoHTML基礎--属性

属性名 読み 意味 記入例 &備考
rel レル relation…リレーション 関係
rel="stylesheet"でスタイルシート関係という意味です。 		<link rel="stylesheet" href="css/style.css">
href エイチレフ hyper reference…ハイパーリファレンス 越えて参照する
別ページデータを参照して見に行くときに使います。 		<link rel="stylesheet" href ="css/style.css">
<a href= "index.html">
src エスアールシー source…ソース 供給源
外部データ素材をページに埋め込んで表示するときに。 		<img src ="xxx.png">
<video src ="xxx.mp4">
<iframe src ="xxx.html"></iframe >
<script src ="xxx.js"></script >
class クラス 要素に特定の目印を付けます。
1ページに何箇所でも同じ名前を付けられます。 		<h1 class ="sub-h1">
<div class ="container"></div >
<span class ="point"></span >
id   アイディー 要素に特定の目印を付けます。
1ページに同じ名前が重複してはいけません。 		<h1 id= "sub-h1"></h1 >
<input id= "usermail">
alt オルト alternative…オルタナティブ 代わり
画像の代替テキスト用に使用します。 		<img src="xxx.png" alt="ロゴ画像">
width ウィドゥス
（ウィッス） 		width…幅
画像やビデオ、インプットやテキストエリアの幅を指定します。
pxの単位があるときは省略します。
cssの指定の方が優先されます。 		<img width= "200">
<video width= "300">
<input width= "300">
height ハイト height…高さ
画像やビデオ、インプットやテキストエリアの高さを指定します。
pxの単位があるときは省略します。
cssの指定の方が優先されます。 		<img height= "200">
<video height= "300">
<input height= "300">
charset チャーセット charactor set…キャラクターセット 文字コード
最初の <meta >要素に使って文字コードを指定するためだけです。 		<meta charset= "UTF-8">
name ネーム タグに付ける名前の指定
<meta >要素で情報の種類を指定するため
<input >要素・ <textarea >要素でバックエンドの
プログラムに内容を送信するために使います。 		<meta name= " description" content="要約文章を書きます。">
<meta name="viewport" content="width=device-width" >
<input name = "username">
<textarea name = "usercomment"></textarea >
datetime デートタイム date time…日付
<time >要素に使って日付のデータを明示します。
 <time datetime="2024-12-30" >2024年12月30日 </time >
target ターゲット <a >要素でリンク先を指定したいときに使います。
値を_blankにすると別タブで開けます。 		<a target="_blank" >新しいタブで開く </a >
type タイプ <input >要素に使って、フォームコントロールの形を作ります。 <input type="text" >
<input type="submit" >
<input type="email" >
<input type="tel" >
<input type="checkbox" >
<input type="radio" >
placeholder プレースホルダー place holder…場所を占めるもの
<input >内に特定のガイド文字を出すときに使います。 		<input type="text" placeholder="全角で入力" >
required リクワイアード required…要求された
<input >要素や <textarea >要素に使って、「必須」を表します。
 <input type="text" required >
<textarea required ></textarea >
colspan コルスパン column span…列（カラム）方向（縦の流れ）を括る
<td >や <th >に付けてテーブルセルを横に結合します。
結合されるセルは削除します。 		<td colspan="2" >0120-111-1111 </td >
<td >0120-111-1111 </td >
rowspan ロースパン row span…行（ロー）方向（横の流れ）を括る
<td >や <th >に付けてテーブルセルを縦に結合します。
結合されるセルは削除します。 		<td rowspan="2" >0120-111-1111 </td >
....
<td >0120-111-1111 </td >
scope スコープ scope 照準
thに付けることで、その見出しに関連するデータが
横方向（row）に並んでいるのか、
縦方向（col）に並んでいるのか
を明記します。（つけないことも多々あります） 		<th scope="col" >
<th scope="row" >
poster ポスター poster…壁紙
<video >要素のサムネイルの指定です。 		<video src="" poster ="xxx.jpg">
controls コントロールズ controls…制御
<video >要素の再生コントロールを表示します。 		<video src="" poster="xxx.jpg" controls >
loop ループ <video >要素の繰り返し再生の指定です。 <video src="" poster="xxx.jpg" controls loop >
autoplay オートプレイ <video >要素の自動再生の指定です。 <video src="" poster="xxx.jpg" controls loop autoplay >
muted ミューテッド <video >要素の消音の指定です。
 <video src="" poster="xxx.jpg" controls loop autoplay muted >

css-logoCSSの基礎--プロパティ

プロパティ名 読み 意味 記入例 &備考
color カラー 文字の色を指定します p{
   color : #ff0000;
}
font-size フォントサイズ 文字の大きさを指定します。 body{
   font-size : 16px;
}
font-weight フォントウェイト 文字の太さを指定します。 p{
   font-weight : bold;
}
※boldで太字
font-family フォントファミリー 文字の種類を指定します。 body{
   font-family :"Roboto","Noto Sans JP",sans-serif;
}
※前から順に"第一候補","第2候補",...のように書きます。
どれにも該当しないときは
sans-serif（ゴシック）かserif（明朝）かを選びます
width ウィドゥス 要素の幅を指定します。 div.box{ ※
   width : 90%;
}
※ boxというクラス名がついたdivという意味のセレクターです。
max-width マックスウィドゥス 要素の最大幅を指定します。 div.box{
  width: 100%;
   max-width : 1200px; ※
}
※ 普段は親要素いっぱいまで広がるが、1200pxは越えない
height ハイト 要素の高さを指定します。
 article img{ ※-1
  width: 500px;
   height : auto; ※-2
}
※-1 articleの中のimgを指します。
※-2 autoを指定すると横幅に合わせて縦横比を固定調整します。
border ボーダー 境界線です。
border-top / border-right /
border-bottom / border-left
それぞれがあり、一括指定は
borderです。 		p{
   border: 1px solid #000000;
}
h1{
  border-bottom: 1px dashed #ffffff;
}
border-radius ボーダーレイディアス 角の丸みです。pxで指定すると綺麗な角丸になります。
半角スペースで区切りながらそれぞれの角を個別に指定することもできます。 		p{
   border-radius: 12px;
}
div{
   border-radius:30px 30px 5px 5px ;※
}
※ 順に 上 右 下 左 の時計回りです。
padding
 パディング
※pad…詰め物 		境界の内側の詰め物（余白）です。
padding-top / padding-right /
padding-bottom / padding-left
それぞれがあり、一括指定は
paddingです。 		span{
   padding : 10px 5px 12px 5px; ※-1
}
div{
  padding: 1em; ※-2
}
※-1 余白を 上 右 下 左 の時計回りで一括指定します。
※-2 余白を一括で1文字分（1em）にします。
margin マージン 境界より外側の要素同士の余白です。
margin-top / margin-right /
margin-bottom / margin-left
それぞれがあり、一括指定は
marginです。 		div.box{
  width: 960px;
   margin : 0 auto ; ※
}
marginを上下0、左右autoで割り振っています。
こうするとブロック形式要素を中央揃えできます。
box-sizing ボックスサイジング パディングとボーダーを要素幅に含めて、幅の計算をしやすくします。 *{
   box-sizing :border-box;
}
※*は全ての要素（全称セレクター）を意味します。
text-align テキストアライン テキストの揃え方を指定します。
left / center / right / justify（両端揃え）
があります。 		p{
   text-align : center; ※
}
※text-alignはインライン形式要素（文字や画像）
を揃えます。揃える要素の親ブロックに書きます。
display ディスプレイ 要素の表示形式を切り替えられます。
block / inline / inline-block /
flex / none
をよく使います。 		nav li{
   display : inline; ※-1
}
section{
   display: flex ; ※-2
}
※-1 要素が横並びになります。
※-2 子要素を柔軟にレイアウトできる
フレックスボックスになります。
position ポジション 要素を配置する際に使用します。
親要素にrelative（レラティブ）…相対
子要素にabsolute（アブソリュート）…絶対
を書くことで、浮かせて重ねて配置できます。
子要素にはtop（かbottom）、left（かright）を指定します。 		section{
   position: relative;
 }
section p{
   position: absolute;
   top : 10%;
   left : 30%;
}
z-index ゼットインデックス positionで浮いた要素同士の重ね順の指定です。
0が初期値で、整数値で示し値が大きい方が上に来ます。 		.box1{
  position: absolute;
   z-index : 1;
}
.box2{
  position: absoute;
   z-index : 2;
}
float フロート float …浮く
要素がその場で浮き上がり、親要素の左か右に配置されます。
重なって隠れた要素は自動的によけます。 		aside{
   float : right;
}
footer{
  clear: both;
}
clear クリア floatした要素に対しての滑り込みを止めます。
だいたいはclear: both;を使います。 		p{
   clear: both;
}
background-image バックグラウンドイメージ 背景画像の指定です。
値はurl()として()内にファイルパスを入れます。 		header{
   background-image: url( ../images/header-bg.png ) ;
}※
※ ファイルパス
「../」でフォルダから上の階層に出る
「フォルダ名/」でそのフォルダの中に入る
background-repeat バックグラウンドリピート 背景画像の繰り返しです。
no-repeatで繰り返さない指定です。 		p{
  background-image: url(...);
   background-repeat: no-repeat;
}
h1{
  background-image: url(...);
   background-repeat : repeat-x;
}
background-size バックグラウンドサイズ 背景画像のサイズです。
coverで領域を埋めつくします。
containで領域内にすべてをおさめます。 		p{
  background-image: url(...);
  background-repeat: no-repeat;
   background-size: cover;
}
background-position バックグラウンドポジション 背景画像の位置です。
横位置 縦位置　というように
半角スペースで区切って指定します。
centerと書けば画像の中心に合わせます。
left right top bottom等もあります。 		p{
   background-poisiton : center 20px;
}
text-decoration テキストデコレーション テキストの装飾を指定します。
none ...装飾なし
underline ...下線
line-through ...取り消し線
overline ...上線 		p{
   text-decoration : underline;
}
a{
   text-decoration: none;
}
scroll-behavior スクロール ビヘイビア ページ内リンクのクリック時のスクロール
の動きの制御をします。
基本はhtml要素に書きます。 		html{
  scroll-behavior: smooth;
}
aspect-ratio アスペクト レシオ aspect...縦横の ratio…割合
要素の縦横比を制御できます。
divなど、画像と違って縦横比が決まっていないものの縦横比固定に効果的です。 		div{
  width:90%;
   aspect-ratio: 1 / 2; ※
}
※divの縦横比を1：2にしています。
object-fit オブジェクト フィット object…物体 fit…適応させる
画像や動画などを領域に合わせる指定です。
レスポンシブデザインに強力な効果が出せます。
section img{
   width: 100%; ※
  height: 350px;
  object-fit: cover;
}
※ 本来widthとheightは画像自体の幅と高さです
よってこのままだと画像の縦横比が変わってしまいます。
object-fit: coverとすることで、
widthは画像を 表示する領域の 横幅、
heightが画像を 表示する領域の 高さになります。
画像はその領域をカバーする（埋めつくす）ように縦横比を保ったまま表示されます。
transform トランスフォーム 変形を意味します。
移動・拡大/縮小・回転・歪みがあります。
translate…移動 %単位を使うと要素自体サイズが基準になります。
translate(100%,0)で、要素自体の幅の分右に移動します。
scale…拡大縮小 1.5で150%
rotate…回転  単位は度を表すdeg（デグ：ディグリー）を使うのが一般的です。
 transform : translate ( 100%,50% ) ;
 右に要素幅分、下に要素の半分分移動します。
transform : scale ( 1.5,1.5 ) ;
 横・縦ともに150%拡大 数値が同じときはscale(1.5)のようにも書けます。
transform : rotate ( 45deg ) ;
 45度回転します。
transform : rotate(45deg) scale(2);
 45度回転して2倍に拡大します。
transition トランジション 変化の推移を表します。
サイズや色等、プロパティが変化する予定の要素にtransition:1s;と書くと、1秒かけてアニメーションして変化するようになります。
正確にはtransitionプロパティは以下のプロパティの一括指定です。
transition-property…トランジション プロパティ
どのプロパティを推移させるかを選択します。初期値はall
transition-duration
何秒かけて変化させるかを指定します。指定が必須です。
transition-timing-function
どのような変化パターンかを指定します。初期値はease
transition-delay
変化が始まるまでの遅延を指定します。初期値は0s

transition-durationの値のみ初期値がないので指定が必須です。 		transition : 1s;
1秒かけて変化します。
（transition: all 1s ease 0s;の省略系です。）

transition : height 0.5s linear 0s;
高さのプロパティを0.5秒かけて直線的な変化パターンで遅延無しでアニメーションさせます。