
タグを利用して、ウェブサイトの説明文やキーワードの設定方法を初心者向けに解説しています。 ここでは、仮想のクリニックサイトの説明文とキーワードを設定していきます。
タグやタグ、タグなどを利用して、ウェブサイトのレイアウトを組むためのマークアップ方法を解説しています。
htmlコメントアウトを記述して、だれでも読みやすく、見やすいhtmlになるように工夫する方法を解説しています。
cssのwidthプロパティとheightプロパティを使って、ボックスの縦幅と横幅を設定し、ウェブサイトレイアウトの基盤を作ります。
floatプロパティを利用して、2カラムレイアウトを作る方法を初心者向けに解説しています。 clearfixを利用して、floatを解除する方法も合わせて解説しています。
グローバルナビゲーションである事を示すために、タグやタグを使ってナビゲーションをマークアップする方法を、初心者向けに解説しています。
メイン画像を作成する方法を、初心者向けに解説しています。 ここでは、imgタグを使って実際に画像を表示させます。
背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、リストタグを利用してリンク付きのバナーのhtmlを記述します。
背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、インライン要素であるリストタグにdisplayプロパティをかけ、背景画像を指定します。
お知らせ部分のマークアップ方法を、初心者向けに解説しています。 ここでは、floatを使って、日付であるdtと本文であるddを横並びにするfloatを記述します。
HTMLファイルを新規作成する方法について、中級者向けに解説をしています。 ここでは、真っ白なHTMLファイルに、必ず必要なタグを記述して土台を作っていきます。
リセットCSSを導入する方法について解説しています。 ここでは、実際に導入して無駄な余白をなくします。
背景画像を使ってロゴのアイコンを表示させる方法について、解説しています。 ここでは、backgroundプロパティを使ってロゴのアイコンを表示させます。
余白を調整してロゴを完成させる方法について解説しています。 ここでは、paddingという内側の余白を調整するCSSを利用して、背景画像と文字のかぶりをなくします。
マウスホバーで下線がつくリンクを作成する方法について解説しています。 ここでは、:hover擬似クラスと背景画像を利用して、下線の下に下向きの三角形を表示させます。
ナビゲーションの位置を調整する方法について解説しています。 ここでは、marginプロパティを利用して余白の調整を行います。
右上のお問い合わせバナーを配置する方法について解説しています。 ここでは、positionプロパティを利用して絶対位置を指定した配置を行います。
影のついたメイン画像を作成する方法について解説しています。 ここでは、box-shadowプロパティを利用して自然な影をCSSで表現します。
新着情報一覧の背景を作成する方法を解説しています。 ここでは、背景の色と内側の余白を、レイアウト崩れのないように設定していきます。
スクロールできる新着情報一覧を作成する方法を解説します。 ここでは、overflowプロパティを利用して、ボックスからはみ出た部分の文字をスクロールさせます。
ここでは、フッター部分のマークアップ方法を解説しています。 テキストをセンタリングしたり、内側の余白を調整して、デザインと同じになるようCSSを記述します。
下層ページ用にファイルを複製する方法を解説しています。 ここでは、トップページのhtmlファイルを複製し、必要のないタグを削除します。
ご予約ページ用のファイルを新規作成する方法を解説しています。 ここでは、ほぼ同じデザインのhtmlファイルを複製し、文章等の修正を行っていきます。
フォームのラベルを設定する方法を解説しています。 ここでは、ラベルをタグを使ってマークアップします。
チェックボックスを作成する方法を解説しています。 ここでは、チェックボックスとラベルを作成します。
フォームの入力欄に対してのCSSをかける方法を解説しています。 ここでは、デザインと同じになるように境界線や色、余白等の設定を行っていきます。
ウェブマガジンを作成するためのスタイルシートを読み込む方法を解説しています。 ここでは、linkタグを使って実際にcssを読み込み、確認します。
ウェブマガジンのレイアウトを組む方法を解説しています。 ここでは、必要なボックスタイプのタグの記述を行います。
ウェブマガジンのレイアウトを組む方法を解説しています。 ここでは、CSSをかけて真ん中に寄せたり余白の調整を行います。
ウェブマガジンのヘッダーを作成する方法を解説しています。 ここでは、ヘッダーのロゴとナビゲーションにデザインと同じになるようにCSSを加えます。
ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、まずボックスを用意し横に並べていきます。
ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、必要な画像や文字をHTMLを使ってマークアップしていきます。
ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、positionプロパティを利用してカテゴリータグを作成していきます。
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、ランキング一覧のHTMLに対して、レイアウトに関するCSSをかけていきます。
ウェブマガジンサイトのコンテンツをレイアウトする方法を解説しています。 ここでは、clearプロパティを使ってfloatを適切に解除します。
ウェブマガジンサイトのコンテンツをレイアウトする方法を解説しています。 ここでは、floatを使って2カラムレイアウトを組んでいきます。
ウェブマガジンサイトのサイドバーを作成する方法を解説しています。 ここでは、文字に関するCSSを記述していきます。
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、backgroundプロパティを利用して、アイコン付きの見出しをマークアップします。
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、記事一覧の背景の色や境界線、レイアウトを、デザインと同じになるように調整します。
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、positionプロパティを利用して、タグの部分を作成していきます。
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、余白の調整や複製を行います。
ウェブマガジンのページネーションをマークアップする方法を解説しています。 ここでは、リストタグを利用してHTMLを記述していきます。
HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです
実際の3つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルが身につきます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。
★こんな人におすすめ★
★特徴★
★内容★
①【初心者向け】クリニックサイトのマークアップ(1)
実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。
②【初心者向け】クリニックサイトのマークアップ(2)
実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。 【初心者向け】クリニックサイトのマークアップ(1) の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。
③【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。 完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。
④【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 マウスホバーでリンクに下線をつけるなど、操作性も意識したマークアップ方法を学びます。 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜の続きの章になります。
⑤【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。
⑥【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 作成したトップページのファイルを複製して、下層ページをマークアップします。 同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。
⑦【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 inputタグを利用した、お問い合わせフォームを作成する方法を学びます。CSSを利用して、入力しやすいようにデザインを反映させていきましょう。 【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。
⑧【上級者向け】Webマガジンサイトのマークアップ(1)
実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。 HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。 なるべくタイプミス等しないように注意してください。
⑨【上級者向け】Webマガジンサイトのマークアップ(2)
実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。 【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。
⑩【上級者向け】Webマガジンサイトのマークアップ(3)
実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。 【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。
⑪【上級者向け】Webマガジンサイトのマークアップ(4)
様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。 縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。 Webメディアに必要なページネーションや、フッターを作成していきます。 10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。