見出し画像

自己紹介&振り返り!!　学んだ事①

マツイ

1. 自己紹介

  • 今までの経験: マツイと申します。現在22歳でWeb制作会社への転職を目指していて日々勉強中です。
    2年ほど前にデイトラとは違うオンラインスクールでWeb開発を学んでいました！ただ、ものすごく開発が難しく最後までやり切ることは出来ませんでしたが色んな方に助けられ得られたものはものすごく多かったです。
    それからは毎日ではないですがコーディングについて学んでいました。やっぱり自分にはコーディングが合っていると感じてコーディングを仕事にしたいと思い去年の4月頃からデイトラでWeb制作について学んでいます。(2. 2024の振り返りの方で書いていますのでお時間あったら見て欲しいです。)

  • 好きなこと: 文房具が好きです！(特に木軸のシャーペンが好きです。早く長野にある文房具のお店に行きたいです！)

革で出来ているペンケースも好きです。

2. 2024年の振り返り

去年の2024年の4月30日から勉強を開始して今まで継続することが出来ています。
学んだ事: 約8ヶ月で700時間程勉強する事ができました。自分としては毎日継続する事が出来ているので、この調子で継続出来るように頑張ります。
その中で学んだ事をこれからひとつずつnoteで書いてみたいと思います。(これから書くことはChatGPTを利用して書いています)

1. <!DOCTYPE>宣言: HTMLのバージョンを指定する
それとブラウザのレンダリングモードを指定する役割があるみたいです。
→ <!DOCTYPE>宣言がない、または間違っている場合はブラウザは互換モードでページをレンダリングする。
※互換モード: 例えばwindowsの互換モードだとすると古いバージョンのアプリケーションやデバイスを使用する際に古いバージョンのWindowsをエミュレートしてアプリを実行する機能の事。
※エミュレート: 特定のハードウェアやソフトウェア環境を別のシステム上で再現し、アプリケーションやデバイスなどを動作させる技術の事。
→ 分かりやすく言うと古いwindowsがあってその中の一部のアプリケーションなどを新しいwindowsなどで使用できるようにする技術のような感じでしょうか。
※レンダリング: HTMLやCSS、JavaScriptなどを使用してブラウザに表示させる事

なので<!DOCTYPE>宣言がないとどうなるのかというと
ブラウザは古い書き方で作られているかもと認識してしまう。そのため互換モードに入り、古いブラウザ向けの動作をエミュレートしてページを表示する。
→ ではここで言っている古いブラウザ向けの動作とはどういう事なのか？

古いブラウザ向け動作の例
例1)  HTMLの解釈が異なる
これはどういうことか言うと古いブラウザは現在のHTML5に対応しておらず古いHTML仕様になってしまう。
例えば、以下のようなHTMLがあった場合最新のブラウザではサポートされていませんが古いブラウザではサポートされる事になる。↓

<html>
  <body>
     <font color="red">古いタグ</font>
  </body>
</html>

Point: fontタグは最新ブラウザでは非推奨だが、互換モードではサポートされる。
→補足ですが、 fontタグとは文字通りフォントの色や大きさで指定するタグの事。

例2) 自動補完機能の差

<html>
    <body>
        <div>

↑ 上のように不完全なHTMLでもエラーを出さなかったが、最新のブラウザではエラーになる場合がある。(ただ状況によっては終了タグが入らなかったりする場合もあると思います。まだ勉強出来ていないので勉強したらnoteに書こうと思います🙇)

なので<!DOCTYPE>宣言がない、または間違っている場合はブラウザは互換モードでページをレンダリングするとは言い換えると
「古いWebサイトが新しいブラウザでも見えるようにする為に、こうした古い動作を再現している」
と言う感じでしょうか。

<!DOCTYPE html>

↑ このように書きます。

今までの事を踏まえると、<!DOCTYPE html>が書かれてない場合ブラウザは互換モードに入って古い動作を再現しようとする。なので仮にhtmlファイルやcssファイルが最新の書き方で書かれていたとしても、<!DOCTYPE html>が無かったらエラーになる可能性があるそうです。
ただこうは言ってもvscodeなどでhtml:5でタブを押すと勝手に<!DOCTYPE html>は記述されますので書き忘れるというのはないと思われます。
中には古いWebサイトも存在するそうでそうしたサイトをサポートする為にブラウザは互換モードを備えているそうです。(Chromeには互換表示機能はないそうです)

今回は自分の興味から調べてみました。まだまだ分からない事ばかりなので間違っている箇所があるかもしれませんがその際は教えてくださると助かります。
よろしくお願いします。


3. 最後に

これから毎日かは分かりませんが、学習した事をnoteにまとめていきたいと思います。
見ていただけると嬉しいです！
ここまで読んでくださりありがとうございました！


いいなと思ったら応援しよう！