動画とWebテキストで学ぶオリジナルWebデザインとSEO対策
HTMLとCSSで作るウェブサイト作成入門
動画解説を見る
本サイトは、「HTMLやCSSの基本を学びたい」という人のために作成されたオンラインテキストです。「HTMLとは何か？」から始まって、ウェブページデザインの方法やサーチエンジン対策(SEO)の考え方も学ぶことができます。
プログラミング言語の学習の基本は「真似してやってみること」。その上で「少し修正して変化を試してみること」。各ページには、HTMLやCSSのサンプルコードが多数掲載されています。是非コピペして試し、属性などを変えてウェブページにどう反映されるか確かめてみてください。理解が深まるはずです。
本サイトの使い方は自由です。ただ、初心者の人は最初から順を追って見ていくことをお勧めします。所々、先に学んだことが前提になっていることがあるからです。解説を読み、HTMLやCSSを実際に作成してブラウザで確かめながら進めましょう。少し経験がある人は必要な箇所からスタートしても良いと思います。あるいは、かなり経験のある人は必要な箇所だけ辞書的に拾い読みいただいても良いでしょう。実際、メニューの最後にリンクされた「ウェブ色見本」と「フォント見本」は、ウェブページのデザインを考える際に辞書的に参照するためのものです。
本サイトがHTMLやCSSを学ぼうとする皆さんの助けになることを願っています。
ウェブサイト作成入門メニュー
- メニュー
- 環境設定 →動画解説
- HTMLと基本タグ →動画解説
- インライン要素とブロックレベル要素 →動画解説
- インライン要素(１)文字装飾のタグ →動画解説
- インライン要素(２)改行と画像とリンク →動画解説
- インライン要素(３)データ入力部品 →動画解説
- ブロックレベル要素(１)段落、区切線、中央寄せ →動画解説
- ブロックレベル要素(２)見だしタグh1〜h6 →動画解説
- ブロックレベル要素(３)リスト(箇条書き)の構成 →動画解説
- ブロックレベル要素(４)表を作るtableタグ
- ブロックレベル要素(５)データ送信のformタグ
- ブロックレベル要素(６)範囲指定とスタイル適用のdiv
- 相対パス指定の方法
- 検索エンジン対策 SEO →動画解説
- CSS(１)スタイルシートCSSとは →動画解説
- CSS(２)CSSの書き方 →動画解説
- CSS(３)HTMLでのCSSの使い方 →動画解説
- CSS(４)セレクタの指定方法 →動画解説
- CSS(５)ボックスモデルの理解 →動画解説
- CSS(６)ボックスの設定方法(幅・高さ・余白・枠線) →動画解説
- CSS(７)背景関連の設定
- CSS(８)文字とフォントのスタイル
- CSS(９)リンクのスタイル
- CSS(10)箇条書き(リスト)の装飾
- CSS(11)テーブルのスタイル設定
- CSS(12)overflowとdisplayと表示スタイル
- CSS(13)floatによるボックスの配置
- CSS(14)positionによるボックスの配置
- ウェブページデザインの基本 →動画解説
- サーバー内でのファイル格納方法
- ウェブページの実装(１)ページ全体領域の確保と配置 →動画解説
- ウェブページの実装(２)ヘッダーとメインビジュアル →動画解説
- ウェブページの実装(３)ナビゲーション領域の実現 →動画解説
- ウェブページの実装(４)コンテンツ領域とフッター →動画解説
- コメントタグの使い方 →動画解説
- デバッグの方法 →動画解説
まだまだ続きます・・・(目下構築中)。
資料
関連
|
|
|