HTML＆CSS入?

ウェブサイトを作成したい人は、遅かれ早かれHTMLに触れることになります。そのため、今後のビデオトレーニングで一緒にHTMLの素晴らしい世界を探検していきます。ステップバイステップで、この言語がどのようなものかや、スタイルシートと組み合わせてウェブサイトを作成する方法を見ていきます。しかし、最初に質問があります。実際にHTMLとスタイルシートには何が関わっているのでしょうか？また、このビデオトレーニングの最後には、ウェブサイトを作成およびテストするために必要なソフトウェアについても知ることができます。

プログラミング言語（たとえばJavaのような）とは対照的に、HTMLでは特に深く慣れる必要がなく、すぐに最初の結果を得ることができます。最初に必要なものは、エディタとブラウザだけです。このビデオトレーニングでは、最初のHTMLドキュメントを作成し、その結果をすぐにブラウザで確認することができます。そして、HTMLドキュメント、つまりウェブページがどのように構築され、どのような基本構造に従うか、それについても学ぶことができます。

要素、タグ、属性といった用語の関係は、このシリーズの第1部で既に知っているはずです。では、これらの要素が実際にHTMLドキュメントでどのように活用されるかについて説明します。最後に、このビデオトレーニングでHTMLコードを構文的に確認する方法を学ぶことができます。

あなたたちのウェブサイトはおそらく画像だけでなく、テキストからも構成されているはずです。そして、良い可読性を確保するために、テキストは適切に構造化されるべきです。そのために、HTMLには多くの要素が用意されています。このビデオトレーニングでは、テキストのための主要な構造化要素が紹介されます。また、HTML特有の文字をマスクする方法や、プログラムリストを出力する方法についても学ぶことができます。

テキストを読みやすくするためには、適切なフォーマットが必要です。そして、それは見出しや文章に加えてさらに進んだ構造要素が必要です。例えば、HTMLでは引用を示したり、個々の部分を太字や斜体で表示したりすることができます。そのための必要な準備は、このビデオトレーニングで提供されています。

HTMLで何度も遭遇することになる要素はリストです。これはTo-doリストや連絡先だけでなく、メニューの定義にも当てはまります。つまり、リストはHTMLで非常に重要な役割を果たしています。それを詳しく見てみる十分な理由があります。このビデオトレーニングでは、HTMLが提供するさまざまなリストの種類を学びます。それらは、順序なしリスト、順序付きリスト、定義リスト、メニューリストです。さらに、必要に応じてリストを視覚的に調整する方法についてのヒントも提供されます。

テーブルは、ウェブサイトで依然として重要な役割を果たしています。ただし、データの表示に関してのみです。CSSがなかったり、ブラウザーがまだ本当にサポートしていなかった時代には、テーブルは別の目的にも利用されていました。レイアウトを構築するために使用されていました。テーブルのセル内に個々のページ要素が配置されました。しかし、CSSのおかげで、そのようなレイアウトテーブル・モンスターは過去のものとなりました。現在、ウェブデザインでのテーブルは、本来の目的であるデータのわかりやすい表示のためにのみ使用されています。

整合性のある見栄えのする表は、必ずしもテーブル行内の同一数のセルで構成されている必要はありません。このビデオトレーニングでは、テーブルのセルをどのように結合するかを紹介しています。2番目のパートでは、表の見出しについて詳しく説明します。この側面は重要です。最終的にどのデータに関するものかを訪問者にすぐに示すことができるからです。ビデオトレーニングは、HTMLでのテーブルのデザインに詳細に焦点を当てて終了します。特に、これまでのHTMLバージョンと比較して、この分野では非常に多くの進歩が見られます。

ほとんどのウェブサイトは画像なしでは済みません。ですから、このシリーズでも画像のテーマが重要な位置を占めているのは当然です。この動画トレーニングと次の動画トレーニングでは、どのようにして画像をウェブサイトに組み込むかを示します。しかし最初に関心を持つべき点が別の側面にあります：どの画像形式がオンラインで使用するのに適しているのか？ 第2部では、画像パスを参照する方法について説明します。

基本的に画像がどのように参照されるかは、前の部分で示されました。画像に関する限界はまだ達成されていません。実際、適切な属性を使って画像を詳細に説明することができます。それがこのビデオの最初に取り上げられている内容です。2番目の部分では、HTML5構文を使用して画像キャプションをどのように設定するかが説明されます。

インターネットのスープにおける塩は、ハイパーリンクを使ってコンテンツ同士をつなぐことができる可能性です。もしそのハイパーリンクがなければ、今日の形でのインターネットは考えられないでしょう。HTMLによるハイパーリンクの定義に関する異なる方法については、このビデオトレーニングと次のビデオトレーニングで学ぶことができます。

HTMLのリンクに関しては、前のビデオトレーニングで紹介されたよりもはるかに多くの機能があります。例えば、電子メールリンクを定義したり、ダウンロード用のファイルを提供したりすることができます。これらやその他のハイパーリンクの種類については、このビデオトレーニングで学ぶことができます。

前もって言っておきますが、HTML5におけるフォームは飛躍的な進化を遂げました。多くの新しいフィールドタイプのおかげで、非常に興味深いフォームを作成できるようになりました。この新しい機能についてはもちろん後で学んでいただきます。しかし、このビデオトレーニングでは、フォームの定義に必要な基本的な知識から始めましょう。最初に、1行入力フィールドの作成方法について説明します。これをどのように定義し、どのように事前に値を設定し、書き込み不可にするかを説明します。同様に、パスワードフィールドの定義方法も学んでいただきます。これは時々必要になるフィールドタイプです。

この動画では、フォームに組み込むことができるさまざまなフィールドタイプを学ぶことができます。具体的には、選択フィールド、ラジオボタン、およびチェックボックスが挙げられます。これらすべてはフォームで常に必要とされる重要な要素です。したがって、これらと他の要素により詳細な視点を向けることが十分な理由です。

HTML5では、特にフォームに関して大きな進化がありました。現在利用可能になっている数多くの新しいフォーム機能について詳しく見てみる価値があります。つまり、つまらない入力フィールドはもうありません。ようやく、JavaScriptを使用せずにスライダーや日付フィールドなども定義できるようになりました。

HTML5のフォームの世界への入り口は、前のビデオトレーニングが整えてくれました。しかし、この先もまだまだ終わりではありません。実際、HTML5はこの分野でそれ以上のことを提供しています。

HTML5の他の使えるフィールドタイプの他にも、興味深い様々な側面があります。例えば、Googleのようにフォームフィールドに簡単にオートコンプリート機能を実装することができます。これらの機能などがこのビデオトレーニングで紹介されています。

HTML5に取り組む人にとって、セマンティクスの話は避けて通れません。このビデオトレーニングと次のビデオトレーニングで、HTML5がもたらす最も重要な要素を学び、文書を適切に構造化する方法について学んでいきます。実際、この論理的な構造化は、Webサイトを将来に向けて確実に保護するために不可欠です。

HTML5が多くの新しい構造化要素をもたらしています。これらを基本的には、前のビデオトレーニングで既に紹介しました。今は、これらの要素を実際に活用することに焦点を当てます。なぜなら、これらの要素が文書の意味論的構造化を担うからです。このビデオトレーニングでは、まず最初にarticleとsectionという2つの要素を紹介します。これらはHTML文書の基本的な構造を担います。そして、このビデオの最後では、div、article、sectionのそれぞれの違いについて再度確認します。

HTML5で文書を記事やセクションに分割するだけでなく、header、footerなどの多くの追加要素があり、意味のある構造を提供します。これらはぜひ詳しく検討する価値があります。

このセマンティック・エレメント・シリーズの最後のビデオトレーニングでは、さらに構造化要素を学ぶことになります。実際、HTML5にはナビゲーション領域やマージナル領域、そして要約のための要素も提供されています。

以前のHTMLバージョンでは、マルチメディアコンテンツを組み込むことは苦労でした。object要素とembed要素の組み合わせを使用して、ビデオやサウンドをウェブページに組み込もうとしました。組み込まれたビデオが実際に再生されるかどうかは疑問でした。HTML5でもこの分野では多くの進化がありました。

ビデオを組み込む方法を見ました。そして、もちろんビデオだけがウェブサイトの訪問者に表示できるものではありません。このビデオトレーニングでは、HTML5がオーディオファイルやFlash動画の組み込みに関してどのようなオプションを提供しているかについて説明します。なぜなら、これらのものも時々自分のサイトに表示する必要があるからです。

FramesはHTML5ではもはや存在しません。しかし、その名前の似たiFramesは新しいHTML時代にも取り込まれ、HTML5でも利用できます。クラシックなFramesはページを独立した領域に分割しますが、iFramesを使用すると任意のリソースをWebページに埋め込むことができます。

HTMLはコンテンツの構造化に使用されます。ページのデザインに入ると、Cascading Stylesheets（CSS）が重要です。なぜなら、CSSとHTMLの組み合わせで地味なHTML構造から魅力的なウェブサイトを作ることができるからです。だからこそ、CSSに詳しく見ていく必要があります。

CSSに関連して常に遭遇するであろう用語は、「セレクター」です。 これらのセレクターを使用して、最終的にはCSSで書式設定される要素を指定します。 このビデオトレーニングでは、最初のセレクターを学んでいきます。 ここでは、要素セレクター、IDセレクター、およびユニバーサルセレクターが紹介されます。 CSSでウェブサイトをデザインする際に、これらを日々扱うことになります。

前のビデオトレーニングでいくつかのセレクタが紹介されましたが、CSSにはもちろん他の多くのセレクタがあります。

この最後のセレクタビデオトレーニングでは、特別な種類のセレクタについて紹介します。それらは疑似クラスや疑似要素と呼ばれるものです。これらは特定のHTML要素に関連するのではなく、出力デバイスによって生成されるセレクタです。

このビデオトレーニングおよび今後のビデオトレーニングでは、最も重要なCSSプロパティについて紹介します。この場ではCSSリファレンスを提供することではなく、CSSで何が可能かを感じていただくことが目的です。まずは文字のスタイルについて始めていきます。このビデオトレーニングでは、フォントに関連するすべての要素が紹介されます。また、文字のスタイルに関連する他のプロパティもありますが、それは次のビデオトレーニングで紹介される予定です。

このビデオトレーニングで紹介されているCSSプロパティを使用すると、テキストや文字を視覚的に調整することができます。たとえば、文字間の間隔を変更したり、テキストの配置を調整したりすることができます。これらのプロパティもあなたがテキストを魅力的にプレゼンテーションするのに役立ちます。

もちろん、CSSには色の定義やグラフィカルな背景も欠かせません。これらの対応するプロパティは、このビデオトレーニングで紹介されます。実際、CSSはこの分野でも多くの可能性を提供しています。色や画像だけでなく、繰り返し表示される背景画像も可能です。

Webサイトのレイアウト設計に関して、外側の余白や間隔の定義に対処することになります。これらのCSSプロパティの実用的な使用例を示す包括的なサンプルプロジェクトも、このシリーズの最新のビデオトレーニングで実装されます。

CSS は、テキスト段落やブロックに対して興味深いプロパティを提供しており、それを皆さんに伝えたいと思います。例えば、テキスト段落を左右に揃えることができます。

言語がフレームについて話されると、ほとんどの人は最初に表を思い浮かべるでしょう。そして実際、フレームは表と関連して重要な役割を果たします。ただし、CSSを使用して他の要素にもフレームを付けることができます。そして、これらのフレームが最終的にどのように見えるかも、CSSの定義によって明示的に決めることができます。

リストをどのように定義するかは、おそらくすでに知っているでしょう。 なぜなら、このシリーズでは詳しく説明されているからです。 しかし、リストは家の中でシックではありません。 視覚的に魅力的に見せるためには、適切なCSSプロパティがあります。 それらが何であるか、そしてどのようにそれらを使用するかは、このビデオトレーニングで学ぶことができます。 2 回目のパートでは、より複雑なナンバリングを実現できるカウンターについて説明します。

Webサイトのレイアウトに関する話題となると、いわゆるボックスモデルがあなたの常連になります。なぜなら、最終的に要素がどのようにどこに配置されるかを決定するからです。

ウェブサイト内の要素を特定の位置に配置するためには、特定のCSSプロパティを使用する必要があります。

前のビデオトレーニングでは、フローティングプリンシプルと呼ばれるものが簡単に紹介されています。 ただし、このトピックは非常に複雑であり、ここで再びフローティングに詳細に焦点を当てます。 実際、これはCSSで重要な概念です。 なぜなら、このトピックを理解しないとWebサイトを実際に作成することはできないからです。

これまでのビデオトレーニングでは、HTMLとCSSを使った作業の基本が説明されました。もちろん、最初の成果も出すべきです。次のビデオトレーニングでは、ステップバイステップでサンプルのウェブサイトを構築していきます。ただし、このビデオトレーニングではまず、さまざまなレイアウトのバリエーションを学びます。なぜなら、ウェブサイトのデザインを考える際には、適切なレイアウト形式を選択することが常に最初にくるからです。

私は私たちの実務プロジェクトで typischen Spaltenlayout を前提としています。しかし、このプロジェクトをライブで、そして実物でプレゼンする前に、皆さんに具体的にお見せしたいと思います。ご自身で Spaltenlayouts をどのように実現できるかを。ここでは、2列と3列のレイアウトに焦点を当てます。なぜなら、これらは依然としてウェブサイトの大部分を形作る基礎だからです。

以下のビデオトレーニングで、ウェブサイトのレイアウトを段階的にどのように実装するかをお見せします。そのためには異なるアプローチがあります。レイアウトはよくPhotoshopで作成されます。次に、各ページ要素を切り出して、CSSとHTMLを使用して再度ウェブサイトとして組み合わせます。ここでも同様に行われますが、私はPhotoshopの代わりに無料で利用できるGIMPを使用しています。しかし、説明された手順はPhotoshopでも理解できます。

自分自身のレイアウトに向けた最初のステップは前のビデオトレーニングで行われました。 もちろん、まだ多くの要素が足りません。 これらはこのビデオトレーニングで追加されます。 レイアウトが完成したら、切り取り作業、つまり「スライス」と呼ばれるプロセスに移ります。 なぜなら、これがHTMLとCSSを使って作成されたデザインを実際に実装するための作業手順だからです。

レイアウトはあなたが作成しました。これからその実用的な実装に移ります。このビデオトレーニングでは、一緒にウェブサイトのHTML基本構造を作成します。

このサイトの骨組みはできていますが、まだかなりスパルタンな状態です。このビデオトレーニングでは、サイトのコンテンツがさらに拡充されます。最初に焦点を当てるのは、ページの上部にあるメニューです。それに続いて右側と下部のメニューが続きます。

見た目の魅力あるウェブサイトのための重要な側面はもちろん、そのフォントデザインです。このシリーズの途中で、HTMLとCSSがフォントデザインに関して提供する可能性をすでに知ってきました。このビデオトレーニングでは、これらを使用してページをより魅力的にする方法を学びます。また、従来の変種だけでなく、"エキゾチック"フォントの使用についても取り上げます。その際の魔法の言葉は、@font-face です。

通常、訪問者には連絡先を提供するべきです。最も簡単な方法は、電話番号と/またはメールアドレスを記載することです。これは訪問者が利用しやすい方法ではありません。そのため、このビデオトレーニングでは、訪問者が簡単に連絡を取ることができるフォームを作成します。そして、当然、HTML5とCSS3で提供される機能を活用します。

フォームの基本的な構造と基本的なデザインは定義されて完了しています。実際、このフォームはすでにかなり魅力的に見えます。しかし、CSS3を使用すると、フォームの視覚的な装飾にはまだかなりの余地があります。したがって、このビデオトレーニングでは、フォームを少しデザインします。

現時点では、おそらくウェブサイトの開発に多くの時間と労力を費やしてきたことでしょう。コンセプトからレイアウトのデザイン、HTMLとCSSへの実装に至るまで。それだけの基礎があるので、ついに世界にあなたたちのウェブサイトを披露する時が来ました。このビデオトレーニングでそれについて詳しくお話しします。私がどうやってウェブサイトをオンラインに公開するかを見せます。まず、適切なプロバイダーと適切なウェブスペースパッケージを入手する方法を紹介します。その後、人気のあるFileZillaを使用してデータをサーバーにアップロードします。そして、そう、ウェブサイトが実際にオンラインになります。

このビデオトレーニングでは、Webサイトを作成するための適切な開発環境を紹介したいと思います。すでに完全なWebサイトまたは小さな単一ページを作成したことがある人は、通常、これらのエディタを持っているはずで、このビデオはスキップできます。

以下が表示されます：
DreamWeaver
Panic Coda Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5のボイラープレートは、HTML5およびCSS3ウェブサイトのための強力なテンプレートであり、HTML5を可能な限り異なるブラウザに対応させ、JavaScript、CSS3、そしてもちろんHTMLのいくつかの非常に優れたコードテンプレートが含まれています。

このビデオトレーニングでは、これらの機能を紹介します。HTML5とCSS3の領域でのスタートには現在これ以上の選択肢はありません。

このビデオトレーニングでは、HTML5とCSS3を開発するための非常に役立つツールを紹介します。

これには、以下が含まれます：
html5css3box.com
kuler.adobe.com（現在は https://color.adobe.com/de/create/color-wheel）
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com