「だれでもWEBマスター」カテゴリーアーカイブ

だれでもWEBマスター

動画もやってみよう＊動画作成アプリ入門


動画もやってみよう。
コロナに負けない企画！今年こそYouTuberを目指そう。
(2023-01-05 投稿)
(2024-09-23 更新）

準　備
■画像を用意しておこう。
■動画アプリを見てみよう。
■簡単な動画作成の流れ

作　成
■Microsoft Clipchamp (Windows版)の場合
■フォト(Windows)の場合 ※2024現在フォトで動画表示や動画編集はできなくなっています．MyBlog（2024/6/23更新）Clipchamp フォト動画編集・訂正版「Windowsフォトで動画作成できなくなっていた..」
■iMovie(iPhone)の場合
■Adobe Premiere(有償)の場合


□動画作成アプリ入門 準　備　編

■画像を用意しておこう。

まずは、スマホなどで撮影した写真1枚あれば、フォトムービーが作成できます。
動画を撮っていなくても、写真から動画が作れます。

ＢＡＣＫ

■動画アプリを見てみよう。

「Clipchamp」　
Microsoft Clipchampは無料で使える動画編集エディタです。
Windowsフォトのビデオエディターを引き継いだビデオ編集機能を備え、PC,モバイルでインストールするアプリと、WEBブラウザで動画編集できる機能がサポートされています。
動画編集を始めるには「Clipchamp」の最初の画面で一度、アカウント登録が必要です。
Microsoft365 Personal アカウントのほか、Googleアカウント、メールアドレス等でアカウント登録することで、動画編集、同梱テンプレートやエフェクト等、書き出し(480p, 720p, 1080pの解像度、MP4形式でエクスポート)やSNS共有まで動画編集のほぼすべての機能が無料で使えます。 プレミアム(有償）については、４K(UHD)のエクスポート解像度、一部の有償エフェクト、ストックメディア、ブランドキット、クラウド共有(コンテンツ・バックアップ）等のサービスに関わっています。
※なお、MacOS,iPhone,iPadで利用する場合は、Microsoft365 Personal アカウントが必要になります。

◎「フォト」からClipchampを開く
Win11 の「フォト」から動画エディタを使う場合、「Microsoft Clipchamp」に連携しています。まず「フォト」を起動してみよう。
「フォト」を開くにはいくつか方法があります。
1. Windows11 タスクバーの検索ボックスに「フォト」と入力して呼び出します。
2. スタートメニューから「フォト」を探して起動します。
　・一番上の [＃]マークを押す　＞ 「フォト」は「は行」にあるので、文字一覧から「は」を押す　＞ フォトを押す
3. PC上で保存した写真はダブルクリックすると、フォトで写真が開きます。

※PCやモバイルに写真が保存されていない場合、フォトを開いても写真もなにも出て来ないことがあるかもしれません。PCやスマホのカメラで写真1枚撮影したり、WEBでお気に入り画像をダウンロードするなど、手持ちの端末内に写真を取り込みしてみましょう。
「フォト」の一覧から写真を選ぶ、あるいは、PCの写真をダブルリック等で1点開く、などの操作で、ツールバーに紫色アイコン「ビデオの作成」が出てきますので、紫アイコンを押します。
※Clipchampにアカウント登録済みならば、Clipchampが開くときに、選択した写真(メディア)が「インポート」された状態になります。

◎WEBブラウザでClipchampを開く
公式ページ　https://clipchamp.com/ja/
・ブラウザで「Clipchamp」を検索　＞「無料で試す」 ＞アカウント登録　＞ Clipchamp ホーム画面
Clipchampブラウザ版は、Windows、Mac、Linux コンピューターで使用できます。 ClipchampがサポートしているWEBブラウザは、
・Microsoft Edge
・Google Chrome
※Safari や Firefox などの一部のブラウザーでは Clipchamp が機能しません。
※また、Android端末ではブラウザ版Clipchampが使用できません。

◎PCやモバイルに「Clipchamp」アプリをインストールする。
Win10、Win11、iOS(iPhone, iPad) モバイルアプリは iOS14以降で動作します。
※Android端末は、インストール版Clipchampアプリがありません。




「フォト」　※2024現在フォトで動画表示や編集編集はできなくなっています。
Windows10 にはフォトが入っています。起動してみよう。
フォトを開くにはいくつか方法があります。
1. Windows10 タスクバーの検索ボックスに「フォト」と入力して呼び出します。
2. スタート　＃　＞ は行にあるので「は」　＞ フォト（またはダイレクトに ビデオエディター）
3. PC上で保存した写真はダブルクリックすると、フォトで写真が開きます。
写真の画面のどこかをクリックすると現れるツールバーの、左端のアイコン（写真とビデオのすべてを参照する）をクリックする、または右端 …（もっと見る）メニュー「その他の編集」＞「音楽入りビデオの作成」からビデオエディターが開きます.

「iMovie」
iPhone,iPad,MacOSでは「iMovie」が使えます。
アプリを開いて写真を選ぶだけで動画がはじまってしまうような直観的なアプリです。
【マジックムービー】手持ちの写真1枚でミュージック付きシンプル動画が出来あがります。フォントやフィルタの置換えもできます。
【ストーリーボード】　本格的動画ストーリーサンプル集。新着が追加されています。手持ちの写真を差換え、テキストを入力して使います。
【ムービー】 写真を選択して、トリミングやエフェクト追加などスマホ画面の操作で動画が作れます。

「Adobe Premiere Pro」は代表的な有償の動画編集アプリですが、その他にも 動画作成アプリが多数あります。
Adobe Premiere Proなどは無料体験期間がありますが、アカウントの作成が必要なものが多いです。
無料版は、機能に制限がある場合があります。
アカウント作成後、無料体験期間が終了しても自動的に終了にならず、使っていなくても月額の請求が毎月掛かってしまうことがあります。有料アプリ購入はとくに必要ないとか、難しすぎると思ったら期限内に解除の手続きが必要なので、要注意です。
無料版と書いてあっても、シェア(課金）しないと保存できないなど制限付きがあります。

ＢＡＣＫ

■簡単な動画作成の流れ

プロジェクト作成
いずれの動画作成アプリも、アプリを起動したらまず「プロジェクト作成」が出てきます。
プロジェクトには名前（タイトル）を付けます。プロジェクト名で、動画１作品を作成する作業フォルダができていて、作業中の動画はタイトルごとに保存されています。動画作成アプリによっては、プロジェクト名を付けて、保存先を決めて、完成したい動画のサイズや画質などを設定することがあります。設定の値が決まっている場合は、あらかじめ数値を入力しておくと便利です。プリセットがよく解らない場合は、とりあえず標準的な既定値のまま手順を進めてみます。
動画や画像を取込む時に、自動的に最適値に設定されることもあります。
素材の取り込み
動画や画像を、プロジェクトに取込みします。 PCやスマホなど端末にある画像や、クラウドに保存された見慣れた画像一覧が、アプリを開けば見られることがあります。メニューから開く、指定の場所にドラッグアンドドロップするなど。
素材の編集
たとえば写真1枚を取込みしたとします。写真は静止画像ですが、動画を再生するとプレビューでは数秒間画像が同じ画像が繰返し流れて停止する映像になります。再生から停止までの時間の流れをタイムラインと呼びます。
なにもしないで最初に流れるこの映像を編集することができます。映像の長さ、画像のトリミングなどの調整や修正、音声が入る場合は音声の調整など。
映像効果
さらに、映像に効果を追加します。ズーム(イン・アウト)など動きのある映像や、画像と画像の繋ぎの効果やフェード(イン・アウト)、タイトルや字幕などテキスト(文字）の挿入、3Dグラフィック合成や陰影効果などあらかじめアプリに用意された効果を選ぶだけで、インパクトある映像に仕上がります。
多機能アプリになるとYouTubeなどのWEB動画サイトに投稿されるような様々趣向を凝らした演出も可能になります。
保存と書き出し
作成した動画の後処理をします。
保存はSAVE、書き出しはEXPORTです。
プロジェクトの保存、編集作業状態の動画を保存することで、作業の続きができます。プロジェクトの保存では、動画はアプリの中で再生されて視聴できます。
動画をアップロードしたい。公開するには、書き出しの作業になります。書き出しの時は、動画のファイル名、ファイルの種類(mp4など)、画質や表示サイズを決めて設定しなければなりません。保存先は、作業しているPCやOneDriveなどクラウドのフォルダでよいと思います。また、編集アプリによってYouTubeなど動画サイトにダイレクトに書き出し、YouTubeアカウントがあれば即時公開(非公開）も可能です。

ＢＡＣＫ



作　成　編

■Microsoft Clipchamp（Windows版）の場合

Clipchampが起動すると[ホーム]画面が開きますが（ちょっととまどうと思いますが）、新規作成するなら、まずは「[新しいビデオを作成]　最初から始める」を押すとよいと思います。
[ホーム]画面を少し下の方に画面をスクロールすると、右上に「＋ビデオの作成」ボタンが出ます。

「AIでビデオを作成」するメニューは、お好みで、あとで試してみると面白いかもしれません。他の「簡単な編集を開始する」メニューは、おもなメニューのショートカットです。新規画面を開いたツールバーに各メニューがあります。
1度、動画編集をしたメディアは自動保存されて、ホームの下方「あなたの動画」に表示されるようになります。iOS版では「プロジェクト」に入っています。「プロジェクト名」が必要になると思います。Windows版では各動画の右上（三点リーダー）から「コピーを作成」(プロジェクトをコピー）することができます。

フォトで写真を複数枚選択して、一括してフォトから紫アイコン「ビデオ作成」を操作した場合は、Clipchampの「メディア」にフォトで選択した複数の写真がインポートされた状態で開きます。 WinPCで写真を1枚開いて、フォトから紫アイコン「ビデオ作成」を操作した場合、Clipchampの「メディア」画面に写真がインポートされ、さらにタイムラインに配置された状態で、プレビュー画面に取り込みした写真のイメージが見られます。

（画面上）
三本線のメニューから（または、紫色アイコン）で、ホーム画面に戻れます。
[タイトル]　入力設定していない場合は「無題の動画」
[アップグレード]　有償プレミアムには、橙色の宝石アイコンが付いています。
[エクスポート]　動画の書き出しをします。別途説明します。
[ヘルプとフィードバック]　ヘルプのWEBサイト、チャットサポート窓口へ接続
[アカウント]　毎回サインアウトしなくてもブラウザやアプリを閉じる操作で終了できます

＜ツールバー＞　（画面左：たて列のアイコン）
［メディア］　動画編集画面
［録画と作成］PCのカメラやマイクを使用して録画、メディアを作成します。
［コンテンツライブラリ］背景やアニメーション、オーディオ・サンプルなど。有料コンテンツにはマークが付いています。
［テンプレート］ショート動画用テンプレート、PC版とiOS版ではテンプレートが異なります。
［テキスト］　テキスト・アニメーションのサンプル
［切り替え］　２つのメディアクリップを並べた際の、つなぎの効果を追加します。
［ブランドキット］有償プレミアム・メニュー

＜メディアのインポート＞　（画面左）
動画や画像を、PCフォルダやクラウドから選択してインポートしたり、直接「メディア一覧」の位置にドラッグアンドドロップで取り込みします。

＜プレビュー＞　（画面中央）
プレビュー画面のイメージを選択すると、緑枠の囲みで周辺に［フローティング・ツールバー］が現れます。 PCでトリミングする場合は、フリーハンドで緑囲みのハンドルをマウスでドラッグして［クロップ］、フローティング・ツールバーの三点リーダー［その他］には［ピクチャインピクチャ］や［背景の削除］等のメニューもあります。

＜タイムライン＞　（画面下）
Clipchampは、30分以内の動画編集が可能です。
取り込み（インポート）したメディアを、緑の追加（＋)ボタン、またはドラッグアンドドロップでタイムラインに配置します。静止画像も、4~5秒位の時間で配置、再生されます。
メディアを選択して、ドラッグで移動できます。また、両端のハンドル(縦の白二重線）をドラッグしてトリミングできます。また、タイムラインの白いバーをトリミングしたい位置に合わせ、ハサミマーク(スプリット）を操作して、メディアを分割することができます。
複数のメディアを横に並べ、少し離れて配置した場合「ギャップを削除（ゴミ箱アイコン）」が出ますので、並べたメディアを隙間なく結合することができます。
タイムライン上の画面は、拡大(＋）縮小(－）ボタン、あるいはCtrl＋マウスのホイール操作で調整できます。編集作業中は、元に戻す(Ctrl＋Z）、やり直す(Ctrl＋Y)などの操作も便利だと思います。

＜プロパティ＞　（画面右：たて列のアイコン）
[キャプション]　AIオート・キャプション機能「トランスクリプトを作成する」
[オーディオ]　音量の調整、ノイズ抑制、音声のデタッチ（音声入り動画から映像とオーディオを切り離す）
[フェード]　　フェードイン、フェードアウト、ともに0.1秒単位で最大2秒まで調整可
[フィルター]　Windows版で48種のフィルターにタイトルが付いています。
[効果]　　　エフェクト、静止画像も動画に。
[色を調整]　露出や透明度まで手動設定
[速度]　　　速度の調整ができます。
[トランジション]　ツールバー［切り替え］を変更したい場合に操作します。
[色]　

・エクスポート（再掲）　動画はMP4ファイルとしてエクスポートされます。
480p 下書き向け
720p ファイルがもっと小さくエクスポートがより早い
1080p(HD)　高画質
4K(UHD)　有償プレミアム
GIF 15秒以下の動画向け

エクスポートして完成した動画ファイルは、PCやクラウドに保存したり、YouTubeやTikTokなどダイレクトにSNS共有することができます。 編集中の動画やオーディオをエクスポートして、再度[メディアのインポート]へ取り込み、タイムラインに追加することで、さらに色々な動画編集が楽しめると思います。

ＢＡＣＫ


■フォト(Windows)の場合　※2024現在フォトで動画表示や編集編集はできなくなっています。
ビデオエディター　「新しいビデオプロジェクト」　ビデオの名前を指定、名前を決めて入力します。（手順をスキップすると「新しいビデオ」という名前が付きますが、なにもしないと マイビデオプロジェクトに真っ黒0秒サムネイル が都度増えます。）

プロジェクトライブラリに素材（動画や写真）を「＋追加」
写真1点であらかじめフォトに入っている様々な効果（エフェクト）を追加すると動画になります。
写真1枚を分割したり、同じ写真を2枚3枚追加してそれぞれに効果を追加、画面に字幕テキストを入力するなど、ストーリーも作れます。

追加した素材の右上にチェック　ストーリーボードに配置
編集します。
[トリミング]  不要な部分をカットする。トリミングの開始と終了をドラッグして調整 ＞完了
[分割]           ビデオ・クリップを２分割。　1つ目をクリップ 終了時間を調整 ＞完了　
[テキスト]     クリップごとにテキスト入力、テキストスタイルとレイアウトを選択。
[モーション]   自動的に画面を拡大、縮小
[３D効果]      様々な３D効果一覧から選択挿入。部分的も複数設定も可能。試用して不要の効果は右上×で削除して整理。
[フィルター]  動画を色調で演出できます。
[速度]           動画再生の速度 遅い 0.02x←　普通 1x　→速い 64x
[黒いバーを削除] 映像の左右黒い余白あり　なし(全画面）
[回転]           選択したクリップを回転（右回り90 ＞180 ＞ 270度 ＞元に戻る）
さらに、BGM（またはカスタムオーディオ）で音声を追加できます。
※フォトは動画ファイルを無劣化で分割できる、などと情報がありますが、編集作業を繰返すことで元データが劣化する可能性があります。
<静止画像の場合>
[期間]        1クリップの再生時間。既定3秒で選択肢 1 2 3 5 7秒 その下のボックスに数値入力すれば何秒でも可能。
[テキスト]    (以下、上述の動画と同じボタンですので省略します)
[モーション]
[３D効果]
[フィルター]
[黒いバーを削除]
[回転]

作成したビデオは「マイビデオプロジェクト」一覧に作業状態が残りますので、いつでも編集の続きができます。
ビデオの完了   （画質を選択）   エクスポート　＞Windowsのピクチャに保存されています。YouTubeなどには対応しているmp4形式ですが、WEBブラウザにvideoタグで動画をリンクして再生可能なmp4の H.264 ではないかもしれません。 変換(コンバート）作業が必要になります。
また、動画サイズが大きすぎる などリサイズしたい場合、動画を圧縮するなど別の機能を備えた編集アプリが必要です。 あらかじめ元の画像をリサイズして準備しておくと、編集して書き出す時に動画が比較的軽くなると思います。

 ＢＡＣＫ


■iMovie(iPhone)の場合
iPhone iOSアップグレード後にiMovieもバージョンアップされています。ショート動画向きのシンプルなアプリで、使い方について詳しい説明が必要になるかもしれません。効果やフィルターを試したり、動画作成のネタ作りに使えるアプリかもしれませんが、iPhoneで撮影した写真や動画のサイズが大きいため、作成した動画のサイズも大きくなってしまいます。
高機能の編集機能を満載なのですが、アプリ内のメニュー類がコンパクトにセットされているため、色々な機能に気付ずにとりあえず使っているかもしれません。iMovieが理解できれば、他のどんな動画編集ソフトも使いこなせると思います。

新規プロジェクトを開始
【ムービー】の説明です。
写真を選択して動画作成、クリップの長さ調整、クリップ間の効果なども編集できます。クリップ（1枚1枚の写真）ごとに、タップとドラッグ操作で簡単な編集ができます。
[ムービー]の編集モードに入ると、プレビューの下にタイムラインが出ています。写真１枚が繰返し重なって帯状に表示されているのがクリップで、クリップ上でタップすると黄色枠で選択されます。開始と終了位置の両端のハンドルを左右にドラッグすると、クリップの長さが調整できます。
プレビュー画面の「Ken Burnsオン」の表示をタップして「オフ」にすると、再生時に画面が動く効果がオフになりイメージが固定されます。既定で「オン」になっていますので、効果を停止したい場合はクリップごとに操作が必要になります。また、イメージごとの既定の再生時間が長いように感じた場合、クリップ枠の両端をドラッグして時短に調整できます。
たとえば1枚の写真(自撮りした顔写真とか）だけでも、タイトルとBGMを入れたり、効果(エフェクト)を設定して動画が完成します。
また、1枚の写真をコピー、複数枚として（何回でも）取り込み、各クリップに[効果]を追加した映像をプレビュー(再生)しながら確認します。
編集モードの右上（タイトル右端）[？]マークをタップすると、簡単な説明書きがポップアップします。[？]を押下した画面の左下[詳しい情報]でiMovieユーザガイドが開きますので、目次から機能の詳細を読むことができます。
iMovieの[ビデオ・オーバーレイ・エフェクト]は、編集中のクリップに、別の写真をもう1枚(同じ写真でも可）追加して、再生中に2枚の写真をオーバーラップさせる効果を設定できます。タイムラインのオーバーレイを入れたい箇所で［＋］メディアを追加、４つのオプションから[効果]を選び、開始終了位置やオーバーレイ画像の配置、サイズや形状などをドラッグ操作で設定します。
保存先を確認して、保存の操作で書き出します。ファイルの種類は .MOV です。YouTubeなどSNS共有、iMovieはYouTube推奨アプリのひとつです。WEBブラウザ対応でクラウドやストレージ経由、また、ZOOMやMEETなどリモートWEB会議等で共有できると思います。書き出しの際に、タイトルの下行[ビデオ　オプション]から解像度の設定を変更できます。既定値は1080p HDです。容量が大きくなると書き出しの時間もかかります。元サイズ容量を調整することで解像度を下げることができます。そもそもiPhoneで撮影した写真自体が高画質です。.MOV ファイルは、モバイル端末ではサイズが大きすぎるかもしれませんが、ワイドTVモニターなどでも視聴できる条件を満たしています。

ＢＡＣＫ


■Adobe Premiere Pro(有償アプリ)の場合
Adobe製品はアプリメニューやワークスペースの各パネルやエフェクト等の種類が豊富で多機能です。Pro（プロ）と呼ばれる動画ソフトにコンテンツを読み込んで書き出すだけでも、仕事向きに通用するということです。必ずしも手の込んだ編集が必要なわけではありません。有償のPro仕様ソフトの認証がある、という事が仕事となるわけです。
また、教わった作業手順が、大勢の人がよく使う機能や設定など、当たり前のような簡単な操作だったとしても、仕事で通用しますのでProレベルと言えるかもしれません。たとえば、お気に入りブランドの立派な工具セットを持っていても、一度の作業で全部のツールを使うということはないと思います。持っているツールやパーツや色々なエフェクトを使ってみたい、という段階で通用する仕事はほとんどないかもしれません。多種多様のAdobeからいくつかのメニューを選ぶだけですが、オールインワンの有償ソフトを購入していれば、のちのち役に立つかもしれません。
Adobe製品には充分な無料試用期間がありますが、チュートリアルやテンプレート、ヘルプやサンプル等を参考に、色々と試したり練習したりするには期間が足りないかもしれません。手順の流れを決めて、改めて新規プロジェクトから作業することで、完成度が高くプロっぽい作業が身につくようになるとよいと思います。Pro仕様のソフトは、作業の手数が少ない方がなにかと仕事に向きます。動画や画像をあまり劣化させず完成できるからです。

＊作成手順の例
「新規プロジェクト」 　プロジェクト名を決める（名称未設定 でも可）、保存先などを確認　＞OK。
プロジェクトは、編集に使用する動画や静止画、音楽などの素材（クリップ）を管理します。
プロジェクトに素材を読み込みします。
ファイル ＞読み込み　あるいは右クリックメニューから読み込み、準備した動画や画像を一括読み込みして、 リスト表示、サムネイル表示に切り替えできます。
「シーケンス（sequence）」　
１つのプロジェクトの中でタイムラインのビデオとオーディオ・トラックを編集加工した設定にシーケンス名を付けます。プリセットとは、数値など決まっている情報を持っている場合、事前にプリセット作成します。AdobePremiereProには設定済みシーケンス一覧から選ぶ新規プリセットがあります。
試用する場合は気にせず、素材を読み込みした際に設定されているようです。さらに右クリックで「クリップに最適なシーケンス」が自動設定になります。
好みでプリセットを詳細設定、カスタマイズしてシーケンス名を追加、複数作成できます。
「タイムライン」　
プロジェクトにある動画や画像を、タイムラインにドラッグアンドドロップ。タイムラインはV1 V2 V3（Video）A1 A2 A3（Audio）メインのビデオがV1-A1 に入ります。
V1は白っぽく、先頭にイメージとファイル名
Aiは音声の波形が表示されています。
再生マークで動画プレビュー、タイムラインは左→右に移動します。
タイムラインは、編集しやすい縦横幅にドラック操作で調整できます。
「ビデオ編集」(トリミング等)
動画の先頭と終了位置を決めます。不要な部分をカットします。
Delキーで空白部分ができたら右クリックして リップル削除 すると、削除した空白部分削除できます。
全体の動画の時間が短くなったことを確認します。
複数の素材を繋ぐ場合、クリップごとに長さや速度などを調整します。
修正したい箇所で右クリック、速度 の項目で数値を編集します。
「エフェクト（効果）」
多様なエフェクトをすべて説明できません。
個々の動画に対応するエフェクト(効果）を選択します。
映像や音声に対応する各エフェクトやトランジッション（クリップ間の場面転換効果）も、 タイムラインにドラッグアンドドロップすることで設定されます。
「オーディオ（音声）」
あらかじめ音声入りの動画は、タイムライン上でエフェクトを使用して調整できます。全体の音量レベルやノイズなどを調整します。
別に音楽素材を準備して配置している場合は、音楽と映像のタイミングを調整するなど編集作業します。
「テキスト（文字入力）」
タイトルやテロップ、字幕など、テキストの効果で強調したり、動画を解りやすく編集します。 アニメーション効果で、映画のエンドロールの様にテキストが下から上に流れる映像を作ることもできます。
エンドロゴは、タイムラインの最後に画像を配置して表示時間を調整します。
「書き出し」
ファイル ＞書き出し ＞メディア　パネルが出てきますので、ファイル名や保存先などを確認します。編集された映像と音声がシーケンスにセットされて書き出しされます。
作成した動画の用途によって、サイズや解像度の値が決まってきます。WEBサイトによって、既定のプリセットが用意されている場合があるので確認すると良いと思います。

ＢＡＣＫ

だれでもWEBマスター

だれでもHTML＊スタイルシート編

□HTMLで作るホームページ・続編です。
□スタイルシートを知っておこう

準 備
■スタイルシートって？
■ソースコードを見てみよう
■スタイルシートを見てみよう
■スタイルシートを書こう
制 作
■HEADに書くCSS
■HTMLタグに書くCSS
■別ファイルに書くCSS
■ブラウザでチェックしよう
活 用
■余白のCSS
■
HTMLタグで作るホームページ
だれでもHTML/スタイルシート編




■スタイルシートってなんだろう？

スタイルシート、CSS（Cascading Style Sheets)、いわゆるWEBページの「スタイル」、ブラウザに表示されるHTMLページに、レイアウトなどデザインについて記述することができます。
複数のスタイルシートを一括して、ファイルにすることもできます。
拡張子は　.css でファイル保存します。
スタイルシートで、ページ全体のレイアウト設定を決めることも、部分的に(1文字、1行、段落ごと）でも異なる装飾をすることもできます。 スタイルを設定したいHTMLタグの要素に対して、スタイルシートのコードをまとめて記述しておきます。スタイルは、気分で都度追加変更することもできますし、あとで消すこともできます。
Microsoft Wordの「スタイル」メニューの機能のように、フォントとサイズ、文字色などの書式設定をセットにして好みのスタイルのパターンを選んだり、作成したりできますが、スタイルシートも同じように、テキストの様々な書式をいっぺんに設定したり、ページレイアウトや背景色などを自在に記述することができます。ですが、 書式設定やレイアウトなら、HTMLの中でFONTタグや配置のALIGNタグ、背景色のBGCOLORなどもありました。わざわざスタイルシートで書かなくても充分ではないかと思われると思います。 WORDやEXCELにもツールバーの様々な書式設定ボタンで、基本的な書式設定やレイアウトは大概完成します。シンプルな書式はビジネス文書でもWEBでもとても効果的です。ですが、WEBページなど1箇所に複数の設定ができるなら、まとめたり組み合わせたり、また別のページと同じスタイルを共有したり、また正確なサイズや配置を数値で設定できたりして、スタイルシートの記述の方が簡潔になる場合も出てきます。スタイルシートがメリットとなるデザインになると、スタイルシートが優先されるようになってくると思います。

ＢＡＣＫ


■ソースコードを見てみよう

ブラウザでソースコードを見る方法です。ブラウザの画面上で右クリック ＞「ページのソースを表示」
どんなWEBページでも、HTMLタグが読めます。 気になる部分や気に入ったソースコードをコピーして、各自のHTMLに使用することもできます。 ブラウザで表示されるソースは、ページ全体で、コンテンツの部分がところどころで読めるという程、ソースコードがたくさん書かれています。文字が細かすぎるので、画面を拡大すると読みやすくなります。(元のページに戻ると、とても大きな文字になっているかもしれません）
ブラウザの「検索」機能で、 本文のキーワードやHTMLタグを検索すると、普通に見ているページがどの辺りで、どのように書かれているのか、見当がつくと思います。
カッコいいデザインのページや、見やすいレイアウトをお手本に真似してみたいお気に入りページを探して、どのようなスタイルシートが設定されているのか、ソースコードから参照することができます。
ページの見出しや本文の文中に見栄えの良い気になる部分があったら、マウスで範囲選択、コピーして、さきほどの「ページのソースを表示」のタブ内を検索します。どのような装飾がされているか、スタイルシートの記述が見られるかもしれません。HTMLタグなら、
HEAD　BODY　
H1　H2　
P　ALIGN
FONT
HR
IMG SRC
A HREF
などのタグを検索することができると思います。また
OL LI(リストタグ）
TABLE TR TD （テーブルタグ）
なども、よく使われます。これらの各タグが、スタイルシートでは「セレクタ」と呼ばれ、スタイルを設定する要素の部分に当たります。スタイルシートについて手掛かりとなるキーワードは、.css
style
id
class
などが挙げられると思います。それから、
リンクの a もセレクタの種類です。
a: link（リンク先未訪問） と　a: visit(訪問済み）の文字色をスタイルシートで同じ色にすることも、 a: hover （文字の上にマウスをのせた時）スタイルシートで文字色を変えたり、HTMLでリンク設定すると出る下線をスタイルシートで消したり、マウスをのせた時に文字色が変わって下線が出る、などという動的で視覚的な効果のある設定ができます。例えばテキスト（文字）に書式を設定する場合、タグと同様のfontを使います。HTMLタグでは大文字(FONT）小文字(font）いずれでも区別されませんが、スタイルシートの属性（プロパティ）で記述する場合は、小文字(font)になります。 font-size
font-familiy
font-style
font-weight
color
文字色は、HTMLではFONT COLOR　ですが、スタイルシートではプロパティが　color で記述してあれば文字色のことです。text
list
line
width
height

ＢＡＣＫ



■ スタイルシートを見てみよう

スタイルシートの記述のやり方は色々あります。よく見かけるのは｛波括弧｝で記述されていたり、あるいはHTMLに直接 style=” ” などと部分的に記述してあったりします。
それから、タグ内で　id=” ” class=” “ などと見られるのもスタイルシートです。 各部分に凝った書式設定などを何行も記述して、各スタイルシートに名前を付けておいて、スタイルの範囲に id名、class名 で設定します。ただし、設定したい各スタイルが被ってしまうと、思い通りに表示されなかったりします。
ＢＡＣＫ


■ スタイルシートを書こう

それでは、HTMLの見出し を目立たせるスタイルシートを書いてみます。
たとえば、見出し にインパクトをつけて目立たせる。
<H1> CSS見出し1　</H1>

H1 { color: blue; background-color:skyblue;}

見出し１の 文字色は 青；　背景色は 空色；　です。　


<H2> CSS見出し2 </H2>
このように記述すると、どこかで見たことがあるかもしれません。

H2 { color: blue;
background-color:skyblue;
}

見出し２の 文字色は オレンジ色；　背景色は 黄色；　です。　

色の種類を変更すると、文字色、背景色を変えることができます。
RGBカラーコード(#000000; 黒、#ffffff; 白　など）を使えば、様々な色を表現することができます。｛波括弧｝ でページ内に記述されるスタイルシートは、<HEAD>　</HEAD> の部分に書かれていることが多いですが、WEBシステムなどで、BODYの上部に追加で書かれているのを見ることがあります。ブラウザで表示や動作していれば問題ないと思います。<p> は段落のタグですが　H1,H2 のような見出しのタグと同様に、<p> に直接スタイルシートを設定することができます。<p></p> で囲まれていれば、すべて同じスタイルにすることができます。 ですが、各段落に異なるスタイルを設定したい場合は、クラス名でスタイルシートを記述して、 <p> に各設定をします。
<p   class=” “> </p><div> なども<p> と同様です。
<div   class=” “> </div>
<span   class=” “> </span>
HTMLタグに直接スタイルシートを記述することもできます。<H1 style=”color: blue; background-color:skyblue;” >はじめてのホームぺージ</H1><H2 style=”color: blue;” >日記2022</H2><H2 style=”color: blue;” >プロフィール</H2>はじめてのホームページ日記2022プロフィール

ＢＡＣＫ


■ HEADに書くスタイルシート

<HEAD> </HEAD> の中にスタイルシートを記述する場合です。スタイルシートは、 <style> </style> で囲みます。<HEAD>

<style>

H1{ color: blue;
       background-color:skyblue;
}

p { font-family: sans-serif;
      font-size: 1em;
}

.test { font-size: large ;
          color: red ;
}

</style>
</HEAD>などです。
かつては<HEAD> </HEAD>に、 <style type=”text/css”>　</style> と記述しなければなりませんでしたが、こちらが正規とか正式、略式という流儀などではなく、HTML5が通用するブラウザなら、シンプルに、styleタグと呼ばれる記述　<style> </style> がスタイルシートです。セレクタ｛　プロパティ：　プロパティの値；　｝波括弧　｛　｝の中は　：（コロン）で区切り、スタイルごとの文末は；（セミコロン）で区切ります。
改行して、次のスタイルを並べて記述します。
波括弧を1行で書くこともできますが、スタイルを追加・削除したい場合に、行を追加・削除するだけなので、波括弧を改行しているのだと思います。設定中のスタイルも一覧で見やすい記述になっていると思います。
スタイルシートの記述は、セレクタと波括弧、プロパティ、コロンやセミコロンの記号は、半角スペースが何文字分か間隔が空いていても問題ないことが多いです。ただし、スタイルシートの記号などが抜けていると、スタイルを設定したい範囲が崩れてしまうことがあります。スタイルシートの文末のセミコロン記号が漏れていないか、など確認が必要です。セレクタがHTMLタグで要素をあらわす場合、タイプセレクタ（要素セレクタ）と呼ばれます。セレクタの1文字目　 .(ドット）は、クラスの記述で、クラスセレクタ とです。
.(ドット）のあとに クラス名を付けます。　
スタイルに適当に好きな名前を付けておきます。タグとまったく同じ文字列は使用しないようにします。
それから、<BODY>に書かれたタグに、設定したいスタイルを記述します。 .test は クラス名が test で、タグ内で class に対応します。 たとえば、<div>　</div> で囲まれた部分に文字の書式を設定したい場合、
<div class=”test”> のように記述すると、.test のスタイルが適用されています。

ＢＡＣＫ


■ HTMLに書くスタイルシート

先ほどのサンプル例を再掲して説明します。
<H1 style=”color: blue; background-color:skyblue;”>はじめてのホームページ</H1> セレクタが要素なので、H1タグに　style=” ” とタグに追記します。 スタイルは複数、並列して記述して構いません。ですが、style= のあとに囲む“”（ダブルクォーテーション）、スタイル記述の：（コロン）や：（セミコロン）など、記号1文字でも入力が漏れると、スタイルシートが適用されないばかりか、設定した範囲が崩れてしまうことがあります。プレビューして思い通りのスタイルになっていない場合は、細かい部分までスタイルシートの入力を確認する必要があります。メインで、HEAD 部分にスタイルシートを記述してあっても、追加でタグに style= と書いても大丈夫です。

p や div などでは、段落や囲まれた部分によって１つのデザインでおさまるとは限りません。HEAD にまとめて記述したスタイルに、箇所によって都度、スタイルを追加するのも効果的です。また、クラスセレクタを作成して、クラス名ごとの設定で部分的にデザインを変えて、印象的なWEBページにすることも可能です。通常のテキストを太字や下線付きに設定して、思い通りにならない場合は、最初に設定したスタイルと、あとから追加したスタイルのどちらか優先される方が適用されると思います。どちらも表示されなかった場合は、スタイルシートを見直さなければなりません。部分的に追加したデザインの影響で、全体的に見栄えが変わってしまうこともあるかもしれません。
ただし、H1　はトップ見出しなので１ページに1箇所のみ、またH2 H3 はWEBサイトを通じてデザインを固定しておく方が見栄えが整って上手に見えると思います。

ＢＡＣＫ

■ 別ファイルに書くスタイルシート

スタイルシートに馴れてきて、設定したい箇所が増えてくると、HEAD 内に記述が長くなってしまいます。
スタイルシートをメモ帳エディタにまとめて記述して .css で保存します。
.htmlファイルからリンクすることで、記述した各スタイルを設定できます。
<head></head> で囲んだ範囲に、以下のように書きます。
<title></title> の下側の方が適当だと思います。
(ファイル名は　 style_1.css とします。)
<link rel=”stylesheet” href=”style_1.css”>

あるいは
<link  href=”style_1.css”　rel=”stylesheet” >
これでもよいみたいです。各ページから style_1.css にリンクすれば、どのページにも同様のスタイルを設定できるし、 同じHEAD のところに、 <link rel=”stylesheet” href=”style_2.css”>
<link rel=”stylesheet” href=”style_3.css”>

別ファイルに記述したスタイルシートも追加できます。
ページごとに、どの CSSファイルをリンクしても(しなくても）問題ありません。

また、たとえば class名で書いたスタイルシートは、BODY 内のタグに class=”クラス名”を記述しなければなりませんので、CSSファイルに書かれたのすべてのスタイルを設定しなければならない、ということもありません。
事前にスタイルを書いてあっても、実際は設定されないスタイルがあっても構いません。
また、同じクラス名のスタイルを設定を変更したり、あとからクラス名を追加して別のスタイルを作成しても全く問題ありません。
ここで、前述の「セレクタ」について追記しなければなりません。
H1 などタグにスタイルシートを適用するセレクタと、
先頭に .(ドット）を付けてクラス名で書くクラス・セレクタを説明しました。

さらに、先頭に #(ハッシュマーク/ シャープ記号）とID名を付ける、IDセレクタ があります。

#sample { color: #000; }

クラス・セレクタと同様に、BODY の中のタグに
id=”sample” のように書きます。

class=”クラス名”　はページの中で何度でも設定できます。
<p> や　<div> <span> などに、同じクラス名のスタイルを各部分に書いて、同じスタイルを設定することができます。
id=”ID名”　のIDセレクタは、１ページの中で1度しか使えません。ページ全体のスタイルにしたい場合に、ID名を付けるとよいと思います。
これは、body や table tr td h1 h2 などセレクタ要素に記述するスタイルシートの役割と同様だと思います。1ページに書かれたスタイルで、ページ全体のセレクタ要素を設定しますので、追加などはできますが、複数のスタイルが設定されていると、どちらか一方が表示される場合や、いずれのスタイルシートも効かない場合があります。

ＢＡＣＫ


■ブラウザでチェックしてみよう

上書き保存したHTMLファイルは、作成中でもブラウザで随時チェックをするようにします。
いつも使っているブラウザだけでなく、一般によく使われているMicrosoftEdgeやGoogleChome、Safari、FireFoxなど、PCにインストールされている別のブラウザからも閲覧を試してみるとよいと思います。 ファイルの場所がOneDriveやGoogleドライブなどクラウド上なら、スマホやタブレット端末からもファイルを確認することができると思います。Android端末、iPhoneなど手持ちがあれば色々なブラウザ環境から確認してみましょう。

ＢＡＣＫ


■ 余白のCSS

なぜスタイルシートを学んだ方がよいのか、
それは、タグに記述する書式設定だけでは、おおまかなページ作成ができますが、自在なページレイアウト・デザインに及びません。スタイルシートを用いないと、実現できない部分があるからです。 その一例が、余白の設定です。たとえば、alignタグで見出しや本文の各段落を左揃え、中央揃え、右揃えに配置しますが、左端の位置は左端に固定されます。
スタイルシートでは、margin や padding などを設定することで見出しや本文の書き出し位置、インデントのような字下げの位置を、デザインすることができます。

ＢＡＣＫ
だれでもWEBマスター

だれでもHTML＊テーブル・タグ編

□HTMLで作るホームページ・実践編です。
□テーブルタグも覚えよう

準 備
■ テーブル・タグの説明
■ 基本の1行テーブル
■ 基本のテーブル　行×列
■ テーブル・表タイトルなど
制 作
■ テーブル・表 やってみよう
■ 行や列を結合する書き方
■ テーブルの簡単なデザイン
■ テーブルのサイズと配置(更新中）
活 用（更新中）
■ 普通のテーブルの考え方
■ ページレイアウト 画像枠など
HTMLタグで作るホームページ
だれでもHTML
テーブル・タグ編

準備



■テーブル・タグの説明
<table></table>

<tr></tr>
Table Row (テーブル ロウ　テーブル行）

<td></td>
Table Data Cell（テーブル データ セル）

talbe タグで　trタグ、その次にtdタグ で囲み、文章などコンテンツが入ります。
1行1列のテーブル、四角の外枠ができます。
<table>
    <tr>
        <td>
（コンテンツ文を入力する）　
        </td>
    </tr>　
</table>
タグの記述は並べて書いても、以下のように囲んだり詰めても構いません。

<table>
    <tr>
<td>
（コンテンツ文を入力）
</td>
    </tr>　
</table>

<table> <tr> <td>
（コンテンツ文を入力）　
</td> </tr></table>

ここで1つプロパティ(属性)情報を追加します。
TABLE BORDER
罫線(枠線)の表示・非表示
ブラウザやホームぺージエディタ(表）によって、 テーブルタグを記述してテーブル枠が出る場合、出ない場合があります。
<table border=”0″>
枠線が非表示になります。
<table border=”1″>
枠線が表示されます。数値を大きくすると罫線が太くなります。枠線の太さでデザインすることもできます。

1行1列のテーブルを記述します。
<table border=”1″>
     <tr>　
<td>
はじめてのHTMLテーブルを作りました。
</td>　
     </tr>
</table>

ブラウザ表示はじめてのHTMLテーブルを作りました。

ＢＡＣＫ


■ 基本の1行テーブル
1行2列のテーブルを記述します。<table border=”1″>
    <tr>　
  <td>
1行テーブル・左列
 </td>　
 <td>
1行テーブル・右列
 </td>　
    </tr>
</table>

ブラウザ表示1行テーブル・左列1行テーブル・右列表の行数は、TR タグ <tr>　</tr>　で囲む回数で表すことができます。
<tr>　</tr>　の行中で、TDタグ <td> </td>　区切りを入れます。
1行3列のテーブルを記述します。
<table border=”1″>
   <tr>　
 <td>1行テーブル_左</td>　
 <td>1行テーブル_中</td>　
 <td>1行テーブル_右</td>　
   </tr>
</table>

ブラウザ表示1行テーブル_左1行テーブル_中1行テーブル_右

ＢＡＣＫ


■ 基本のテーブル　行×列
2行2列のテーブルを記述します。
表内のテキストの文字サイズを少し大きくしてみます。
<table border=”1″>
    <tr>　
 <td><font size=”+1″>1行目・左</font></td>　
 <td><font size=”+1″>1行目・右</font></td>　
     </tr>
     <tr>　
 <td><font size=”+1″>2行目・左</font></td>　
 <td><font size=”+1″>2行目・右</font></td>　
   </tr>
</table>

ブラウザ表示1行目_左1行目_右2行目_左2行目_右
表の行の数、TR タグ <tr>　</tr>　の囲みを、セットで繰返します。
1行目の <tr>　</tr>　の行中で区切ったTDタグ <td> </td>　は、表の列数にあたりますので、TDタグの囲みが1行目と2行目で異なると、表が崩れてしまいます。また終了タグ</tr>の/(スラッシュ)や>(閉じ括弧記号)など記号1文字でも抜けていると、やはり表が崩れてしまいます。

4行3列にしてみます。
<table border=”1″>
     <tr>　
 <td>1行目・左</td>　
 <td>1行目・中</td>　
 <td>1行目・右</td>　
     </tr>
     <tr>　
 <td>2行目・左</td>　
 <td>2行目・中</td>　
 <td>2行目・右</td>　
     </tr>
     <tr>　
 <td>3行目・左</td>　
 <td>3行目・中</td>　
 <td>3行目・右</td>　
     </tr>
     <tr>　
 <td>4行目・左</td>　
 <td>4行目・中</td>　
 <td>4行目・右</td>　
     </tr>
</table>

ブラウザ表示1行目_左列、表の左上セルです1行目_中1行目_右2行目_左2行目_中2行目_右3行目_左3行目_中3行目_右4行目_左4行目_中4行目_右、表の右下セルです
ここまでの表では、表のサイズを設定していませんので、表内のテキスト文の文字サイズや、文字数によるテキストの長さによって表が表示されている状態です。

ＢＡＣＫ


■ テーブル・タグ　表タイトルなど
ソースコードを閲覧して、テーブル・タグの周辺でよく見られるタグがありますので、説明しておきます。caption
キャプション：表のタイトル テーブル1行目の上行がタイトル行になります。
table の中に書きますが、table border= でテーブル罫線を表示しても、キャプションには罫線の囲みが表示されません。
必ず使わなければならないというタグではありません。表の上にタイトルを入力して改行してもブラウザ表示は同じです。
<table>
<caption> （表のタイトル）</caption>
   <tr>
 <td> （テキスト文_左）</td>
 <td> （テキスト文_中）</td>
 <td> （テキスト文_右）</td>
   </tr>　
</table>
thead テーブル・ヘッダー
th   　テーブル・ヘッダー・セル
テーブルの1行目を見出しにするなどの場合に使えるタグで、テキストが太字になります。
見出し行をグループ化することもできます。
必ず使わなければならないタグではないので、たとえば、表の1行目に見出しにするとき、テキストにフォント・太字を設定する（しない）などで構いません。<table>
<caption> （表のタイトル）</caption>
    <thead>
    <tr>
<th>(見出し_左）</th> <th>(見出し_中）</th> <th>(見出し_右）</th>
    </tr>
    </thead>
    <tr>
        <td> （テキスト文_左）</td><td> （テキスト文_中）</td><td> （テキスト文_右）</td>
    </tr>　
</table>
tbody テーブル・ボディ
テーブルの本体の部分を tbody で囲む場合に使えるタグです。
必ず使わなければならないタグではないのですが、ホームぺージエディタで表作成すると出てきたりして、ソースコードでよく目にするタグです。
テーブル本体のデータ部分が何行で、どこからどこまでか目安になると思います。

tfoot テーブル・フッター
テーブルのフッター部分を囲んで表します。最下行の集計行などです。
必ず使わなければならないタグではありません。

<table>
<caption> （表のタイトル）</caption>

    <thead>
    <tr>
<th>(見出し_左）</th> <th>(見出し_中）</th> <th>(見出し_右）</th>
    </tr>
    </thead>

    <tbody>
    <tr>
 <td> （1行目_左）</td><td> （1行目_中）</td><td> （1行目_右）</td>
    </tr>　
    <tr>
 <td> （2行目_左）</td><td> （2行目_中）</td><td> （2行目_右）</td>
    </tr>　
    <tr>
        <td> （3行目_左）</td><td> （3行目_中）</td><td> （3行目_右）</td>
    </tr>　
    <tr>
        <td> （4行目_左）</td><td> （4行目_中）</td><td> （4行目_右）</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>　
        <td> （フッター_左）</td><td> （フッター_中）</td><td> （フッター_右）</td>
    </tr>　
    </tfoot>
</table>

ＢＡＣＫ
制作


■ テーブル・タグ表 やってみよう

＊メモ帳などテキストエディタに「準備」で読んだHTMLタグを入力練習したり、<table> から </table> までを範囲選択してコピペ（コピー＆ペースト）して「名前を付けて保存」、その際、拡張子を.htmlにします。

ここではとくに、課題やサンプルなど実例を出しません。
テーブル・タグで、たとえば、カレンダー（月、週、二十四節気、七十二候なども）WEBブラウザで見るコンテンツとしてよいかもしれません。また、時間割表などでしたらすべての表セルが表せるので練習になると思います。献立メニュー表、読書や動画視聴の記録、公開したくなるようなコンテンツを、テーブル・タグ表形式でいろいろ作ってみて下さい。
基本のテーブル・タグを範囲選択してメモ帳エディタにコピペ（コピー＆ペースト）、適当にファイル名を付けて拡張子　.html で保存します。HTMLとか BODYとか、すべてきちんと書いていなくても、TABLE ではじまっているタグが正しく書けていれば、ブラウザ画面で入力した表が見られると思います。TD で囲んだセルの中の文章の長さやコンテンツの大きさによって、横長の表をTABLEタグで縦方向に入力する場合もあります。行数や列数が増えると複雑になるので、 テーブル・タグで表を作成する場合、表の部分をメモ帳エディタで別ファイルにしておくと、作成しやすいかもしれません。
思い通りの表ができているかどうか、ブラウザでプレビューしながら、テキストのTABLEタグを入力して、WEBページの表を完成させます。表が完成したら、HTMLファイルのBODYタグの中に、表のTABLEタグをコピペ、貼り付けします。。TABLEを直接入力、TABLEタグのミスが原因で、ページ全体が崩れてしまうことがありますので、ブラウザのプレビューしてもし失敗していたら、エディタの「元に戻す」ボタンで問題なかった状態まで戻します。表を修正して、慎重に貼り付け直さなければなりません。HTMLで表作成に手間取るより、WEB公開されるデータやコンテンツを慎重に入力して更新作業しなければなりません。ホームぺージ作成ソフトのエディタを使っているという方は、大きな表が簡単に出せると思います。表サンプルを入力したら、HTMLソースコードを閲覧してみて下さい。余談ですが、表作成といえばMicrosoft Excelが得意ですが、Excel表をHTMLに載せるには、画像にしなければなりません。表のデータを修正したい場合は、Excelワークシートを入力し直して再度画像にします。画像が同じ名前なら、上書きされると思います。

ＢＡＣＫ


■ 行や列を結合する書き方
縦(垂直)方向のセル結合
プロパティ（属性）は　rowspan

row （ロウ　行）-span
テーブル・タグの <td> に設定します。<td rowspan=”行数”> </td>
　 　 　 　 　 　1行目・左1-2行目・右2行目・左コードを表示します。
<table border=”1″>
  <tr>　
<td>1行目・左</td>　
<td rowspan=”2″>1-2行目・右</td>　
  </tr>
  <tr>
<td>2行目・左</td>
（ここのtd 2行目・右は削除します）
  </tr>
</table>

横(水平)方向のセル結合
プロパティ（属性）は　colspan

col(column コラム　列)-span
テーブル・タグの <td> に設定します。
また、1行目の見出し <th> にも設定できます。
1行目で表の列を結合すると <caption> と同じです。
<td colspan=”列数”> </td>　 　 　 　 　 　 　1行目・左-右2行目・左2行目・右3行目・左3行目・右コードを表示します。
<table border=”1″>
  <tr>
<td colspan=”2″>1行目・左-右</td>
（ここのtd 1行目・右は削除します）
  </tr>
  <tr>
<td>2行目・左</td>　
<td>2行目・右</td>　
  </tr>
<td>3行目・左</td>　
<td>3行目・右</td>
  </tr>
</table>



ＢＡＣＫ


■テーブルの簡単なデザイン
1行目・左1行目・右2行目・左2行目・右
テーブル全体に背景色（黄色）と罫線(表示)を設定
<table bgcolor=”yellow” border=”1″>
<tr>　
  <td>1行目・左</td> <td>1行目・右</td>
</tr>
<tr>
  <td>2行目・左</td> <td>2行目・右</td>
</tr>
</table>

　 　 　 　 　 　1行目・左1行目・右2行目・左2行目・右
表（罫線表示）の各列に別背景色を設定
<table border=”1″>
<tr>　
  <td bgcolor=”yellow”>1行目・左</td>
  <td bgcolor=”orange”>1行目・右</td>
</tr>
<tr>
  <td bgcolor=”yellow”>2行目・左</td>
  <td bgcolor=”orange”>2行目・右</td>
</tr>
</table>

　 　 　 　 　 　1行目・左1行目・右2行目・左2行目・右
表罫線を赤(実線）、各行に別背景色を設定する。
<table border=”1″ style=”border-color: red;”>
<tr bgcolor=”red”>
  <td>1行目・左</td> <td>1行目・右</td>
</tr>
<tr bgcolor=”pink”>　
  <td>2行目・左</td> <td>2行目・右</td>
</tr>
</table>

　 　 　 　 　 　1行目・左1行目・右2行目・左2行目・右
CSSでテーブル・ボーダーのプロパティを指定する。
   ｛ border: -width -style -color; ｝
    borderプロパティ：ボーダーの幅 スタイル 色 の順に書きます。
   幅          border-width:3px;
   スタイル border-style:点線dash;
   色          border-color:赤red;

<table style=”border:3px dashed red;”>
<tr>
  <td>1行目・左</td> <td>1行目・右</td>
</tr>
<tr>
  <td>2行目・左</td> <td>2行目・右</td>
</tr>
</table>

ＢＡＣＫ


■ テーブルのサイズと配置　
1行目・左
　 　 　 　1行目2行目
　 　 　 　 　 　1行目・左1行目・右2行目・左2行目・右

ＢＡＣＫ


活用（更新中）

■ 普通のテーブルの考え方

■ ページレイアウト 画像枠など

ＢＡＣＫ
だれでもWEBマスター

だれでもHTML＊リスト・タグ編


□HTMLで作るホームページ・実践編です。
□もっとタグで書いてみよう

準 備
■リスト・タグの説明
■リストを作るネタをさがそう
制 作
■ リスト・タグで書いてみよう
■2段階リストを作ろう
■リストの行頭アイコン
活 用
■リストを使ったWEBページ(更新中）
■
HTMLタグで作るホームページ
だれでもHTML/リスト・タグ編



■リスト・タグの説明　
箇条書きリスト
<ul></ul>      Unordered list
<li></li>        List Item
<ul></ul> で <li></li>を囲みます。
<ul>　
     <li> 例A　</li>　
     <li> 例B　</li>　
     <li> 例C　</li>　
</ul>
ブラウザ表示
例A例B例C
番号付き(順番）リスト<ol>　</ol>      Ordered List

<li>　</li>       List Item
<ol></ol> で <li></li>を囲みます。
リストの数だけ、<li></li> を並べて、内容を囲みます。
<ol>　
     <li> 例A　</li>　
     <li> 例B　</li>　
     <li> 例C　</li>　
</ol>
ブラウザ表示
例A例B例C

ＢＡＣＫ


■リストを作るネタをさがそう
たとえば、トップページのインデックスメニューがHTMLのリストで書かれます。
トップ、日記、イベントMAP、動画・フォト、プロフィール、SNS、問合せ
ショッピングサイトのカテゴリなどもリストで書かれます。
フード、ファッション、インテリア、ゲーム・メディア、スポーツ・アウトドア
あるいは、勉強中の方は教科、スポーツの種目やチーム名、食堂のメニュー等など
得意な専門テーマを選んで、調べたい内容をざっくりカテゴリ別にリストアップしておくと、メモ書きだけでWEBページになります。私的なWEBページを作りたくなってくるかもしれません。
また、カテゴリ別にお気に入りページURLのリンク集ページを作るのも便利だと思います。WEBページは、公開することでなにより本人用の備忘録、日常的に役立つ参考資料になります。
ページコンテンツを見出し階層と、本文の内容をリスト・タグで囲むことで、見栄えよく配置できます。テーブル・タグでページレイアウトをするより、リストを多様する傾向が見られます。
リスト・タグを用いると、スタイルシートでWEBページのレスポンシブ対応（PCやモバイル端末など異なる画面サイズに合わせてレイアウトを切り替える仕組み）が容易になります。PCでトップページの横長ナビゲーションメニューをスマホで見ると、縦長に並んでいたりします。

ＢＡＣＫ


■ リスト・タグで書いてみよう

＊メモ帳などテキストエディタに「準備」で読んだHTMLタグを入力練習したり、<ul> から </ul> まで、あるいは、<ol> から </ol> までを範囲選択してコピペ（コピー＆ペースト）して「名前を付けて保存」、その際、拡張子を.htmlにします。

トップ、日記、イベントMAP、動画・フォト、プロフィール、SNS、問合せ箇条書きリスト
<ul>　
    <li> トップ </li>
    <li> 日記 </li>
    <li> イベントMAP </li>
    <li> 動画・フォト </li>
    <li> プロフィール </li>
    <li> SNS　</li >　
    <li> 問合せ </li>　
</ul>

WEBブラウザで、それぞれ以下のようになっていると思います。

箇条書きリスト
トップ日記イベントMAP動画・フォトプロフィールSNS問合せ
フード、ファッション、インテリア、ゲーム・メディア、スポーツ・アウトドア番号付き(順番）リスト
<ol>　
   <li> フード</li>
   <li> ファッション</li >
   <li> インテリア</li >
   <li>ゲーム・メディア</li>
   <li>スポーツ・アウトドア</li>
   <li> 　</li>　
   <li> 　</li>　
</ol>
番号付きリスト
フードファッションインテリアゲーム・メディアスポーツ・アウトドア

ＢＡＣＫ


■ 2段階リストを作ろう
2段階のリストを作ります。
親リストの<li>　</li> の中に、別の出来上がった子リストを挿入して、囲みます。
<ul>　
     <li>親リスト　
  <ul>
<li>子リスト</li>　
  </ul>
     </li>　
</ul>
　親リスト　子リスト　　親リストに、子リスト（各データ3個）を追加した例です。
親リストは黒字、子リストは青字で書いています。

「フード」の子リストは　<ol>　で番号付き、
「ファッション」の子リストは　<ul> で番号なし箇条書き　で書いてみます。<ol>　
     <li>フード　
  <ol>
<li>和食</li>　
<li>洋食</li>　
<li>中華</li>　
  </ol>
     </li>　
     <li> ファッション
    <ul>
<li>メンズ</li><li> レディス</li><li> キッズ</li>　
    </ul>
     </li>　
     <li> インテリア　</li>　
     <li> ゲーム・メディア　</li>　
     <li> スポーツ・アウトドア　</li>　
</ol>
ブラウザには以下のように表示されています。　フード和食洋食中華　ファッションメンズレディスキッズ　インテリア　ゲーム・メディア　スポーツ・アウトドア　
ちなみに、3段階でも同様に作ることができます。
<ul>　
     <li>親リスト　
  <ul>
<li>子リスト
  <ul>
<li>孫リスト</li>　
  </ul>
</li>　
  </ul>
     </li>
</ul>
　親リスト　子リスト孫リスト　　　


ＢＡＣＫ


■ リストの行頭アイコン
箇条書きリスト・タグに、 簡単なスタイルシートを追加して、
リストの行頭のアイコンを消す(非表示にする）ことができます。
<ul > </ul>　囲んで作ったリストで
style=”list-style: none;”
list-style の値を　none (なし）に設定します。

以下のようにスタイルシートを記述します。<ul style=”list-style: none;”>　
    <li> トップ </li>
    <li> 日 記 </li>
    <li> プロフ </li>
</ul>

行頭アイコン（記号）を 変えることもできます。
以下のように、　type＝” “　で記述します。

白丸 circle<ul type=”circle”>　
    <li> トップ </li>
    <li> 日 記 </li>
    <li> プロフ </li>
</ul>
トップ日 記プロフ
四角　square<ul type=”square”>　
    <li> トップ </li>
    <li> 日 記 </li>
    <li> プロフ </li>
</ul>
トップ日 記プロフ画像アイコン にする場合 (例　star.png）
スタイルシートで　list-style-image　を使って、画像の場所を指定します。

list-style-image: url(“画像フォルダ/画像名”);
<ul style=”list-style-image: url(‘star.png’);”>
トップ日 記プロフ

ＢＡＣＫ


■ リストを使ったWEBページの活用

ＢＡＣＫ
だれでもWEBマスター

はじめてのホームぺージ

□HTMLで作るホームページ入門です。
□メモ帳やテキストエディタでシンプルな手作りホームぺージを作ってみよう。

準 備
■テーマを決めよう
■全体の構成を考えよう
■サンプルファイルをブラウザで見てみよう
制 作
■トップページをつくろう
■ほかのページも用意しよう
■各ページをリンクさせよう
■ブラウザでチェックしよう
活 用
■アップロードしよう
■ホームページを宣伝しよう

はじめてのホームページ

準備

■テーマを決めよう。

１．どんな内容のホームページを作るのか、企画をしてみます・ 自分の作品（写真、イラスト、エッセイなど）などを掲載する
・ 自分の趣味（読書、音楽鑑賞、映画など）の記録を紹介する
・ 地域やサークル、学校、企業の紹介をする
・ 自分が知っていること、学んでいることをまとめてテキストを作成してみる…..など

２． ホームページのタイトルを決めます。　

ホームページの紹介や検索エンジンに登録するために「タイトル」が必要です。

例　『はじめてのホームページ』

３．具体的な項目（コンテンツ）を設定します。　

●Diary （仕事日記、観察記録、旅行記、育児日記など）
●Book　（お気に入りの本の紹介ページ）
●Profile　（自己紹介　：本名は公開しなくてもよい）

ＢＡＣＫ

■全体の構成を考えよう

HTMLファイルの構成

ＢＡＣＫ

■サンプルファイルをブラウザで見てみよう

ＢＡＣＫ

制作

■トップページをつくろう。

インデックスを作ります。

ホームページは『HTML言語』で表すものですが、ホームページ作成ソフトを使うとHTMLファイルを簡単に作ることができます。

※文字色とページの色を決めておきます。

△文字色：白色

▲背景色：みどり

1.　文字の入力タイトルと各コンテンツの見出しを入力します。 タイトルを＜H1＞
コンテンツを＜H2＞に設定します。

はじめてのホームページ
Diary

Book

Profile

2.　簡単なレイアウトをしてみよう。
全体を中央揃えにします。

3.　文字色・背景色を設定します。
△文字色　：白　色　（White　#ffffff)
▲背景色　：みどり色（Green 　#008000)

4. 名前をつけて保存ホームページ作成ソフトは、ファイル名を入力するだけでHTMLファイルができます。

トップページのファイル名は　index　にします。
（InternetExprolerのアイコンで保存されます）
ホームページ用のフォルダ（MyHomepageなど)を作って、HTMLファイルの保存先はそのフォルダを指定しましょう。



はじめてのホームページ

　Diary

　Book

　Profile

ＢＡＣＫ

■ほかのページも用意しよう。

・diary.html

・book.html
・profile.html

Diary (日記のページ)
タイトル
コメント
内容
・○月×日
・○月×日
・○月×日
diary.html


indexと同様に、Diaryという名前をつけて保存。　

Book(読書の記録）
○月×日　本の名前　作者名　出版社名　コメント・感想等
○月×日　本の名前　作者名　出版社名　コメント・感想等　
○月×日
book.html
Profile（プロフィール）
名前（ニックネーム　など）
出身地
趣味
profile.html



ＢＡＣＫ

■各ページにリンク設定しよう。

□インデックス(index.html) の見出しから各ページへジャンプするように ハイパーリンクを挿入しましょう。


《メモ帳エディタ等でタグで記述する場合》

１．index.html ファイルをメモ帳エディタで開きます。

２．見出しの　Diary、Book、Profile　の文字列の前後に、下記タグを半角英字で記述します。

<a href=”diary.html”>Diary</a>

<a href=”book.html”>Book</a>

<a href=”profile.html”>Profile</a>

３．メモ帳エディタを上書き保存。

４．index.html ファイルをダブルクリックして開くと、各見出しが青文字に変わっています。青文字をクリックして、各ページが開くことを確認しよう。


《ホームページビルダー等作成ソフトの場合》

１．ファイルを開きます。
２．コンテンツ名　Diary　を範囲選択します。
３．挿入　→リンク　→ファイル名を入力（diary.html)
(または参照から『myHomepage』フォルダを選択　→diary.htmlを選択してOK）

４．上書き保存をします。これで、インデックスから各コンテンツのページにジャンプすることができます。
ブラウザの「もどる」ボタンで、トップページを再表示できますが、
ページ内に　index にもどる　表示があると便利でわかりやすいです。


□各ページに、インデックスにもどるためのリンクを挿入します。

１.　diary を開きます。
２.　1番下の行に　Back　と入力します。
３.　Back　を範囲選択してリンクの挿入を設定します。
　　リンク先は index を選択　→　OK

メモ帳エディタでリンク・タグを記述する場合は、各ファイルをメモ帳エディタ開いて、Backの文字の前後にindexページにリンクするタグを記述します。（下記を範囲選択、メモ帳エディタにコピー＆ペーストして、タグでリンク設定してみましょう）

<a href=”index.html”>Back</a>


４.　上書き保存ほかの2つのファイル（Book, Profile ) も同様に作業します。

ＢＡＣＫ

■ブラウザでチェックしてみよう。

myHomepageフォルダをダブルクリックで開いて、index というファイルをダブルクリックすると ブラウザで　トップページが見られます。
コンテンツの　Diary　Book　Profile　の文字が　青字に変わっています。
それぞれの文字をクリックすると、ブラウザでリンク先のページを読み込みます。
ページが変わったのを確認したら、ページ最下段の「Back」をクリック　
トップページが表示されるかどうか、確認してみましょう。

ＢＡＣＫ

活用

■サーバーにアップロードしよう。

myHomepageフォルダの中に作成したHTMLは、インターネットで見るホームページのようにブラウザで表示できますが、これは自分のコンピューターの中に保存されているもので、インターネットで閲覧することはできません。インターネットに接続されたほかのコンピューターで見ることが出来るようにするためには ここで作った４つのHTMLファイルを、自分のホームページのスペース（加入したプロバイダに置かれます）に送らなければなりません。電話回線を利用してインターネットに接続し、自分のコンピューターからWebサーバにファイルを転送します。（アップロード）プロバイダーの加入手続きのときの書類にある「FTPサーバ」を使います。

アップロードには、自分のユーザーID、パスワードが必要です。ブラウザのアドレスバーに「はじめてのホームページ」のURLを入力して、アップロードしたホームページにアクセスしてみましょう。

ＢＡＣＫ

■ホームページを宣伝しよう。

Webサーバーにアップロードした　ホームページのファイルは URLを知っている人であれば、勤務先や学校、家族、知人など インターネット環境にあるコンピューターなら、いつでもどこからでも アクセスできます。もっと、多くの人にホームページを見てもらいたい、という場合は Web上で宣伝をします。

○プロバイダーにあるホームページ宣伝用の掲示板に書き込みをしてみます。

○大勢のユーザーが利用している検索サイトに登録してみましょう。YahooJapan　MSN　などの検索エンジンにサイトの推薦をします。URLとホームページのタイトル、PR文なども書き込みます。また、Goo　Exciteなどのサイトの場合は　URLを登録するだけでブラウザから検索が可能になります。
※登録の手続きをしてから、検索エンジンに掲載されるまで１～2週間かかります。

○Web上に、ホームページ宣伝用の掲示板は数多くあります。（アクセスアップ、ホームページ登録、相互リンク、などのタイトルで検索してみます。）書き込みをして、積極的に宣伝しましょう。

○同じカテゴリのホームページにアクセスして相互リンクを依頼する、という方法もあります。 ます。自分のお気に入りページの管理人に直接メールで、自分のホームページにリンクをはってもらえるように依頼します。個別に問い合わせをすることでWeb上に仲間ができる上に、リンクをはったのホームページ経由でアクセスが期待できます。

たくさんの人に見てもらうためには、宣伝ばかりでなく、興味を持ってくれた人に何度も見てもらう、などの工夫が必要です。ページのレイアウトの楽しさ、美しさ、内容が充実していることはもちろん、 常に新しい情報に更新されていること、お問い合わせがあれば迅速に対応する、などちょっとした心得が秘訣です。 楽しみながら、末永くホームページ制作が続けられますように！

ＢＡＣＫ