★タグ
<div>～</div>
・・・グループ化（文書上の意味は持たない。）
例です。
<div id="container">
<div id="header">
<h1>～</h1>
<p>～</p>
<div>～</div>
<div id="contents">
<h2>～</h2>
<p>～</p>
<div>～</div>
<div id="footer">
<address>～</address>
<div>～</div>
感じです。
<div id="～">
idで指定します
。（idの属性名は基本、半角英数字なら自由だと思います。たぶんです。）
全てのタグに指定可能です。
同一ページ内では同じid名を複数のタグに指定できないです。
上の例だと・・・
headerがページの一番上、（ページの看板的なところ？）をグループ化しています。
contentsがページの内容的なところをグループ化しています。
footerがページの一番下的なところをグループ化しています。
containerがスペルが難しいですが、全体をグループ化しています。
CSSでの書き方は、例えば・・・
div#container {～:～;}です。
containerというidのdivです。
div #container {～:～;}と・・・divの後ろに半角スペースを入れると、
divの中のcontainerというid名を持ったタグという意味になります。
要は#がidって意味です。
★CSS
border-style
・・・枠線の種類です。
種類は
{ border-style: none;}・・・罫線を表示しない。
{ border-style: solid;}・・・実線です。
{ border-style: double;}・・・二重線です。
{ border-style: ridge;}・・・なんか立体的な線です。
{ border-style: groove;}・・・なんか立体的な線です。
{ border-style: inset;}・・・なんか立体的な線です。
{ border-style: outset;}・・・なんか立体的な線です。
※solidだけ覚えとけば大丈夫だそうです。
border-width
・・・枠線の太さです。
書き方は、
{ border-width: ～px;}
です。
border-color
・・・枠線の色です。
書き方は、
{ border-color: #～;}
です。
style,width,colorをまとめて書けます。
書き方は、例えば
{ border: solid 1px #ff0000;}とかです。
例えば、
pタグのidを
<p id="border">ぽぽんた</p>にして
CSSで
p#border { border: ridge 6px #ff0000;}に指定すると
ぽぽんた
と表示されるわけです。
background-color
・・・背景色です。前にも書いたかな？
ブロック要素にもインライン要素にも使えます。
上のpタグで作った”ぽぽんた”はブロック要素です。borderで囲んだ中に空白の部分がありますよね。ブロック要素では見えない空白部分もあるわけです。
インライン要素では例えば<a href="aaa">aaa</a>
aaaと余分な空白がないわけです。
paddingの一括指定
例えば、
{padding: 10px 20px 30px 40px;}
だと上（10px）、右（20px）、下（30px）、左（40px）、の順番です。
{padding: 10px 20px 30px;}
だと上（10px）、左右（20px）、下（30px）、の順番です。
{padding: 10px 20px;}
だと上下（10px）、左右（20px）、の順番です。
{padding: 10px;}
だと上下左右（10px）です。
※marginも同じ考え方でできます。
先生お勧めのアプリ
自分はスマホ持ってないのでできないです。
セカイカメラ先生お勧めの注目されてる技術を使ってる動画が見れるサイト
Ralph Lauren 4D建物にプロジェクターで立体的な映像を映して、本当にあるようにみせるみたいな感じです。
先生おすすめの技術を使って活動する人たちのサイト
AR三兄弟拡張現実という手法を使って写した映像にあたかもそこに何かがあるように見せています。
