見出し画像

ウェブデザイナーになりたい(2)html,css

(前の記事「ウェブデザイナーになりたい(1)」から続きます)
「ウェブ開発入門完全攻略コース」をセクション6まで完了しました。
これで、HTMLとCSS(初級)は一通り学んだことになるので、作成したWebページを公開します。


HTMLとCSSについて

前置きとして、HTMLとCSSについて簡単に説明しますね。

HTMLとは

  • Webページの構造を作成するためのもの

  • タグで囲まれた要素の組み合わせで構成

CSSとは

  • Webページの見た目を装飾するためのもの

  • セレクタ、プロパティ、値の3要素を使ってスタイルを指定

Webページの作り方

Webページ作成の基本的な流れは以下のようになります。

  1. Webページの大まかなデザインを考える

  2. HTMLで構造を作る(必須)

  3. CSSで見た目を整える(適宜)

詳しくは、動画などをご覧いただければと思います。

3つのページを作ってみました

ちょうど「最後の晩ごはん」シリーズを聴いていたので「もしも夏神さんと海里くんがばんめし屋のページを作ったら」というテーマで「ばんめし屋ホームページ・夏神Ver」「ばんめし屋ホームページ・海里Ver」を勝手に作りました(すみません)。

ちなみに「最後の晩ごはん」は、スキャンダルで芸能界を追われたイケメンが定食屋の店主に拾われ、店員として働く中で、様々な人と出会いながら成長していく、というお話です。
「今時よくある感じだな」と思いながら「でも何か落ち着くんだよな」と常連客になってしまい、聴き続けています。

その1)「ばんめし屋」Webページ・夏神Ver

夏「俺はアイテー?には疎いんや。エイチテーエムエルって何や、水か?」
海「それはエイチツーオーだろ」
という会話を想像しながら、次のような設定で作ってみました。

  • HTMLのみ使用

  • 画像なし

  • モノクロデザイン

  • 店の情報のみ掲載

「ばんめし屋」Webページ・夏神Ver

画像をクリックするとWebページが見られます。
ミニマリストというか、みごとに殺風景ですね。

その2)「ばんめし屋」Webページ・海里Ver

海「夏神さんは遊び心ってもんがちょっと足りないんだよな」
夏「さすがというか何というか、昔取った杵柄っちゅうやつか」
という会話を想像しながら、次のような設定で作ってみました。

  • HTMLとCSS(基本)を使用

  • フリー画像(Unsplash)を活用

  • カラーを追加

  • ウェブフォント(GoogleFonts)を採用

  • 情報を追加

「ばんめし屋」Webページ・海里Ver

少しお店な感じが出ていると良いです。

おまけ)ロイドの紹介ページ

上の2つを作った後で、どこからか「わたくしを差し置いて!」という声が聞こえた気がしたので、ロイドの紹介ページを作成しました。
元ネタは講座内にあった「ペットの紹介ページ」です(ごめんよ)。

ロイドの紹介ページ

フォントと写真が素敵です(デザインは力不足です)。


小説を元ネタにしたページは初めて作ったのですが、楽しかったです。漫画ネタも面白そう。天空闘技場のエントリーページとか(微妙にマイナー)。
次はFlexboxを学びます。

いいなと思ったら応援しよう!