勢いだけで情報科学科に入ってしまったので、とりあえずホームページの書き方を勉強してみた。

アドベントカレンダー, 秋の技術記事収穫祭

はじめに

この記事はアドベントカレンダー6日目の記事です。
タイトルの通りパソコン初心者の1年生です!
夏休みにフロントエンドについて勉強したので、アウトプット用に記事を書きました。
温かい目で見ていただけると嬉しいです!

今回勉強したこと

*HTML
*CSS
*(JavaScript)

HTML

まず最初に書いてみたのがHTMLです。
プロゲートという勉強サイトのスライドを見ながらホームページの内容を書きました。
今までC言語しか触ったことがなかったためhead,body,footerの概念が理解できませんでしたが、実際に言語を書いてみて理解することができました!

CSS

いよいよCSSでデザインを付け加える!というところまで来て次に詰まったのがHTMLにCSSが反映されないということです。
先輩に教えていただいて
“"
これの存在を知り感動したのはいい思い出です。
外部ファイルを繋げるというのもこの夏休みに初めて知りました!
そして地味につまづいたのがクラスネームについてです、推し声優さんの写真をサイトに貼ろうとしたのですが、この時の私はクラスネームをどうやって使うのかよくわかっていなかったため、画像のサイズが全て一緒になってしまいました…

JavaScript

後期の授業で勉強する言語ということでほんの少しだけ触ってみました!
とりあえず基本的な文法だけ勉強して、あとはネットのコードを参考にしてホームページ制作に組み込んでみました!
HTMLやCSSのように自力である程度書けるとまではいきませんが、なんとなく使うことができました!

今回作ったホームページ

初めて作る勉強用のホームページということで自分が作っていて楽しいと思えるものを作りました。
オタク仲間の推しを語っているだけのホームページです!

これがホームページを開くと最初に出てくる画面です。
JavaScriptを使いページの切り替えができるようにしてあります。
宣伝は基本なので公式サイトに飛べるようにリンクを貼ってみました!

推しを紹介するページはこのような感じです。
ここではCSSを使って枠を作ってみました!

おわりに

今回HTML&CSSについて完璧に理解できたわけではなく、
*ボーダー
*レイアウト
に関してはまだしっかりと触れていないのでこれからこのホームページに付け加えて勉強していきます。
JavaScriptに関しては基礎の基礎しかわからない状態ですがなんとなく難しそうな気がしているので、後期の講義は心して受けようと思います…
本当に初心者なのでまだまだ技術的にも記事の内容的にも濃い内容はかけませんでしたが、いいアウトプットができました!自分がつまづいたことやこれから勉強していくべきことが理解できたかなと思います!
読んでいただきありがとうございました!