daikingdom

駆け出しエンジニアの駆け出しエンジニアによる駆け出しエンジニアのためのブログ。プログラミングに関する役に立つ有益な情報を発信しています。

プログラミング初心者の方向けにコーディング(HTML)についてタグの意味をまとめました

f:id:CIVA_daiking:20200630143432j:plain


こんにちは、DAIKIです。
今回はコーディングのHTMLのタグについてまとめてみました。
普段コーディングされている方はもちろんこれからプログラミング始めてみようかなという方向けにこの記事を書きました。

(基本)
・<html>…</html> htmlの情報は全ての中に書く。
・<head>…</head> ファイルの補足情報。基本はブラウザに表示されない。
・<body>…</body>ブラウザで表示させるコンテンツをこの中に書く
・<!DOCTYPE html> この文書がhtmlである事を宣言。記述をしない場合、レイアウトが崩れたり、表示がされない場合がある
・<meta charset="UTF-8"> ファイルに関する情報を書く。記述しない場合、文章が文字化けをしてしまって読めなくなる場合がある。
・<title> 該当ファイルのタイトルを指定する。

(文章)
・<h1>…</h1>見出しに使う。h1(大きい)〜h6(小さい)
・<p>…</p> pタグで囲むと文末で改行される。
・<li>…</li> 箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで、リストを作ることができる。
・<ul>…</ul>要素で囲むと、黒点が先頭につく。
・<ol>…</ol>要素で囲むと、数字が連番でつく。
<table>…</table> 表を作成するブロック要素。
この要素と以下に記述するth要素、tr要素、td要素を組み合わせることによって、表構造を作成することができる。
<th>…</th> 表の見出しを作成するブロック要素。
<tr>…</tr> 表の横方向の一行を定義するブロック要素。
<td>…</td> 表のデータを入れるブロック要素。

(画像・リンク)
・<img src = "…" alt = "…">srcで表示させたい画像のファイル名を指定し、altで画像がうまく表示されない場合にどのような画像を表示したいかを伝える。
・<a href="…">表示させたい文字</a>リンクの設定。…に表示させたい文字を記入。

(グループ化)
<div>…</div>グループ化。複数の要素に対して余白等の設定を行う際に変更箇所を同時に行う事ができる。
要素とは、HTMLで文書のタイトルや段落でデータの行(レコード)や列(カラム)など、コンピューターに解釈させたい部分のこと。
divタグで挟んだ文字をひとかたまりのブロックにする。

次回の記事ではHTMLで作成したものに文字の大きさや色、位置等の編集ができるCSSについて書きたいと思います。
最後までお読み頂きありがとうございました!
もし良かったらTwitter(@CIVA_daiking)もしているので、フォローをポチッと押して頂けると嬉しいです。

プログラミングスクール「TECH CAMP」では無料説明会・無料体験会を行なっていますので気になった方はぜひ!→https://tech-camp.in/briefings
入学希望の方は紹介欄に「b0d390」と入力すると割り引きを受ける事ができます→https://tech-camp.in/proposals/new

・エンジニア転職コースの受講確定で受講料が10,000円OFF
・プログラミング教養コースの受講確定で受講料が5%OFF

実際に入力すると送信前の確認画面で金額が安くなっている事が確認できるのでお気軽にお試し下さい。

プログラミング学習者におすすめの技術書

[Rails編]
現場で使える Ruby on Rails 5速習実践ガイド

概要
Railsアプリケーションの受託を行なっている、株式会社万葉が監修した解説書です。タスク管理アプリを作りながらスキルを身につけるチュートリアル形式になっています。また、開発現場で必要となる知識にも多く触れられています。
オススメポイント
アプリ開発の現場で必要なスキルについても解説されているため、Railsの基礎を終えてもう一歩詳しく学びたい方に適しています。
・slim(ビューをコンパクトに記述できるGem)・エラーメッセージの表示の仕方・アプリが大きくなるにつれてコードが複雑になりがちなことにどう対処するか・Rspec(コードの正しさをチェックするツール)の使い方あ
など大事なテーマについてわかりやすく解説されています。
[HTML/CSS編]
HTML5/CSS3モダンコーディング

概要
見本サイトを作る中で、作成手順を学ぶチュートリアル形式の書籍です。・スタンダードレイアウト・グリッドレイアウト・シングルページレイアウトこの3つのスタイルのサイトを作成することができるようになります。
おすすめポイント
非常に実践的なサイトを作成できるようになります。サイト作成の方法がわかるだけでなく、随所にどうしてそう書くかなどの補足もしてあるため仕組みの理解もできるようになっています。

[デザイン編]

『ノンデザイナーズ・デザインブック』 Robin Williams (著)

デザインはセンスでなく、技術です。この本に書かれた技術を使えばデザイナーでなくても、基本を押さえた美しいサイトを作ることができるようになります。

[AI編]
[第2版]Python機械学習プログラミング 達人データサイエンティストによる理論と実践

分類、回帰問題から深層学習までは幅広く取り扱っている図書です。内容には数学的な理論もかなり多いですが、全ての理論に対して実践であるPythonのコードが付随しているのでコードを書きながら更に深く機械学習を学ぶことができます。

戦略的データサイエンス入門 ―ビジネスに活かすコンセプトとテクニック

機械学習をビジネスの場面で利用するにはデータサイエンスの基礎的な知識が必要です。この本はデータサイエンスの初学者でも分かりやすいように丁寧にデータサイエンスについて書かれている本です。
[その他]
『リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック』Dustin Boswell (著), Trevor Foucher (著)

プログラミングの時間の大半は「いかに綺麗で読みやすいソースコード」を書くかを考える作業になります。リーダブルコードにはそんな誰もが読みやすいコードを書くためのエッセンスが詰まっています。

プログラミング初心者やこれから始めたい方におすすめのMacbook一覧

2017年発売のMacbook Air(中古で付属品一部なし傷あり、残り1台)
2020年発売のMacbook Air(新品、送料無料)
2016年発売のMacbook Pro(中古で傷あり)
2019年発売のMacbook Pro(新品、送料無料)