「html」と「css」でホームページを作ってみた!

プログラミング勉強

どうもーこんにちは!

育休中ナースメン!

おかずっちです!

今回プログラミングのお勉強として、ホームページ作りをやってみたよ!

見てみてー!

ホームページ作りって?

Progateで言われるがままにプログラミングして出来たホームページ

今回はホームページの見た目を作って見たよ!

文字とか画像を貼り付けて、綺麗なページを作りました!

どうやって作ったか?

Progateというプログラミング学習コースを利用して作ってみました!

今回はhtmlとcssという言語で作ってみたよ!

html、cssってなに?

ホームページって、文字とか画像が書いてありますよね!

これ、実はhtmlやcssで書かれているんです!

これらの言語で「こんにちは」って書くと、ホームページ上に「こんにちは」と表示される、みたいな感じです。

見せる「html」

htmlで『Hello World Hello World…….』と打ち込むとこうなる!

ホームページ上に文字や画像を「ただただ」表示する言語がhtmlです。

htmlで書いた文字や画像は、ホームページ上に「同じフォント」で「同じサイズ」で上から順に羅列されます。

魅せる「css」

cssを書いて文字の大きさを巨大にしたよ!

このままだとホームページとしてはとても無機質な印象になってしまいますよね!

ここで、用途に合わせて見やすくしたくなりますよね!

その時に使う言語がcssです!

cssを使うと、文字のフォントを変えたり、サイズを変えたり、横に並べたり・・・。

いろいろ見やすくする工夫ができるわけです!

今回作ったホームページ

htmlとcssを書いていくとこのようなホームページが完成します!

なかなかおしゃれですよね!?

コードの例

プログラミング言語で書いた文字列を「コード」と呼びます。

ホームページ上で「こんにちは」と表示するコードをhtmlとcssで見てみよう!

htmlで「こんにちは」と表示するコード

<p>こんにちは</p>

これでホームページ上に「こんにちは」と表示させることができます!

cssで文字のサイズを変更するコード

p {

font-size:120px;

}

これで「こんにちは」を巨大(120pxというサイズ)に見せることができます!

今後やりたいこと

試しに「おかずっちのトリセツ」のホームページを作ってweb上で公開する、ということをやってみようかな。

設計図

おかずっちのトリセツ 

  • 道具箱
  • キーコンセプト
  • 6つのプラン

おかずっちのトリセツ

道具箱とキーコンセプト
  • 元気に役立つ道具箱
  • 希望
  • 主体性
  • 学ぶこと
  • 権利擁護
  • サポート
6つの局面に対応するプラン
  • 「日常生活」と対応プラン
  • 「ストレッサー」と対応プラン
  • 「注意サイン」と対応プラン
  • 「調子が悪いサイン」と対応プラン
  • 「クライシス」と対応プラン
  • 「脱クライシス」と対応プラン

お問合せフォーム

  • メールアドレス
  • 問い合わせ内容
  • 送信

こんな感じで作ってみるか

おわりに

このweb上で公開する、っていうのがかなりめんどくさかったのですが、progateの力をかりて準備までは整えてみました!

まあ、やってみよー!

コメント

タイトルとURLをコピーしました