![]() |
サイトファイルを含んだ全ファイルのダウンロード [MacOS] [Windows] サンプルフィルでは、セクション毎の作業ができるようにファイル名にセクション番号が付いています。各セクションの作業を行う前のデータは「before」という名前が付いているものもあります。また下記の目次にはリンクがなくても、サンプルファイルに素材データは入っているものもあります。また、サンプル素材ファイルの学習以外の使用はできませんのでご了承ください。 |
|
Contents | |
introduction | Webページ作成の基本 |
Introduction 01 | サイトとWebページについて理解する [サイトの基礎知識] |
Introduction 02 | Webページ作成に必要な基礎知識をおさえる [Webページ作成の基礎知識] |
Introduction 03 | スタイルシートの基礎をおさえる [スタイルシートの基礎知識] |
Introduction 04 | ウィンドウやパレットの表示を切り替える [ウィンドウとパレットの表示切り替え] |
Introduction 05 | レイアウト画面を拡大・縮小表示して、見やすい大きさで編集する [レイアウト画面の拡大・縮小] |
Introduction 06 | パレットの表示を工夫して使いやすい画面表示にする [パレット操作] |
Introduction 07 | ライブレンダリングによるプレビュー [ライブレンダリング] |
Chapter 1 | サイトの作成とページ設定 |
Section 01 | サイトウィザードを使ってサイトを作成する [サイトウィザード] |
Section 02 | サイトウィンドウを使いこなす [サイトウィンドウ] |
Section 03 | サイト内のファイルを追加・削除する [ファイルの追加と削除] |
Section 04 | フォルダでファイルを分類・整理する [フォルダの操作] |
Section 05 | 新規ページを作成する [ページの作成] |
Section 06 | ページタイトルや背景色を設定する [ページの基本設定] |
Section 07 | ページの背景に画像を設定する [背景画像の設定] |
Chapter 2 | テキストの入力とフォーマット設定 |
Section 08 | テキストを入力する [テキスト入力] |
Section 09 | 文字のサイズを変更する [文字サイズの変更] |
Section 10 | 文字の色を指定する [文字色の指定] |
Section 11 | 選択した文字のスタイルを設定する [文字の書式設定] |
Section 12 | 行揃えを設定する [行揃えの設定] |
Section 13 | ブロッククォートを設定する [ブロッククォートの設定] |
Section 14 | 段落に先頭文字を設定する [リストの設定] |
Chapter 3 | リンクの設定 |
Section 15 | 同一サイト内の他ページへリンクを設定する [他ページへのリンク設定] |
Section 16 | ポイント&シュートボタンを使ってリンクを設定する [ポイント&シュートボタンによるリンク設定] |
Section 17 | リンク先ページを新しいウィンドウに表示する [ターゲットの指定・ブラウザでのプレビュー] |
Section 18 | Webページ内の指定した場所にリンクを設定する [アンカーの設定] |
Section 19 | 他のサイトやメールアドレスにリンクを設定する [外部リンクとメールリンク] |
Chapter 4 | 画像の挿入と設定 |
Section 20 | ページ上に画像を配置する [画像の挿入・Altテキスト設定] |
Section 21 | 画像の大きさを変更する [画像のサイズ変更] |
Section 22 | 画像の回りにテキストを流し込む [画像とテキストの配置] |
Section 23 | 画像の周りに余白や境界線を追加する [余白と境界線の設定] |
Section 24 | ページ上に水平ラインを挿入する [水平ラインの追加] |
Section 25 | 画像にリンクを設定する [画像へのリンク設定] |
Section 26 | 1つの画像に複数のリンクを設定する [クリッカブルイメージマップ] |
Chapter 5 | テーブルを使ったレイアウト |
Section 27 | ページにテーブルを配置する [テーブルの挿入] |
Section 28 | テーブルやセルを効率よく選択する [テーブルとセルの選択] |
Section 29 | セルに文字や画像を挿入する [文字入力・画像の挿入] |
Section 30 | テーブル内のセルを連結する [セルの連結] |
Section 31 | セルと行のテキスト配置を設定する [セル内・行内のテキスト配置] |
Section 32 | テーブルやセルに背景色を設定する [テーブル・セルの背景色設定] |
Section 33 | テーブル、セル、行・列のサイズや配置を変更する [インスペクタでの設定] |
Section 34 | セルを移動する [セルの移動] |
Section 35 | テーブルスタイルを使ってテーブルにデザインを設定する [テーブルスタイル] |
Section 36 | セルの中にテーブルを挿入する [セル内へのテーブル挿入] |
Section 37 | テーブルの行数・列数を変更する [行や列の挿入と削除] |
Chapter 6 | スタイルシートを使ったフォーマット |
Section 38 | スタイルシートのファイルを作成する [スタイルシートの作成] |
Section 39 | 新規にスタイルを作成する [スタイルの作成] |
Section 40 | スタイルシートでページの背景色を統一する [スタイルの定義(背景色)・外部スタイルシート参照] |
Section 41 | スタイルシートで背景画像を設定する [スタイルの定義(背景画像)] |
Section 42 | スタイルシートで背景画像を固定させる [スタイルの定義(背景画像の固定)] |
Section 43 | スタイルシートで背景画像の表示位置を指定する [スタイルの定義(背景画像の表示位置)] |
Section 44 | スタイルシートで文字サイズや行間を設定する [スタイルの定義(フォント)] |
Section 45 | リンク部分のスタイルを設定する [HTMLエレメントスタイルの作成(ハイパーテキストリンク設定)] |
Section 46 | 見出し文字のスタイルを変更する [HTMLエレメントスタイルの作成(HTML段落書式の変更)] |
Section 47 | 段落のインデント幅と、リストの行頭文字を定義する [スタイルの定義(テキスト・リスト)] |
Section 48 | スタイルシートで見出しの背景に画像を指定する [スタイルの定義(画像の表示位置・その2)] |
Section 49 | 文章をコラムのように横に表示させる [スタイルの定義(位置の指定)] |
Section 50 | 指定したエリアの周りに境界線を表示する [スタイルの定義(境界線の指定)] |
Section 51 | テーブルにスタイルを適用する [スタイルの適用(テーブルへの適用)] |
Section 52 | 段落や文字ごとにスタイルを適用する [スタイルの作成(クラススタイル)] |
Chapter 7 | CSSを使ったレイアウト |
Section 53 | CSSのレイアウトを挿入する [CSSによるレイアウトの作成] |
Section 54 | 画像やテキストを挿入する [CSSレイアウトの編集] |
Section 55 | CSSのレイアウト幅を調整する [CSSによるレイアウトの定義] |
Section 56 | CSSレイアウトのスタイルを設定する [CSSレイアウトのスタイル定義] |
Chapter 8 | レイアウトグリッドを使ったレイアウト |
Section 57 | ページにレイアウトグリッドを追加する [レイアウトグリッドの追加] |
Section 58 | レイアウトグリッドの設定を変更する [レイアウトグリッドの設定] |
Section 59 | レイアウトグリッドに画像を配置する [レイアウトグリッドへの画像の配置] |
Section 60 | レイアウトグリッドにテキストを配置する [レイアウトグリッドへのテキストの配置] |
Section 61 | レイアウトグリッド上にあるオブジェクトの配置を整える [オブジェクトの整列・グリッドのテーブル変換] |
Section 62 | テーブルからレイアウトグリッドへ変換する [テーブルのグリッド変換] |
Chapter 9 | レイヤーを使ったレイアウト |
Section 63 | レイヤーツールでレイヤーを作成する [レイヤーの作成] |
Section 64 | レイヤーのサイズや位置を変更する [レイヤーのサイズ変更・移動] |
Section 65 | レイヤーに画像や文字を追加し、背景色を設定する [レイヤーへの画像挿入・テキスト追加・背景色の設定] |
Section 66 | 複数のレイヤーを扱う [レイヤーパレット(選択・ロック・非表示)] |
Section 67 | レイヤーの位置を整列させる [レイヤーの整列] |
Section 68 | レイヤーをアニメーション化する [レイヤーのアニメーション化] |
Chapter 10 | フレームを使ったレイアウト |
Section 69 | フレームを使ったレイアウトの基本をおさえる [フレームを使用したレイアウト] |
Section 70 | フレームセットに使用するページを作成する [フレームセット用ページの作成] |
Section 71 | フレームセットやフレームサイズの設定をする [フレームセット・フレームサイズの設定] |
Section 72 | 各フレームに表示するページを指定する [フレームへのページのリンク] |
Section 73 | スクロールバーの表示/非表示を設定する [スクロールバーの設定] |
Section 74 | インラインフレームを挿入する [インラインフレームの挿入] |
Section 75 | フレーム間のリンクを設定する [フレーム間のリンク] |
Chapter 11 | フォームの設定 |
Section 76 | フォームを作成する [フォームの挿入] |
Section 77 | 短いテキストの入力欄を作成する [テキストフィールドの挿入] |
Section 78 | コメントや感想の入力欄を作成する [テキストエリアの挿入] |
Section 79 | ラジオボタンを作成する [ラジオボタンの作成] |
Section 80 | チェックボックスを作成する [チェックボックスの作成] |
Section 81 | ポップアップメニューやリストボックスを作成する [ポップアップメニュー・リストボックス] |
Section 82 | 送信ボタンやリセットボタンを作成する [送信ボタン・リセットボタンの作成] |
Section 83 | フォームを送信するための設定をする [フォームの送信](フォームの完成形) |
Chapter 12 | インタラクティブなページの作成 |
Section 84 | マウスの動きに応じて反応するボタンを作成する [ロールオーバーボタンの作成] |
Section 85 | ポップアップメニューからリンク先ページにジャンプする [URLポップアップメニューの作成] |
Section 86 | ページの最終変更日を表示する [日時の自動更新設定] |
Section 87 | サイズを指定した新しいウィンドウを開く [ウィンドウを開くアクション] |
Section 88 | ウィンドウを閉じるボタンを追加する [ウィンドウを閉じるアクション] |
Section 89 | 1つのリンク元から、2つのフレームに異なるページを表示する [2フレームターゲット] |
Section 90 | フレーム内に読み込まれるページだけが表示されるのを防止する [フレーム強制読み込みアクション] |
Section 91 | ページ内の画像を曜日ごとに変えて表示する [デイリー画像URLアクション] |
Section 92 | 画像をランダムに表示する [ランダム画像アクション] |
Chapter 13 | 外部ファイルとメディアの挿入 |
Section 93 | Photoshopのレイヤーデータを読み込む [Photoshopレイヤーファイルの読み込み] |
Section 94 | 下書き用の画像を表示させながらレイアウトする [トレーシングイメージ] |
Section 95 | オリジナルのPhotoshopデータとリンクした画像を挿入する [スマートPhotoshop画像の追加] |
Section 96 | オリジナルのIllustratorデータとリンクした画像を挿入する [スマートIllustrator画像の追加] |
Section 97 | Flashなどで作成したFlashムービーを挿入する [Flashムービーの挿入] |
Section 98 | QuickTimeムービーを挿入する [QuickTimeムービーの挿入] |
Section 99 | Adobe PDFを挿入する [メディアの挿入(PDF)] |
Section 100 | HTMLページをPDFに変換する [PDFへの書き出し] |
Section 101 | PDFへリンクを追加・編集する [PDFファイルの編集] |
Section 102 | 同じデザインのページを簡単に作成する [ページテンプレートの使用] |
Section 103 | 繰り返し使用するパーツを複数のページで共有する [コンポーネントの使用] |
Section 104 | お気に入りアイコンを追加する [スマートお気に入りアイコンの作成] |
Section 105 | iモード用のページを作成する [iモードページの作成] |
Chapter 14 | ソースコードを編集するエディタ |
Section 106 | ページのレイアウトとソースコードを同時に表示しながら編集する [ソースコードエディタでの編集] |
Section 107 | ソースのタグを自動入力する [ソースの入力] |
Section 108 | ソースのタグを階層表示にしながら編集を行う [アウトラインエディタでの編集] |
Chapter 15 | サイトの管理とアップロード |
Section 109 | リンクエラーを確認し、解決する [リンクエラーの解決] |
Section 110 | 画像やファイルのリンク状況を視覚的に表示する [In&Outリンクパレット] |
Section 111 | サイト内のエラーをリストアップして確認する [クエリ] |
Section 112 | サイト内のテキストを検索して一括変換する [テキストの検索/置換] |
Section 113 | サーバにアップロードするための設定を行う [アップロードの設定] |
Section 114 | サイトをサーバにアップロードする [アップロードと更新] |
Section 115 | サイトマップを作成する [ダイアグラムの作成] |