どうもーこんにちは！
育休中ナースメン！
おかずっちです！
今回プログラミングのお勉強として、ホームページ作りをやってみたよ！
見てみてー！
ホームページ作りって？
今回はホームページの見た目を作って見たよ！
文字とか画像を貼り付けて、綺麗なページを作りました！
どうやって作ったか？
Progateというプログラミング学習コースを利用して作ってみました！
今回はhtmlとcssという言語で作ってみたよ！
html、cssってなに？
ホームページって、文字とか画像が書いてありますよね！
これ、実はhtmlやcssで書かれているんです！
これらの言語で「こんにちは」って書くと、ホームページ上に「こんにちは」と表示される、みたいな感じです。
見せる「html」
ホームページ上に文字や画像を「ただただ」表示する言語がhtmlです。
htmlで書いた文字や画像は、ホームページ上に「同じフォント」で「同じサイズ」で上から順に羅列されます。
魅せる「css」
このままだとホームページとしてはとても無機質な印象になってしまいますよね！
ここで、用途に合わせて見やすくしたくなりますよね！
その時に使う言語がcssです！
cssを使うと、文字のフォントを変えたり、サイズを変えたり、横に並べたり・・・。
いろいろ見やすくする工夫ができるわけです！
今回作ったホームページ
htmlとcssを書いていくとこのようなホームページが完成します！
なかなかおしゃれですよね！？
コードの例
プログラミング言語で書いた文字列を「コード」と呼びます。
ホームページ上で「こんにちは」と表示するコードをhtmlとcssで見てみよう！
htmlで「こんにちは」と表示するコード
<p>こんにちは</p>
これでホームページ上に「こんにちは」と表示させることができます！
cssで文字のサイズを変更するコード
p {
font-size:120px;
}
これで「こんにちは」を巨大(120pxというサイズ)に見せることができます！
今後やりたいこと
試しに「おかずっちのトリセツ」のホームページを作ってweb上で公開する、ということをやってみようかな。
設計図
おかずっちのトリセツ
- 道具箱
- キーコンセプト
- 6つのプラン
おかずっちのトリセツ
道具箱とキーコンセプト
- 元気に役立つ道具箱
- 希望
- 主体性
- 学ぶこと
- 権利擁護
- サポート
6つの局面に対応するプラン
- 「日常生活」と対応プラン
- 「ストレッサー」と対応プラン
- 「注意サイン」と対応プラン
- 「調子が悪いサイン」と対応プラン
- 「クライシス」と対応プラン
- 「脱クライシス」と対応プラン
お問合せフォーム
- メールアドレス
- 問い合わせ内容
- 送信
こんな感じで作ってみるか
おわりに
このweb上で公開する、っていうのがかなりめんどくさかったのですが、progateの力をかりて準備までは整えてみました！
まあ、やってみよー！
コメント