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

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

(CSSの書き方)
.① {
②: 
③;
} 
①はどこの(セレクタ)、②は何を(プロパティ)③どんな風に(値)

（基本）
・<link rel="stylesheet" href="style.css" type = "text/css">
linkタグは別のファイルへの関連性を記述するためのタグ。
※HTMLファイルに記載する。
relはどのような関係性のあるファイルをlinkで紐付けるか指定。
hrefは関連付けるファイルがどこにあるか指定。
typeはインターネット上でファイルをやりとりする時にそのファイルの種類を示す。

（文字の大きさ、色）
・font-family: "yuGothic", sans-serif; 表示するフォントを設定する。
・font-size: 20px; フォントのサイズを設定する。
・color: …; 文字の色を指定する。
・background-color: …; 背景の色を指定する。
・line-height: 50px; 行の高さを指定する。
・letter-spacing: 1px; 文字の左右の感覚を指定する。
・list-style: none; リストの先頭に表示されるマークを変更できる。
・width: 70%; 要素の幅を指定する。
・height: 50px;要素の高さを指定する。

（文字の位置）HTMLの全ての要素には、border（初期状態では表示されない）があり、その外側の余白はmargin, 内側の余白はpadding。
各方向の余白を指定したり、まとめて指定したりすることも可能。
・border: 5px solid red;  枠線の指定する。
・padding: 20px; 内側の余白の指定する。
・margin: 0 30px;外側の余白の指定する。
・text-align: center; 文字をどこに配置するかを指定する。(テキストの横方向の位置)
・float:left;簡単に文字や画像を左寄せ・右寄せでき、その性質を応用して横並びにすることが可能
・display: flex; HTMLブロックを横並びにでき、CSSのflexbox（フレックスボックス）と呼ばれるレイアウトモードを使用することができます。
・justify-content: center; 真ん中に表示する。
・overflow はみ出た要素の表示方法を指定する。

（お問い合わせフォーム）
<input>要素は１行のテキスト入力を受け取るための要素。
<textarea>要素は複数行のテキスト入力を受け取るための要素。
<input>要素は終了タグが不要

・input[type="text"] テキストの入力欄を指定する。
・input[type="radio"] ラジオボックス。複数の選択肢から1つ選ばせることができる。
・input[type="checkbox"] チェックボックス。複数の選択肢の中から任意の項目をチェックさせることができる
・input[type="submit"] 送信ボタン。
・placeholder フォームの中にあらかじめ薄い文字を表示して入力のヒントを与えることができる。
・name グループ化をする。
・textarea 複数行のテキスト入力欄を指定する。。
・carsor: pointer; ボタンの上にカーソルが来ると形が変わる。

今回はCSSの記事を書いたので、次回はRubyについて書こうと思います。
最後までお読み頂きありがとうございました!
もし良かったら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(新品、送料無料)