【HTML】 HTML メモ

■HTMLに関するメモ


構造
<開始タグ タグに対する属性名=”値”> 内容 </終了タグ> タグには要素名と属性を指定する。

メモ
HTMLのタグは大文字小文字の区別はない。属性も基本的に無いがファイル名等は注意が必要
(XHTMはタグ、属性共に小文字で書く)
HTML内ではタグ外での改行は特に意味がない

基本の要素
文書型宣言
文字コード指定

 

文書型宣言
Strict
(HTMLからデザインに関するものを取り除いた完全なHTML型)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

Transitional(HTMLとスタイルシートを使う現在一般的な型)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

Frameset(Transitional型+フレームを使用する型)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”>

文字コード指定
<META http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
日本語の文字コードは”Shift_JISと””EUC-JP”と”ISO-2022-JP”(JIS)と”UTF-8″(UNICODE)等がある

基本的な要素(タグ)
要素には「ブロックレベル要素」と「インライン要素」がある。
ブロックレベル要素 = 見出しや段落、リストなどの文書を構成する基本的な要素の集合(1つで1行を構成)
インライン要素 = 行内の要素で修飾やリンク,グループ化などの機能があるものもある(1つの行に複数指定可)
<!– –> = コメント
<BR> = 改行
<P></P> = 段落(段落なのでIE等では改行して一行下に表示される)
<H1>~<H6>見出し(H1がもっとも上位の見出しで文字の大きさを指定するものではない)
<A HREF=”リンク先URL”>表示文字</A>
リンク先URLにmailto:送信先メールアドレス?subject=題名&cc=CCのメールアドレス&bcc=BCCのメールアドレス&body=本文”を使用するとメールの指定ができる
リンク先に#を付けると<H>タグと組み合わせでラベルとして扱える。<H1 id=””RADIO1″>には   HREF=”#RADIO1″で飛べる
<PRE></PRE> = 整形済みテキスト(空白文字や改行等をそのまま表示)
<CENTER></CENTER> = 中央揃え
<DIV 属性></DIV> = 囲まれた部分の位置を指定したりCSSを適用する(ブロックレベル)
<SPAN></SPAN> = 囲まれた部分の位置を指定したりCSSを適用する(インラインレベル)
<HR> = 水平罫線を引く 属性はalign=center size=1 width=200 or width=”85%” color=red等
<TABLE></TABLE> = <TR><TH><TD>と組み合わせて表を作成する
<OL><LI></LI></OL> = 連番付箇条書きリスト
<UL><LI></LI></UL> = 連番なし箇条書きリスト
<DL><DT><DD></DD></DT></DL> = 定義型リスト
<DEL cite=URL datetime=YYYY-MM-DDThh:mm:ss±hh:mm>~</DEL> = 削除したいけど表示に残したいとき
<INS cite=URL datetime=YYYY-MM-DDThh:mm:ss±hh:mm>~</INS> = <DEL>で削除した部分の修正を残したいとき
<img src=”File名” alt=”代替TEXTト” width=size height=size > 画像を表示(sizeは”%”又はピクセル)
widthとheightを両方指定するとアスペクト比が狂うことがあるので片方を指定する。

TABLEタグによる表の作り方
<TABLE></TABLE>の中に<TR>と<TD>or<TH>で表を作る
<THEAD><TFOOT><TBODY>で①ヘッダー、②フッター、③本体を分ける(順序は①②③で書くらしいが一部ブラウザーはそのまま表示してしまうらしいので①③②でいいような気も・・)
<TABLE>に指定できる属性
BORDER=枠の太さ RULES=格子の罫線 FRAME=外枠の罫線 WIDTH=表全体の横幅(“%”又はピクセル)
CELLSPACING=セル間の余白(“%”又はピクセル) CELLPADDING=文字と罫線間の余白(“%”又はピクセル)
<TABLE>の次の行に<CAPTION>~</CAPTION>内に表のタイトルを表示できる

 

出力

ghs4gj room

【CSS】 CSS メモ

■CSSに関するメモ


CSSとは

Cascading Style Sheetの略でWebページのレイアウト(見栄え)を操作する仕組み。HTMLからレイアウト部分を分けることが目的らしいがCSSを使うことで細かいレイアウトが可能になるらしいです。

CSSの記述方法

大文字でも小文字でもOK、但しクラス名やID名は区別されるので最近では全て小文字で書くのが慣例らしい。(XHTMLが小文字で書くのでその流れだそうです。)

①Style属性の値として記述する。 Style=”属性:値”で指定する

②<HEAD>タグ内に記述する。 <style type=”text/css”></style>で指定する

③別のCSSファイルに記述しHTMLから参照する。 cssという拡張子で保存し<HEAD>内に<link rel=”stylesheet” type=”text/css” href=”CSSファイル名”>で指定する。

(優先順位は①②③)

CSSの構造
セレクタ { 属性 : 値 ;}  セレクタは上記②③の場合に使用する。(複数行ある場合は{内を改行})

セレクタのきまり
セレクタには要素名(要素セレクタ)やクラス名(クラスセレクタ),ID名(IDセレクタ)がある。
要素名=h1等のHTMLタグ等
ID名=任意の名前で頭に#を付ける。セレクタは#radio1使用はid=”tube1″
クラス名=任意の名前で頭にピリオドを付ける。セレクタは.radio1使用はclass=”tube1″
セレクタは要素名とID名やクラス名を#(id)又はピリオド(class)で結合できる。
要素+ID名 = h1#tube1
要素+クラス名 = h1.tube1
IDセレクタはHTMLに対して一箇所のみの制限があるもののクラスセレクタと競合した場合はIDセレクタが優先される。
子孫セレクタ 上位セレクタ 下位セレクタ { ・・・ }と定義することで下位に上位のスタイルを適用できる。

属性及び値はマルチステートメントのような書き方をする場合はセミコロンでつなぐ

H1 {
colo r : black; ←命令の最後はセミコロン
background-color : blue; ←最後のセミコロンはあっても無くてもいいらしい
}

コメントは /* … */

子クラスで指定のないプロパティの値は親クラスから継承または初期値がセットされる。

色の指定方法
①色名での指定 color:red  ②16進数での指定 color:#ff0000  ③10進数での指定 color:rgb(255,0,0)
colorプロパティ = 文字の色  background-color = 背景の色


test.css

/*— 要素セレクタ — */
H1 { color:red ; background-color:blue } ← 属性と値のマルチステートメント的書き方
CENTER { color:rgb(0,255,0); }  ← 色の10進数指定

/*— クラスセレクタ — */
.red { color:#ff0000; }   ← 色の16進数指定

/*— 要素+クラスセレクタの組合せ– */
H2.aqua { color:aqua; }

/*— 自分で定義したHR– */
HR { background-color:red; width:100; height:5} ←クラス名など付けずに自分で定義したHRを作るとその

HTML内ではHRは全てこのスタイルになる

test.html

 

出力
ghs4gj room


応用方法

要素をグループ化する方法

ブロックとして扱うかインラインとして扱うかはHTMLのときと同様

ブロックレベル要素 = <DIV></DIV>でグループ化する <DIV class=”クラス名”> ・・・ </DIV>

DIVはブロック、インライン要素及びテキストをグループ化可能

インライン要素 = <SPAN></SPAN>でグループ化する <SPAN class=”クラス名”> ・・・ </SPAN>

SPANはインライン要素とテキストをグループ化可能

サイズの単位(CSSでは相対単位を使うのが推奨らしい)

絶対単位

cm/mm:センチメートル、ミリメートル

in:インチ

pt:ポイント

pc:パイカ

相対単位

%:親要素のサイズに対する割合

em:全ての文字(bの上側とyの下側の長さ等)の縦方向の長さに対する割合

ex:小文字のxの高さに対する割合(あまり使われない!?)

px:ピクセル=画面の解像度に対する割合(IEでは絶対単位?)

要素の種類

文字用

text-align=文字の位置「center」「Left」「right」

text-decoration=文字に飾りを付ける 「underline下線」「overline上線」「line-through打消線」「blink点滅」

text-transform=大文字小文字を変換する「capitalizeは頭が大文字」「uppercase大文字」「lowercase小文字」

text-indent=段落の字下げ(“%”orサイズ)

font-size=文字の大きさ「xx-small」「x-small」「small」「medium」「large」「x-large」「xx-large」「larger」「smaller」又は(“%”orサイズ)らしいが%等のサイズの相対値で設定するほうが無難らしい。

font-style=斜体の設定「italic」「oblique」

font-weight=文字の太さ設定「100~900を100stepで指定」その他「bold」「bolder」「lighter」

font-family:”フォント名” = フォントの指定(フォント名を指定する際は””でくくる、familyを指定する場合は””でくくらない、第一候補,第二候補・・・と複数の候補をカンマで区切って指定できる)

line-height=段落の行間を指定(“%”orサイズ)

a:link {属性:値 } = 未訪問リンク

a:visited {属性:値 } = 訪問済みリンク

a:active { 属性:値 } = OnClick中

a:hover { 属性:値 } = OnMouseMove中

letter-spacing = 文字間隔を指定(“%”orサイズ)

word-spacing = 単語感覚を指定(“%”orサイズ)

リスト用

①Lits-style-type = リストのスタイルを指定

値は「square=■」「disc=●」「circle=○」「lower-alpha小文字アルファベット」「upper-alpha=大文字アルファベット」「decimal=数字」「lower-roman=小文字のローマ数字」「upper-roman=大文字のローマ数字」

②List-style-image:url(画像ファイル名) = リストマークに指定した画像ファイルを使用する。

③List-style-position = リストの行頭を指定する

値は「inside=改行した2行目を行頭位置とそろえる」「outside=改行した2行目の行頭を字下げする」

同じ機能の要素①②③の場合マルチステートメント風に書くことが可能

ul { list-style:circle url(033.gif) outside } ←①+②+③のマルチステートメント風 この場合優先度は②>①

画像用

border-style = 枠の指定「noneなし」「hiddenなし」「dotted丸い点線」「dashed四角い点線」「solid実線」「double二重線」「groove立体の窪み」「ridge立体の隆起」「inset内側全体が窪み」「outset内側全体が隆起」

background-image:url(ファイル名) = 背景の画像

background-repeat = 背景を並べる「repeat縦横繰返」「repeat-x横のみ繰返」「repeat-y縦のみ繰返」「no-repeat繰り返さない」

background-position:10px 20px = 背景の位置 「left」「right」「center」「top」「bottom」又は(“%”orサイズ)

background-attachment = 背景の固定 「fixed」「scroll」

(リストと表)

test.css

 

test.html

 

出力
ghs4gj room



ボックスモデル
CSSでは各要素をボックス化し配置していく仕組みになっている。
ghs4gj room [ALL IS VANITY]

ボックスを使用したサンプル

test.css

 

test.html
<

 

出力
ghs4gj room [ALL IS VANITY]

せっかく見にこられた方・・おかしなサンプルですが、自分用のメモなのでお許しを・・・・

Becky2(ベッキー2)のデータフォルダ整理、その他メモ

■ベッキー2のデータファイルHDD容量節約方法

ネットを探すと色々な方法が出てきますが、安全性と効果を考えて
データフォルダーから不要ファイルを削除するだけにしたほうが無難です。

削除してもいいファイル
1)コンパクト化等後のバックアップ : *.bak
2)送受信時のバックアップログ : *.bkl, *.bks(設定で保存期間を変更可能らしいですが削除します。)

ベッキーのデータフォルダーでワイルドカードを使いこの3種類のファイルを検索し一気に削除します。
それ以外にも削除してもいいファイルがあるようですが、消さないほうが無難なようです。


その他ベッキーメモ

HTMLメール印刷時にソースが印字されてしまう。
→メニューバーの「ファイル」-「印刷」を使わずに、メール本文を右クリックし出てきたメニューから「印刷」を選択する

【HTML】右クリック禁止のページ

■右クリックを許可させないHTMLページ例
(画像を保存させない等)

 

 

イーモバイル D25HW 簡易マニュアル

■E-MOBILE D25HW簡易 マニュアル


[操作]

電源ボタン
約2秒押しでON/OFF

WiFi/WPSボタン
約2秒押しで無線LAN機能のON/OFF
無線LANオンの状態で約5秒押すとWPSを開始

CONNECTボタン
約5秒押すとインターネット接続モードのオート/マニュアルを切り替える
マニュアルモードの場合インターネットの接続/切断
(マニュアルモードはインターネットへの自動接続を抑えて通信費を抑える為にあるらしい)

[充電]

ACアダプタ:充電時間約4時間
USB充電時間約6時間(インターネット接続中は充電されない)
連続動作時間:約100時間
連続通信時間:約4時間

MicroSD:最大16GB

無線HUB機能を有効にする
「無線LANセキュリティ設定」で「プライバシーセパレータ」を「無効」

マニュアル:http://emobile.jp/products/hw/d25hw/pre_torisetu.html

セットアップマニュアル:http://www.eaccess.net/mobile/support/pdf/D25HW_kantan.pdf