WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

HTML

1カラムレイアウト

http://efu.sakura.ne.jp/web/0327/ 1カラムレイアウト 横並びでない縦に配置する1カラム(縦方向の列)のみで構成されたレイアウト HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> </div></div></body></html>

CSSの練習

スタイルシートの書きかた 外部のCSSファイルを読み込む方法とHTML内に直接書く方法があるが、 HTMLに直接書く場合は <style> ~ </style> の間に記述する。 リセットCSS ブラウザの仕様で余計な余白や装飾がでるのを無くす為に記述する。 HTMLで使用している全ての要素を記…

border/padding/margin

border p { border: 1px solid #000; } ボーダーのスタイル・太さ・色を指定する「border-width」、「border-style」、「border-color」を合わせて 「border」プロパティにショートハンドで書ける。順番は任意「border」のみだとボックスの四方を囲う線にな…

HTML練習

http://efu.sakura.ne.jp/web/0320/ <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します!</p> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <li>猫写真募集</li> <li>我が家のにゃんこ紹介</ul> <h3>●すばる(白キジトラ・オス)</h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声も…</p></body></html>

HTMLでテーブル(表)を作る

http://efu.sakura.ne.jp/web/0319/ table(テーブル) HTMLで表を作る時に使う。 tr(Table Row) 1行でその中にthやtdを記述する。 th(table header cell) 項目名 td(Table Data) 内容。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLでテーブル(表)を作る</title> </head> <body> <h1></h1></body></html>

HTML練習

http://efu.sakura.ne.jp/web/0318/index5.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>石垣島観光ガイド</title> <head> <body> <h1>石垣島観光ガイド</h1> <p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を</p></body></head></meta></head></html>…

HTML基礎

リストタグ ul(unorderedlist/アンオーダーリスト) 順番が変わっても良い時に使う。 例: <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> リスト1 リスト2 リスト3 ol(orderedlist/オーダーリスト) 順番が決まっている時に使う。1,2,3…と先頭に文字が入る。 例: <ol> <li>リスト1</li> <li></li></ol>…

HTML基本文書

HTML基本文書 基本的なHTML5のつくりはこのようになっています。 <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> →Document Type宣言。文書がHTML5で作成されたものであることを宣言。 大文字と小文字が混在しているのは、 HTML4.01 では大文字が原則で XHTML1.0 では小文字が原則で、 HTML5から…