未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す　最高の実践コース

HTMLファイルとCSSスタイルシートを書く際に必須と成るテキストエディターを、このコースで使用するADOBE製BRACKETSを例に導入します。

HTMLの最も重要なタグと「要素」について解説します。HTMLがタグによって成り立っていることを理解します。

実際に簡単なHTML文書を書いて、HTMLの実践的な書き方の基礎を学びます。

実際に簡単なHTML文書を書いて、HTMLの実践的な書き方の基礎を学びます。

HTMLにつづいてCSSスタイルシートの書き方の基礎を学びます。セレクターやプロパティ、値など基本的な構成要素について、その書き方と働きを理解します。

HTML文書にCSSスタイルシートを読み込むためのタグの書き方を学びます。これによって外部スタイルシートの読み込みができるようになります。

CSSスタイルシートで使われるプロパティについて、さらにいくつかのプロパティを学び、多彩なレイアウトができるようになります。

HTMとCSSをより分かりやすく解説するボックスモデルの考え方について理解します。これによってWEBページがパズルのように要素を積み上げてデザインされていることが具体的にイメージできるようになります。

このセクションで制作するページのサンプルを見て概要を理解します。制作に必要な練習素材を準備します。

HTML文書の書き方の定型を学びます。

制作するページのHTMLのコーディングを開始します。実際にコードを書くことでタグの構造が理解できます。

タグを他のタグと区別するためタグに名前をつけるid属性とclass属性について学びます。idとclassの違いと使い方を理解してタグを差別化して効率的にコーディングする技術を身につけます。

HTML5から使うことになった新しいタグについて学びます。汎用のDIVタグではなく、コンテンツによってタグを使い分けることでHTML5に準拠したWEBサイトを作る技術を身につけます。

ページ全体をつつむcontainer要素のCSSを設定する方法を学びます。

ページを仕上げます。HTMLとCSSで簡単なページレイアウトの方法が理解できます。

CSSセレクターの書き方を学びます。セレクターを階層的に書くことでタグを正確に指定する方法を学びます。

完成したサンプルのページを見ながらGrid Layoutでレイアウトを行う方法を検討します。Grid Layoutでは最初にページをどう構成するかを考えることが重要です。ここではその練習です。

最初にHTMLコードを書きます。CSS Grid LayoutはCSSの手法なのでHTMLコードは直接関係しませんが、構造を決めるために必要なタグもあります。

このレクチャーでCSSを使ってレイアウトをします。最初なので簡単な構造です。ここで基本を学びます。

このレクチャーでは更に複雑な例をCSS Gridでレイアウトしてみます。まずHTMLコードから書きます。

前回と同じようにしてCSSコードを書きます。

さらにCSSコードをつづけて書きます。

前の２つの例はグリッドレイアウトの中でも難易度はそう高くないものでした。このレクチャーでは更に複雑なレイアウトをグリッドレイアウトを使って実現します。この例ではグリッドレイアウトを使うメリットがよく理解できます。

このレクチャーではサンプルを見ながら構造を理解します。

HTMLのコーディングをします。

完成したページを見ながら、省略できるCSSプロパティがないか検討します。これはCSS Gridの設定を簡略化する学習です。

このコースで製作するすべてのページを見て、さらにこのセクションで製作するiPadProページがどんな位置にあるのか見ます。コース全体を俯瞰することで、今自分が何を学習しているか分かり、学習中に迷うことがありません。

このレクチャーで製作するiPadPro用のメジロのページのレイアウトを見て、どんな要素で構成されているかやサイズなどを検討します。

ここからhtmlのコードを書き始めます。最初のhtmlコードなので丁寧にやりましょう。最初は大まかな要素だけを置いていきます。ここはhtmlだけなので、デザインのことは考えずに要素を並べていきます。このレクチャーではheaderとメインビジュアルの２つの要素を置きます。

引き続きhtmlのコードを書きます。このレクチャーではmainの部分とSNS、footerの部分の要素を配置します。

ここからCSSの設定を書きます。最初は全体を包むcontainer要素からです。ここではCSSもGrid Layoutで書くので注意しながら進めましょう。Grid Layoutの書き方に少しずつなれます。

このレクチャーではheader部分をGrid Layoutでデザインします。最初の実践的なGrid Layoutの使用です。ここではまず基本的な方法で配置します。

次はmain部分のCSS設定です。ここでもGrid Layoutで配置します。前のレクチャーで練習したGrid Layoutをさらに進めて、ここでは左右2段のレイアウトを行います。

引き続きmainとSNS部分のレイアウトを行います。ここではデフォルトでCSSで設定されている不要なmarginやpaddingをゼロにしておくreset.cssの使い方についても学びます。ここレクチャーで大まかなレイアウトは終わりです。

ここから各要素の詳細なCSSを設定します。まずheader部分の中のGlobal navを細かく設定します。Ulとliで設定しますが、単純な横並びの配置なのでFlex Boxを使ってliを配置します。

引き続きFlex Boxを使ってliの均等配置を行います。このレクチャーでは後のレクチャーで詳しく学習する流し込みによるGrid Layout配置も初めて出てきます。

次はメインビジュアルの写真の配置です。この部分は写真を配置するだけなので特に難しい設定はありません。

このレクチャーでは写真３枚を横に均等配置します。Flex Boxを使いますが、space-betweenとjustify-contentという新しい値で均等に配置します。

左右2段に配置されたうちのテキスト部分のCSS設定です。ここは写真もないので特に新しいテクニックは使いません。

次はSNS部分のレイアウト設定です。ここでも均等配置を行いますが、ここでは写真お大きさを%で設定するので注意して学習しましょう。%による大きさの設定は親要素に対する設定であることを理解します。

footer部分のCSSです。Grid Layoutで配置します。marginやpaddingのショートハンドで簡略に書く方法も学習します。

htmlファイルに戻って必要な部分にリンクを設定します。<a></a>タグを使って設定します。

リンクを設定するために<a>タグを使うと、リンクを設定された要素のデザインが変わります。これを避ける設定の方法を学びます。

このサイトではGoogleのWEBフォントを使用します。ここではGoogleのページからWEBフォントをダウンロードし、インスオールする手順を学習します。

続いてインストールしたWEBフォントを使えるようにCSSで設定し、必要な部分に適用させる設定方法を学びます。

このセクションではiPhoneサイズのページを製作します。前のセクションで製作したiPadのページとサイズが異なりますが、htmlやCSSのファイルはiPadのページのものを共用できまず。このレクチャーでは完成したiPhone用のページをiPadのものと比較しながら、どの部分を編集すれば良いかを検討します。

コースに添付したWireframeを確認して、iPhoneページの内容を確認します。

このレクチャーでは今回製作するサイトの全体像を把握します。今回のコースはレスポンシブになるので１つのページに３種類のレイアウトが存在します。そのため制作の途中で今とのページを制作しているのかを常に把握しながら制作することがミスを防ぐことになります。

iPhoneページのcontainerをCSSで設定します。前のセクションで制作したiPadProのconainerと比較して、どこがどのサイズで変化するかを確認してCSSのGrid Layoutの設定を変えます。同じhtmlでCSSでviewportを設定することでレイアウトを変化させる技術を学習します。

メインビジュアルまでのCSSを細かく設定します。フォントの大きさや画像の幅など、iPad版からiPhoneサイズに適合するように編集します。

続いてメインビジュアル以降のCSSを細かく設定します。前のレクチャー同様フォントの大きさや画像の幅など、iPad版からiPhoneサイズに適合するように編集します。

出来上がったページ全体を見て、細かいところを修正します。ここではSNSの図がバランスが悪かったので、サイズを小さくしました。

Responsive Web Designを使うと何ができるのか、なぜ必要なのか、どうして実現するのかを説明します。

デバイスによってWEBページのサイズが変化する様子と、それを行うCSSの設定について、実際のサンプルページを使って説明します。

ページレイアウトを変化させるCSSのメディアクエリについて説明します。

簡単なページを作ってレイアウトの練習をします。ここではまずレスポンシブWEBデザインのhtmlの書き方を学習します。

３種類のデバイスのうち、まず最初に最小サイズのiPhone用のレイアウトを前提にCSSを書きます。

続いて同じスタイルシートにiPadサイズのレイアウトになるようCSSを書きます。この時メディアクエリでサイズを分け、iPadサイズではiPhoneサイズと異なる設定だけを書きます。

最後に同じスタイルシートにPCサイズ用のCSSを書きます。こちらもメディアクエリでサイズを分け、PCサイズではiPadサイズと異なる設定だけを書きます。

このレクチャーでは画面サイズの変化に応じて要素の大きさを変化させるFluid Gridについて学習します。まず最初にサンプルのhtmlを書きます。

続いてFlud GridのCSSファイルを書きます。

最後にFluid Gridで指定する際に使用するサイズを固定値のpxから相対値の%に変更して、画面サイズが変化した時に要素のサイズも変化するように設定します。

要素のサイズを変化させるFluid Gridに対して、画像の大きさを変更するFluid Imageについて学びます。このレクチャーではサンプルのhtmlコードを書きます。

続いてFluid ImageのCSSの書き方を説明します。画像が要素に収まるようにimgを100%でサイズ指定します。

最後に背景画像を要素のサイズに応じて変化させるFluid Imageについて学習します。このレクチャーでResponsive Web Designの基本の説明は終わりです。

このセクションで学ぶ内容を説明しています。ここではすでに完成したiPhoneサイズのMejiroのページをレスポンシブ化して、iPad、PCのデバイスでもサイズに適したレイアウトとデザインになるように編集します。

まずiPhoneサイズのCSSの設定をします。今は要素の幅が固定値のpx（ピクkセル）になっていますが、この値をiPhone8の375pxを100%とした相対値にします。

iPhoneのMejiroページの中の要素の横幅のサイズを375pxを100%として、％で指定し直します。この時縦の高さは横幅が決まると自動的にその内容によって決まるので、デフォルトのautoにしておきます。

iPhoneサイズの仕上げとして、細かい部分を調整します。ここではコンテンツの中央揃えをする必要がなくなったので解除し、要素間の縦の間隔をgapではなく個々に設定しました。この時、縦の間隔を固定値のpxではなく相対値の％で指定する方法も学びます。

次にiPadサイズのCSS設定をします。iPhoneサイズのCSSにメディアクエリを加えて、同じファイルでiPhoneとiPadの２種類が自動的にレイアウトが切り替わるように設定します。

iPadサイズの設定を一つ一つ個別に見ていき、iPhoneと同じ設定の場合は削除して、iPad部分ではiPhoneと設定が異なっている部分だけを書くように整理します。

引き続きiPadサイズのCSS設定の編集です。ここでは写真が多く出てくるので、画像サイズの相対値指定を多く行います。この時、画像のサイズは親要素の横幅を100%にした値になるので、画像の親要素がどれになるかをよく調べて設定します。

同じようにして最後のfooterの部分のCSSを設定します。

完成したiPadサイズの細かい部分を修正します。ミスの多くは幅を％で設定することにため親要素の大きさを誤解することで起きているものです。

iPadで行ったのと同じ方法でPCサイズのCSSも設定します。ほとんどの部分はIpadの設定を引き継ぐことになるのでPCサイズでの修正はほとんどありません。

このセクションからサイト全体を意識したページを制作します。最初はサイトの入り口のindexページです。このレクチャーではサイト全体の構成を説明します。

indexページを詳しく検討します。前に制作したMejiroのページと共通して使える部分はそのまま使い、残りの部分を制作します。このページは最初から3３種類のデバイスサイズを意識して制作することを考えて内容を検討します。

先に制作kしたMejiroのページと共通する部分が多いので、Mejiroのページのhtml、CSSファイルをコピーし、編集してindexページを作ります。そのためのファイルのコピーを行い、不要な部分を削除して準備します。

Adobe XDからサイト内で使用する画像をすべて書き出します。XDを使っていない場合はこのレクチャーと次のレクチャーはスキップします。

引き続きAdobe XDからサイト内で使用する画像をすべて書き出します。XDを使っていない場合はこのレクチャーと次のレクチャーはスキップします。

indexページでは文字原稿の部分が多くあるので、先に文字入力をしておきます。先にテキストだけ入力して、それにタグを加えていくマークアップで進めます。

navigationの部分を制作します。Navの部分は３種類のデバイスでそれぞれ別々のレイアウトになるので、CSSも３つに分かれます。レスポンシブの技術を多用する部分です。

navigation部分のCSSを設定します。ここはulとliで構成されているのでliに対してCSSを細かく設定します。

「最新の目撃情報」部分のhtmlを書きます。この部分は写真のないテキストだけで構成される記事です。レイアウトや罫線、フォントの変化で見やすくなるようGrid Layoutでデザインします。このレクチャーではhtmlだけを書きます。

「最新の目撃情報」部分のCSSを書きます。Grid Layoutでレイアウトするので、構造をよく考えて３つのデバイスサイズでうまくレイアウトが変化するように考えて設定します。

引き続き「最新の目撃情報」部分のCSSを書きます。Grid Layoutでレイアウトするので、構造をよく考えて３つのデバイスサイズでうまくレイアウトが変化するように考えて設定します。

次の観察会のお知らせの部分は先にやった最新の目撃情報と同じですが、一部が画像になっています。その部分だけに注意して同じようにやれば大丈夫です。

次は「野鳥観察会」のCSSを設定します。CSSも目撃情報の部分と同じ設定が多いので特に難しい部分はありませんが、目撃情報と幅のサイズなどプロパティの値が全く同じ部分は共通の設定にして簡略化して書きます。

先のレクチャーと同じ作業を続けます。

indexページをIpadのサイズに適したレイアウトに変更します。この時「最新の目撃情報」と「野鳥観察会」の２つの要素が横2段の配置になるので、そのためにこの２つを囲む「構造化タグ」を作り、これを使ってGrid Layoutを作ります。

先のレクチャーと同じ作業を続けます。

先のレクチャーと同じ作業を続けます。

「観察記録」のhtmlは先の「最新の木k撃情報」、「野鳥観察会」とほとんど同じです。中身のテキストと写真が変更になる簡単な編集です。前の２つの要素の編集を思い出してやってみましょう。

続いて「観察記録」のCSSを設定します。この設定も特に難しい部分はありません。先の２つの要素のCSSと同じように設定します。

「観察記録」のCSSを設定してこのセクションは完成です。

このページの顔になる野鳥大図鑑部分の制作です。このレクチャーではhtmlコードの記述を行います。写真の配置だけですが、枚数が多いので構造をよく理解して行います。

先のレクチャーの写真配置をhtmlで続けて行います。

続いて写真をCSSで配置します。Grid Layout で均等に配置しますが、２枚だけ画像サイズが異なるのでその配置を工夫します。この図鑑部分はGrid Layoutの進んだ応用練習になります。

先のレクチャーの作業を続けます。

先のレクチャーの作業を続けます。ここではページサイズを大きくして写真の配置を変えたときに流し込みではうまく配置できなかった写真を直す方法を説明します。

ページ全体を見直して修正を行います。全体を通すと個別の部分にフォーカスして作業していた時には気づかなかった修正部分がたくさん出てくるので、１つ１つ直します。