知らなきゃ損するIT教室
Web、アプリ制作、プログラミングを楽しむ個人ブログ
HTML/CSS

HTMLとCSSだけで作るミニマムサイトに必要な技術

HTMLとCSSだけで簡単なWebサイトを作ってみました。

  • 架空の「雀荘」のWebサイトです。
  • HTMLとCSSだけで作った静的サイトです。
  • わからないことはググりながら作りました。
  • 作る過程で必要だった技術をまとめました。

 

「Progateを終えたので模写をしてみたい。シンプルで簡単なサイトを作ってみたい。」という、プログラミング初心者の方の役にたったらと思います。

実際につくったサイトはこちら:東金の雀荘こしあん

 

サイトを作るのに必要だった技術

シンプルなミニマムサイトを作るのに必要な技術を一覧にまとめました。

  • ヘッダーの固定
  • navメニューの横並び
  • 画像を丸く切り抜く
  • グーグルマップの埋め込み
  • タップすると電話をかけるリンク
  • CSSで改行する
  • レスポンシブ化

 

意識したこと

  • HTMLタグを適切に使用する(header、main、footer)
  • スタイル、配置がうまくいかない時は、一度「background-color」で要素に色をつけて見てみる。

 

まとめ

Progateを終えたら「シンプルなサイトをマネて作ってみる」と力がついていきます。最初から覚えようとしても覚えられないので、マネから作ってみるといいと思います。よければ参考にしてみてください。

架空の雀荘サイト