忍者ブログ

おやっさんのWEBサイト制作への道

WEBサイト制作ど素人のおやっさんが、HTML、CSS、PHPなど学んでいく技術ブログです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML/XHTML&CCS008(div,id,border,background-color,paddingとmarginの一括指定)

★タグ

<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三兄弟
拡張現実という手法を使って写した映像にあたかもそこに何かがあるように見せています。
PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

カレンダー

06 2025/07 08
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

フリーエリア

にほんブログ村 IT技術ブログ HTML/CSSへ にほんブログ村 IT技術ブログ PHPへ

最新コメント

[11/23 テスト]

プロフィール

HN:
おやっさん
性別:
非公開

バーコード

ブログ内検索

P R

忍者ツールズプロフィール

忍者ツールズプロフィールは終了しました

カウンター