ga-05-00

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

HTML/CSS逆引き辞典

目    次

A.主要HTMLの使い方

a1.pタグの使い方サンプル

a2.spanタグの使い方サンプル

a3.divタグの使い方サンプル

a4.h1タグ~h6タグの使い方サンプル

a5.コメントアウトの使い方サンプル

B.CSSの書き方(書き場所)3通り

b1.CSSをCSSファイルに書くサンプル

b2.CSSをインラインにstyle属性を使って

   書くサンプル

b3.CSSをhead 部にstyleタグを使って

   書くサンプル

C.CSSの実用的なサンプル2種類

c1.子孫セレクタのサンプル

c2.classを複数記述するサンプル

D.文字色と背景色

d1.文字色の指定方法

d2.背景色の指定方法

d3.背景色(36色)の使い方

d4.覚えておくと便利なカラーネーム

E.文字(テキスト)の装飾

e1.文字色を変更する(color)

e2.文字の太さを変更する(font-weight)

e3.文字のサイズを指定する(font-size)

e4.行間を変える(line-height)

e5.字間を変える(letter-spacing)

e6.アンダーラインを引く(text-decoration)

e7.蛍光ペンを引く

e8.一部の文字の設定を変える

e9.文字に影を付ける

F.HTMLタグul・ol・liを使った箇条書き

f1.ul・liを使った黒ポチのついた箇条書き

f2.ol・liを使った番号付きの箇条書き

f3.ol・ul・liを使った2階層の箇条書き

G.逆インデントを使った箇条書き

g1.逆インデントを使った数字付きの箇条書き

g2.逆インデントを使った記号付きの箇条書き

H.画像の加工と貼り付け

h1.画像の貼り付け、縮小・拡大

h2.背景画像にタイトルの貼り付け

h3.画像に枠線・額縁を付ける

h4.写真ギャラリーの設置

h5.パソコン画面から画像の切り取り

I.枠線(ボーダー)の活用

i1.ボーダーの活用1(タイトル)

i2.ボーダーの活用2(コメントボックス)

i3.ボーダーによる三角形の作り方

J.リンク(linkタグ、aタグ)

j1.絶対パスと相対パスの使い方

j2.スタイルシートの読み込み

j3.文中から同ページのトップにジャンプする

j4.文中から他ページにジャンプする

j5.文中から他ページの特定の場所にジャンプする

j6.文中から外部ページにジャンプする

j7.目次から同ページ内にジャンプする

j8.ナビゲーションから他ページにジャンプする

K.表作成(テーブル)

k1.HTMLだけで作ったテーブルのサンプル

k2.CSSで装飾したテーブルのサンプル

k3.当ホームページで作成したテーブルのサンプル

L.構造と見た目を分ける

l1.class名を複数記述するサンプル

l2.styleとclassを組み合わせて記述するサンプル

M.レ イ ア ウ ト

m1.文字及びボックスのセンタリング

m2.外側余白(margin)と内側余白(padding)

m3.[block]と[inline]と[inline-block]

N.レスポンシブWebデザイン

n1.ビューポートとメディアクエリの使い方

n2.タイトル文字の折り返し

n3.ul、liを使ったボックスの折り返し

n4.flexboxを使ったボックスの折り返し

n5.floatを使ったテキストの回り込み

n6.画像の縮小

n7.レスポンシブWebデザインの検証

O.Sublime Textの使い方

o1.Sublime Textの良く使うショートカット

o2.Sublime Textの便利な機能

P.デバッグ関連 ・・・・・・・・・ 準備中

p1.キャッシュの消し方(パソコン Chrome)

p2.キャッシュの消し方(スマホ Android)

p3.デベロッパーツールの使い方(Chrome)

Q.コメントボックスなどの配置 ・・・ 準備中

q1.コメントボックスを自在に配置する

q2.吹き出しを自在に配置する

q3.大きな矢印を配置する

q4.ホームに戻るボタンを配置する

R.その他 ・・・・・・・・・・・・ 準備中

r1.inline要素を横に並べると謎のスペースができる

r2.複数行の文字列を縦にセンタリングする

r3.最小の画面の高さを画面一杯とする

r4.BODYの背景色を画面一杯に広げない方法

r5.アコーディオンを設置する

pagetop

逆引き辞典

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken