日記を書いて6日目になりました。

今日は本を読めなかったので、「学んだことのアウトプット(HTML&CSS)」をする記事にします。

ベアさん

アウトプットシリーズは全部で5つ作成するよ！

実はこの日記の公開は22:30分ごろで、もう眠い…って思ってるのですが気合いを込めて書きました(自分でハードルを上げる笑)

また、なぜアウトプットするかというと

かな〜と思ったからです。

僕が稼げるようになった時、「ふむふむ。このぐらい学習すれば良いのか」って読み返していただけたらと。

なので、気になる人はぜひ最後まで読んでくださいね。

ベアさん

プログラマー / 起業家

Profile

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。

プロフィールを読む

X

アウトプットシリーズ全体像

ちょうど忘れてきそうなタイミングなのと、本読めてないのもあるので一旦学んだことをアウトプットします。

ベアさん

頭の中を整理したかったし！

アウトプットする内容は

の5つで、今日は第一弾なので「HTML&CSS」について書きますね

ちなみに、「頭の中にあることを書き出す→調べる」の2段構成です。

それでは、詳しく書いていきます↓

HTML&CSS

第一弾はHTMLとCSSについて書きます。

日記では学習の過程を書いてないですが、エンジニアになるときに学んだのと今も実務で使ってるので。

それでは、見ていきましょう↓

頭の中にあること

そもそもの前提知識

そもそも、HTMLとCSSはプログラミングではなくて

という、また別の言語です。

そして、HTML&CSSを使って「静的なWebページ」を作成することができます。

例えば、

などをコーディングして作れますね。

具体的な技術については、以下で解説します↓

HTML

HTMLは大きく

みたいなのを押さえたらOKです。

タグで表示される内容が決まって、属性は追加オプションみたいなもの。

基礎文法は以下の通りです↓

実例↓

・リアルな表示(四角の中)

・コードの内容(「//」から始まるのは解説コメントです。)

// hタグ(見出し)
<h1>大見出し</h1>

// pタグ(段落)
<p>今日は良い天気</p>

// aタグ(リンク)
// href属性にはリンク内容を入れる
<a href="https://x.com/bearsan_x">ベアさんのXアカウント</a>

そして、パッと出てくるタグは

ぐらいっすね。正直こんぐらいしか使わないな〜と。

属性でパッと出てくるのは

うーん。もっとあるはずなんだけど、都度調べたら良さそう？って感じ(言い訳)

いかがでしょうか？HTMLで挫折する人多いんですが、割と簡単なので頑張りましょう！

CSS

CSSの全体像としては

を覚えればOKです。(正式な名称はわからないです。ごめんなさい)

基礎文法は以下の通りです↓

って感じ。

見てみないとわからないのと思うので実演しますね

・サンプル(色とかついてる！)↓

・コード(ちなみにCSSはHTMLと合わせて使います)↓

<h1 class="h1-tag">大見出し</h1>

<p id="p-tag">今日は良い天気</p>

<a href="https://x.com/bearsan_x">ベアさんのXアカウント</a>

// styleタグの中はCSSをかける
<style>
// classを指定できる
.h1-tag {
  // 字の大きさを大きくする
  font-size: large;

  // 色を赤色にする
  color: red;
}

// idを指定することもできる
#p-tag {
  // 文字を太くする
  font-weight: bold;

  // 背景を緑色にする
  background-color: green;
}

// クラスなどは繋げることもできる
a {
  // リンクの下線をなくす
  text-decoration: none;
}
</style>

気づきましたか？

事で、HTMLタグを指定できます。

CSSは少し自信ないのですが、これから頑張っていきます！

調べて、そういえばこんなんやったってこと

HTML

タグ名・属性名ともに調べてみると他にもいっぱい出てきました。

↑とかはよく使うので、頭の片隅に置いておけば良いかもです🙏

とかはパッとみて「あ〜抜けてた〜」と思ったのですが、属性は必要になったら調べて使うレベルの理解で良さそうですね。

CSS

CSSで調べてあっと思ったことは基礎文法が

ということぐらいです。

まぁ、CSSのプロパティとかは膨大すぎるので都度調べながらやっていけば良いかな〜って思います。

そんな感じです！全体的にアウトプット楽しかったです。

HTML&CSSのおすすめ教材・サイト

最後にHTML&CSSを学びたい人におすすめの学習サイトなどを紹介します。

まず、HTML&CSSを無料で学びたい！って人には

などの学習サイトで勉強するのがおすすめです。

また、書籍で学習したい人は「1冊ですべて身につく HTML&CSSとWebデザイン」をやるのが良いですね。

HTMLやCSSは独学でも全然身につけれるので、頑張っていきましょう！

近況報告

ただのアウトプットでも良かったのですが、せっかくなので近況報告を書きます。

書くことは

の3つをテーマに書きます

それでは、見ていきましょう！

夏ってのほほーんってならない？

皆さんに聞きたいのですが

ベアさん

夏ってのほほーんってならないっすか？

ってことです。

なぜなら、

などで、自分も休んじゃうか〜ってなるからですね。

僕はこうなりつつあるのですが、まぁトータル変わらんかなって感じっすね。

また、僕の夏の予定はスカスカです笑

ぜひ予定がある人、誘ってください！！

金曜ってこともあって、仕事のボールを全部返した

まぁ、結局土日も仕事してることが多いですが、一応優先的に仕事のボールを返しました。

仕事のボールを返すと、空が青いっすよね笑

ベアさん

皆さんは金曜の夜、何されるんですか〜？

ゲームとかされるんですかね？

色々言いましたが、とりあえず仕事のボール返せてスッキリです。

ただ、毎日更新は欠かさない男

どれだけ忙しくても、ベアさん毎日日記を更新しますよ！

学習だって毎日ちょっとずつでも進めてます。

ベアさん

大きなところにいくなら継続してこそ。

時間は作るもの！！

だと思ってやってるので。

誰にもみられへんよな…と思いつつ、Xで「日記書いたよ〜」って投稿したらたくさんの人がリアクションしてくださって嬉しいです↓

あとはね〜日記やから比較的ライティングを意識せずグダグダかけるのが良いよね。

読者の人が増えてくれると嬉しいな。

次回：JavaScriptを解説してみた。

次回は学んだことのアウトプットとして「JavaScript」について書くつもりです。

まぁ、いつもTypeScriptっていう似てる言語書いてるのできっと大丈夫でしょう…(願い)

ぜひ、お楽しみに！

P.S

7話書いたよ↓

あわせて読みたい

[Web制作日記#7]JavaScriptを解説してみる。

Web制作日記のアーカイブはこちら↓

あわせて読みたい

Web制作日記のアーカイブ【随時更新】

ベアさん

プログラマー / 起業家

X

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。