キーワード:
ホームページ作成 HTML
サイト初心者 ヘッダー グローバルナビ
フッター CSS 内部参照 入門
ホームページの構造理解
今回は、
テキストエディタを利用して、
HTMLで記述した内容に加え、
CSS( Cascading Style Sheets )の内部参照を利用しながら、
レイアウトを調整し、
ブラウザ上で、
「 ヘッダー 」や「 グローバルナビゲーションメニュー 」
「 フッター 」
などを表示をさせる、
ホームページ作成の基礎的な内容の記事を
まとめておこうと思います。
現在は、以下のように様々な便利な、
ホームページ作成ソフトが販売されていますが、
ホームページ作成ソフトなどの例
Amazon
Amazon
Amazon
Amazon
[ ホームページ・ビルダー19 関連本 ]
Amazon
Amazon
Amazon
Amazon
ホームページ作成ソフトを利用せずに、
テキストエディタなどを利用して、
HTMLコードやCSSコードを入力してみると、
ブログのカスタマイズや、
ホームページ作成ソフトなどでの、
ホームページ構造の理解などに
つながるのではないかとも感じます。
そして、
手入力でHTMLやCSSなどのコードを入力して、
ホームページを作成することの大変を感じ、
上記のようなホームページ作成ソフトのありがたみも
より感じるのではないかと思います。
この記事では、
動画でまとめておきましたので、
動画を確認しながら、
練習などを実施してみてください。
2. ホームヘ?ーシ?作成・HTML入門 ヘッタ?ー・ク?ローハ?ルナヒ?・フッター 編
訂正事項
:「 style〜/style 」内の、「 .title 」は、
idの要素に対する装飾のため正確には「 #title 」
でしたのでご了承下さい。
ブラウザでの表示自体は、
テスト環境ではどちらでも変わりませんでしたので
コード入力練習の際は、訂正して下さい。
参考:「 id 」要素 → CSSでは「 # 」
「 class 」要素 → CSSでは「 . 」
注:・動画ではMac向けの無料テキストエディタの
ひとつである
「 CotEditor 」で、
HTMLファイルを作成しています。
・Windowsを利用されている方の場合、
テキストエディタには「 サクラエディタ 」や
「 TeraPad 」などがあるようです。
・ブラウザは、「 Google Chrome 」を
利用して説明しています。
・HTMLの入力方法は、HTML5を参考に作成しています。
・画面を拡大してみると、
HTML/CSSコードなどが見やすいと思います。
前回のHTMLの基本構造に加え、
CSSでレイアウトの調整や、
様々なコードがでてくるので、
一見複雑に感じますが、
自分でコードを入力したり、
ブログなどでのカスタマイズなどを実施したりする過程で、
少しずつ要所はつかめてくるのではないかと思います。
今回の内容が、難しすぎると感じられた方は、
? 記事ページ
: 1. ホームヘ?ーシ?作成・HTML入門 フ?ラウサ?て?タイトルとテキストを表示させる
? 記事ページ
: 書評3. 今すぐ使えるかんたんmini 図解HTML5
などの記事も参照してみてください。
また、
HTMLやCSS、JavaScript、PHP等をはじめとした、
ウェブプログラミングや、
WordPressなどに関連する
プログラミング学習関連の情報や、
様々なプログラミング言語に関して、
Q&Aが行なわれているサイトとして、
エンジニアのためのQ&Aサイト【teratail】
というサイトもありますので、
学習の補助などに参照してみてください。
teratail
のサイトでは、
Q&Aは、
会員の登録をしなくても無料で閲覧が可能です。
会員登録
(facebook、twitter、Google+、github、
hatenaアカウントなどでも登録可能)
をすると、質問への追記や、
回答ユーザーなどとのやり取りも可能となり、
プログラミング関連の学習をさらに深めたい方にとっては、
役に立つのではないかと思います。
また、
レンタルサーバーをお探しの場合は、
? 記事: レンタルサーバーのサービス比較(一覧)
ドメインに関しての情報をお探しの場合は、
? 記事: ドメイン登録サービス会社のサービス比較(一覧)
アフィリエイトサービス会社をお探しなら、
? 記事: アフィリエイトサービス・広告配信サービス会社の比較(一覧)
の記事ページにまとめておきましたので、
必要に応じて、
参照していただければ幸いです。
[ スポンサードリンク ]
by はじめてのコンピュータ・パソコン
? サイトマップ
? プロフィール | サイトポリシー・免責事項など
? CONTENTS(コンテンツ)一覧
? コンピュータ・プログラミング書籍関連 | 書評(一覧)
? Macでアフィリエイトのやり方・始め方入門講座(一覧)
? パソコン・コンピュータ学習関連サイトやサービスの情報
? プログラミング言語関連記事(一覧)
【このカテゴリーの最新記事】
- no image