どーも。さいんです。
勝手に解説シリーズ、いよいよ第3段となり、ProgateのHTML & CSS 初級編の1章が今回の記事で完結します！
といってもHTML & CSS 初級編は7章まであるので、一体どれだけの記事数になるのか不安になってきています笑
Webエンジニアとして、とある企業で年収1,100万円ぐらいもらってます。
サラリーマンという立場を圧倒的に活用し、本業で稼ぎつつ、独学でプログラミングを勉強している人を全力で応援しつつ、いろんな副業にチャレンジしてます
プログラミングを勉強していると、特に独学の場合はスクールに行くべきか、このまま学習を進めても意味があるのか不安になってきますよね。
そんな皆さんをできるだけ、楽しみながら、さらに成長を実感しながら学習を進めることができるように実践に使いネタもコミコミでお伝えしますので、ぜひじっくりみてくださいね。
勝手に解説シリーズとは
独学でプログラミングを勉強している人の多くが利用しているProgateやドットインストールについて勝手に深掘りしちゃおうという企画です。
この記事で第3段になります。
一体、全部で何個の記事になるのか、全く想像がつきませんがどうぞ楽しみながらプログラミング学習を進めてもらおうという内容にしていきます。
実際にWebエンジニアとして業務を行い、比較的年収も多めにもらっている私が、実際にProgateやドットインストールを試してみて、
- ここはちゃんと深掘りした方があとで役立つのになー
- ここってそんなにサラッとでいいんだ！？
- あれ？これって今じゃそんなに使わないよね
と思うことが多々あったので、それを実際に勝手に解説しているシリーズになります。
HTML & CSS 初級編
それでは、すでにプログラミングの学習を始めているからも、これからの方もProgateのHTML & CSS 初級編を開いて、この記事を横目に勉強していきましょう！
まずは全ての基本となるのが、HTMLとCSSになり、プログラミングとは少し違いますが、これからWebエンジニアになる皆さんには絶対に必要となるスキルですので、確実に身につけましょう。
HTML & CSS 初級編
まずはこの講座を図を用いて解説して、みなさんの反応をいただけたらなと思っています！
今回は第3段のコンテンツとなります。
初めてプログラミングを勉強される方やシリーズを見る方はぜひ第1段からご覧ください。
[card2 id=”173″]
もし、よかった！やこの図がわかりにくいっていうのがあれば、Twitter(@1000sideincome)にどしどしご意見ください。
では本編の画像から行ってみましょう！
4. 画像
Progateでは画像は
https://prog-8.com/images/html/beginner/wanko.jpg
https://prog-8.com/images/html/beginner/school.jpgこの二つを使用するようなサンプルになっています。
画像の貼り付けもとても重要なタグで、今後何回も使用していくことになると思いますが、注意点があります。
☑︎ 著作権
☑︎ 直リンク
imgタグを使えば、簡単にネット上にある画像をあなたのページのコンテンツのように埋め込むことができてしまいます。
可能だからといってやっていいかというとそれは別の話です。
画像には基本的には全て著作権が存在し、作成した人のものであるという認識がとても重要となります。
あなたが苦労して作った図が、他の人があたかも自分が作ったかのように載せていたら悲しいですよね？
そのため、画像を掲載する際は、画像を作った人、撮影した人が掲載していいかの許可を出しているかを確認する必要があります。
最近のSNSでは無断で画像を使うことが一般になっていますが、ブログさサイトでは実際に訴えられるケースもありますので、画像を使用する際は、基本的には掲載OKとなっているものを使用しましょう。
無料で掲載していい画像・写真として有名なのが
それぞれ利用のルールなどがHPに記載されていますのでチェックしましょう。
上で紹介したサイトでもほとんどのサイトでのルールとして、直リンクを禁止しています。
直リンクとは相手のホームページの画像を直接imgタグで指定をして、掲載する方式で、直リンクされる側はもちろん、直リンクする側にも大きなリスクがあるので注意が必要です。
imgタグに他の人のサイトのURLをそのまま使用することを直リンクと言います。
直リンク禁止とは、そのまま使用せずに、一度ダウンロードし、画像をあなたのサーバにアップロードして使用するということになります。
では、なぜ直リンクがNGなんでしょうか？
1つ目は、サーバへの負荷の危険性があります。
もし直リンクを行うと、あなたのページにアクセスがあると画像が呼び出されるたびに、直リンク元である他の人のサーバに画像を取りに行きます。
もし、あなたのサイトがSNSでバズり、100万人分のアクセスがきたらどうなるでしょうか？他の人のサーバに100万人分の画像を取得しに、大量のアクセスが他の人のサーバにも発生してしまいます。
もし、それが原因で他の人のサーバが故障してしまったら・・・それで他の人のサービスが止まってしまい損害が出てしまったら・・・と、とっても危険な行為となります。
2つ目は、画像の差し替えの危険性です。
あなたのサイトから、他の人のサイトの画像へリンクを貼るという行為は、他の人のサイトを無条件に信頼し、自分のコンテンツとして貼っていることになります。
もし、他の人のサイトの画像が、同じ名前で別の画像に差し替えられた場合、あなたのサイトも差し替えられた画像が表示されます。
もし、画像が性的なコンテンツや犯罪に関わる内容の画像に差し変えられたらあなたのサイトにその画像が表示されることになります。
上記2つの危険性がありますので、基本的には画像の直リンクはやめましょう。
一部広告などを直リンクにすることで、あなたが更新することなく、最新のキャンペーンにリンク元が更新してくれるといった使い方もされているので、あなた自身で直リンクすべきかどうかを判断する必要があります。
5. リスト
リストで注目すべきはulのタグの中にliタグがはさまれている状態の入れ子になっている点です。
<ul>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>タグでタグを挟むというのは今後も多く出てきます。
そして、どこタグが、どのタグの入れ子になっているかをわかりやすくするのがインデントという説明もあったと思います。
ダメな例
<ul>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>どのタグがどのタグの入れ子になっているかわからないですよね？
その重要なインデントですが、プロジェクトによってインデントのルールが違うケースがあります。
Progateではタブと紹介されていましたが、インデントは大きく3つのタイプがあります
☑︎ タブ1つ
☑︎ スペース2つ
☑︎ スペース4つ
どれがいいとか悪いとかいうことはありませんが、基本的にはすでにプロジェクトなどでプログラムが存在する場合は、そのルールに合わせましょう。
周りがスペース2つなのに、あなただけスペース4つでプログラムを作ってしまうと、混乱しますので基本的にはチームやプロジェクトのルールに合わせるのは必須です。
最近ではVS codeやAtomなどのエディタにはインデントを設定することができ、タブキーを押すとスペース4つ自動的に入力するといった機能がついています。
もしプロジェクトでインデントのルールを知ったら、まずエディタの設定を変更しておきましょう。
まとめと宿題
いかがだったでしょうか？3つの記事にわたって、ProgateのHTML & CSS 初級編の1章を解説しました。
普通に課題をこなすだけであればサクッとこなすことができるコンテンツではありますが、少し深掘りするとグッと実践に近づき、なぜ学習しているかや実践で注意すべき点が理解できたのではないでしょうか？
3つの記事でホームページ作成についてのベーシックな知識は身についたと思うので私からの宿題をこれから章ごとに出させていただければと思います。
☑︎ いらすとやで好きな画像を3つ選んでホームページに載せる
☑︎ <a>タグで新しいウィンドウと同じウィンドウのリンクを作る
☑︎ <ol>タグを使ったリストで好きなものランキングを作る
☑︎ サーバを借りて上記で作ったホームページの公開
サーバを借りる重要性は
[card2 id=”162″]
にて、解説していますのでぜひチャレンジしてくださいね。
ぜひ解説についての不明点や感想をTwitter(@1000sideincome)にどしどしくださいね！ガツガツ解説の記事も更新していきます！
コメント