サイトマップ≪目次≫

おもな項目

タイトルクリックで各項目へ

• ホームページビルダーの操作
• HMTLタグ　CSS　ミニ知識
• ホームページ作成のお役立ち情報　画像ソフト
• ホームページ作成お役立ち情報　その他
• ページ作成　→１から簡単なページを作成しています
• WEB情報など

項目ごとに分けてありますが、記事内容により重複しているページもあります。

ホームページビルダーの操作

• 基本操作
  • サイトを作成する

• スタイルシートマネージャの操作
  • スタイルシートマネージャの基本操作
  • 外部スタイルシートのつくりかた
  • 色の設定【ユーザー設定】の仕方
  • 『レイアウト』タブの操作の仕方
  • リスト項目の設定の仕方
  • 外部CSSの作り方とCSSエディッタの操作

• HTML入力
  • 【DOCTYPE宣言】の設定の仕方
  • HTMLタグを入力しながらCSSも設定する方法
  • HTMLタグを入力しながらCSSを設定するもう一つの方法
  • タグに直接スタイルを設定する方法
  • リストタグの入力の仕方
  • リストタグを使った横並びメニューflotを使ってみよう！
  • 定義リスト<dl><dt><dd>タグの挿入方法

• カスタマイズ
  • ツールバーをカスタマイズする
  • ソース画面に切り替え、HTMLの書き方を覚える

HMTLタグ　CSS　ミニ知識

• HTMLタグについて
  • タグ、ID、クラス・・・とは何か？
  • ブロックレベル要素とインライン要素
  • インライン要素の特徴
  • HTMLタグについて　<h1>～<h6>・<p>
  • HTMLタグについて定義リスト<dl><dt><dd>

• CSS・スタイルの指定
  • マージンとパッディングと横幅
  • サイトレイアウトセンタリング（中央配置）の仕方
  • CSSのリセット
  • CSSセレクタの種類と書き方
  • float　フロートについて
  • リストタグを使った横並びメニュー　flotを使ってみよう！
  • flot（フロート）の解除は、やっかいだ！
  • フロートを使った横並びのメニューバー　中央配置
  • フロートを使った、いろいろな横並びメニュー
  • リストタグの装飾
  • リストタグの余白やリストマークについて
  • 定義リスト<dt><dd>の横並び
  • 定義リストDLの横並び
  • マージン【margin】の特性
  • CSSプロパティ　line-height
  • CSSの優先順位　セレクタの強さ

ページ作成のヒントなど

• CSSの活用

  • h1タグに、サイトのタイトルとページの主題を上手くおさめる方法
  • フロートを使った、いろいろな横並びメニュー
  • 定義リスト<dt><dd>の横並び
  • 定義リストDLの横並び

• ページ構成

  • ２カラムの作り方　２カラムの構造
  • 横並びメニューを入れた、ヘッダーを作ってみる

• リストタグを使ったメニュー

  • リストタグでメニューをつくる
    • リストタグの装飾　→ビルダーでの操作と簡単な装飾設定
  • フロートを使わない横並びメニュー
    • リストタグを横並びにしながら、インライン要素の特徴を知ろう
    • リストタグをインライン化し、スタイルを設定メニューをつくる
  • フロートを使った横並びメニュー
    • リストタグを使った横並びメニュー　flotを使ってみよう！
    • フロートを使った横並びのメニューバー　中央配置
    • フロートを使った、いろいろな横並びメニュー

ホームページ作成のお役立ち情報　フリーの画像ソフト

• 画像ソフトについて
  • 画像加工・編集からお絵描きまで出来るお役立ち無料ソフト色々！
• 画像ソフトInkscapeについて
  • Inkscapeでホームページで使う飾り素材を加工しよう！
  • Inkscapeでイチゴの画像をハート型に切り抜く
  • Inkscape　イチゴの画像を輪郭をぼかしたハート型で切り抜く
• 画像ソフトGIMPについて
  • GIMPの操作を覚えながら、ファビコンを作ってみよう！
  • GIMPの操作を覚えながらファビコンを作ってみよう！２
  • GIMPで、背景画像に便利な、水玉（ドット）素材を作ってみよう！
• 画像ファイル
  • フリーソフトで、AIファイルを開く方法
  • GIMPとInkscapeでEPSファイルを開く

ホームページ作成お役立ち情報　その他

• ファビコン
  • ファビコンの設置

• ブラウザ
  • ホームページ作成に、最適なブラウザは？
  • Operaで、レイアウトの勉強

ページ作成

• １カラムの簡単なページを作成する
  • １　はじめに
  • ２　ホームページビルダーの設定
  • ３　ページの構造
  • ４　CSSのリセットをする
  • ５　背景の設定
  • ６　一番外側の箱を作る
  • ７　ページ作りのコツ
  • ８　ヘッダー部分のスタイル
  • ９　メニューを作る
  • １０　メインの部分を作ります
  • １１　フッタ―とアンカー（リンク）の設定
  • １２　HTMLタグの挿入のしかた
  • １３　HTMLタグを挿入してスタイルを設定する(1)
  • １４　HTMLタグを挿入してスタイルを設定する(2)
  • １５　リンク先を挿入する

• ２カラムのページ作成
  • １　はじめに
  • ２　CSSリセットから外枠の設定
  • ３　ヘッダー部分のスタイル設定
  • ４　外枠からヘッダーまでのHTMLを書く
  • ５　float　フロートの設定
  • ６　メイン記事設定【overflow : auto;】で小窓を作る
  • ７　サイドバー　メニューの設定【display : block】でボタンぽく
  • ８　フッターの設定　floatの解除
  • ９　今日で完成！

WEB情報など

• ワードプレス
  • ブログとワードプレス
  • WordPressが使える、無料ホームページ
  • WordPressが使える無料クラウドサービス！を試してみたよ！