Progateで勉強してきたこと（HTML/CSS/Ruby）を一旦まとめてみた

概要

ここでは学習中に苦労した点や忘れやすかったコードを
重点的に書いてます。

HTML

1.見出しと段落

<!--見出し-->
<h1>progateとは</h1>
<!--段落-->
<p>オンラインプログラミング学習サービスです</p>

progateとは

オンラインプログラミング学習サービスです

2.リンク作成

リンクを作成するには<a>要素を用いる。テキストをタグで囲むことでリンクを作成出来る。実際にブラウザ上に表示されるテキストは<a>で囲まれた部分です。リンク先のURLは開始タグの中に記述をし、href属性を追加する必要がある。<a href="url">というように書き、url部分にリンク先のURLを指定することで、そのページへのリンクを作ることができます。属性には他にも様々なものがあるが、何かしらの設定を与えるものと認識しておくといい

例

<a href="https://prog-8.com/languages/html" >progate</a>

progate

3.リスト

<li>要素を用いる。箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで、リストを作ることができる。<li>要素は、囲む要素によって種類が変わるという特徴を持っている。<ul>要素で囲むと、黒点が先頭につく。<ol>要素で囲むと、数字が連番でつく。このように要素を要素で囲むことを入れ子と言う。囲む方の要素を親要素、囲まれる要素を子要素と呼ぶ。

4.タグに名前をつける

要素にはclassを使って名前をつけることができる。classをつけることにより、それぞれの要素を識別し、別々のCSSを適用することができる。class名でCSSを指定する場合、先頭にドット「.」が必要な点に注意すること。

<li class="selected">HTML</li>

5.<span>

文中の一部にCSSを適用させたい場合は、<span>要素で囲む。<span>要素の前後には改行は入らない。

2.CSS

1.CSSを書くときの注意点

インデントで字下げしてCSSのプロパティの末尾にはコロン（:）、行末には セミコロン（;）をつける

h1 {
  color :#ff0000;
}

2.ボックスモデルについて

border、padding、marginは、ボックスモデルという概念に基いている。HTMLの全ての要素には、border（初期状態では表示されない）があり、その外側の余白はmargin, 内側の余白はpaddingという

3.ブロック要素、インライン要素

HTMLの要素には、改行される要素と改行されない要素がある。前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素という。<div>要素や<h1>要素、<p>要素はブロック要素で、それに対して、<span>要素や<a>要素のように改行されない要素をインライン要素という。また、ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがある。インラインブロック要素はインライン要素と同様に横に並び、ブロック要素のように幅や高さをもちます。

4.入力欄、送信ボタンの作り方

<input>要素は１行のテキスト入力を受け取るための要素。<textarea>要素は複数行のテキスト入力を受け取るための要素。　<input>要素は終了タグが不要な点に注意すること。<input>要素にはtype属性を指定することができ、type属性にsubmitを指定すると、入力欄ではなく、下の図のようなボタンになる。ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」になる。ボタンに表示されるテキストを変更することも可能。value属性に任意の値を指定することで、ボタンに表示されるテキストを変更することができる。

4.アイコン「Font Awesome」

Font Awesomeは、以下の手順で使用することができる。
①Font AwesomeのCSSファイルを読み込む
②タグにfaクラスとfa-アイコン名クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が載っている。）
これだけで簡単にアイコンを表示させることができる。

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <span class="fa fa-facebook"></span>

5.　:hoverと:active

:hover

カーソルが乗ったときの状態をhover
と言う。CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができる。また、transitionを使うとアニメーションをつけることができる「変化の対象」や、「変化にかかる時間」などを指定できます。「変化の対象」にはcolorなどのプロパティを指定しますが、allを指定すると全てのプロパティに適用出来ます。transitionは多くの場合hoverと組み合わせて使う。

:active

セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができます。 セレクタ:activeというように指定します。

6.画面上に要素を固定する

position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができる。 位置は、top、left、right、bottomを使って指定する。positionを使用すると要素の重なりが生じるので、重なり順を指定して表示されるようにしよう。z-indexプロパティは、要素の重なりの順序を指定する際に使用します。 z-indexは整数値で指定し、値が大きいほど上に表示されます。z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意しよう。

7.レスポンシブデザインとは

レスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのもの。 特にスマートフォン表示に対応したサイト制作においては必須の技術。 メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法。メディアクエリは、@media (条件) { .... }という様に書く。指定された条件が当てはまるときにのみ{ }内のCSSが適用される。max-width: ◯◯pxと指定すると、画面幅が◯◯pxより小さい時にCSSを適用できる。min-widthはその反対となる。メディアクエリの条件を指定するとき、「◯◯px」の部分をブレイクポイントと呼びます。※viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。

Ruby

1.条件分岐「if文」

if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になる。ifの後ろに条件式を書き、それが「成り立つ」場合、処理を実行する。また、処理はifとendで囲む。下図でif文の書き方のイメージを掴む。

比較演算子

比較演算子には、左と右の値が等しいかを調べるものもある。「a == b」はaとbが等しければtrue、等しくなければfalseになる。「a != b」はその逆。この記号は数値だけでなく、文字列同士の比較にも使える。

かつ&&

「かつ」は「&&」で表す。「条件1 && 条件2」は「条件1かつ条件2」という意味で、複数の条件がすべてtrueならtrueになる。「10より大きいかつ30より小さい」というのは「10 < x < 30」と数学のように書くことは出来ない。このようなときは「&&」を使う。

または||

「または」は「||」で表す。「条件1 || 条件2」は「条件1または条件2」という意味です。この場合は、複数の条件のうち一つでもtrueならtrueになる。

2.配列とは[ ]

複数の値を管理するもの。配列は、[値1, 値2, 値3]のように作る。配列に入っているそれぞれの値のことを要素と呼ぶ。配列を使うと、複数の文字列や数値をまとめて書くことができる。配列の要素には、前から順に「0, 1, 2, ...」と数字が割り振られている。これをインデックス番号という。インデックス番号は0から始まることに注意する。

item = ["iphone","SDcard","SIM"]
puts item

3.each文の書き方

繰り返し処理には、each文というものを使う。each文を使うと、配列の要素を順番に取り出して処理を行うことができる。each文は、「配列.each do |変数名|」と書き、「end」までの間に実行したい処理を書く。

muscle_groups = ["胸筋","背筋","三角筋"]
muscle_groups.each do|muscle_group|
  put "今日鍛えた筋肉#{muscle_group}"
end

4.ハッシュ{}とは

配列は複数の値を並べて管理するのに対して、ハッシュはそれぞれの値にキーと呼ばれる名前をつけて管理する。

#キーが文字列の書き方
human = {"name" => "tatsuki", "age" => 23}
puts human["name"] 
#キーがシンボルの書き方
human = {:name => "tatsuki", :age => 23}
puts human[:name] 
#キーがシンボルの書き方（省略形）
human = {name: "tatsuki", age: 23}
puts human[:name] 

5.シンボル:とは

シンボルとは、文字を「"」や「'」で囲む代わりに、先頭に「:」をつけた書き方のことをいう。文字列とシンボルは厳密には異なるが、基本的には同じように使用することができる。

puts "ruby"
#コロンで始める
puts :ruby

6.メソッド

「def メソッド名」と「end」の間に、まとめたい処理を書くことでメソッドをつくることができる。このことを「メソッドを定義する」と言う。

def method_name
  #処理
end

7.引数とは

引数（ひきすう）とはメソッドに与える追加情報のようなもの。メソッドを呼び出すときに一緒に引数を渡すことで、メソッドの中でその値を利用することができる。

def introduce(name)
  puts "こんにちは"
  puts "#{name}です”
end
introduce("しがたつき")

8.戻り値とは

呼び出し元で受け取る処理結果を戻り値（もどりち）と呼び、このことを「メソッドが戻り値を返す」と言う。multiplyメソッドが「3」と「7」を受け取り、処理結果の「21」を呼び出し元に返しています。この「21」にあたるのが戻り値です。※returnの後にあるメソッドの処理は実行されないので注意する。

def multiply(a,b)
  return a * b 
end
sum = multiply(3 * 7)
puts sum

9.キーワード引数とは

引数の数が多くなると、呼び出し側で値がどの引数に入るのかがわかりにくくなる。キーワード引数を用いた書き方をすることで、呼び出し側で引数を明記することができる。

def sale(item:,price:,count:)
  put "#{item}を#{count}個で売ります"
  put "合計金額は#{price * count}円です"
end
sale(item:"みかん",price:30,count:70)

10.クラス

クラスは「class クラス名」とすることで定義できる。
クラス名は必ず大文字で始めることと、「end」を書く必要があることに注意すること。

class  Menu

end

11.インスタンス

クラス（設計図）を元に、新しくインスタンスを生成するには、「クラス名.new」とする。また、「変数名 = クラス名.new」とすることで、生成したインスタンスを変数に代入することができる。

class  Menu
  attr_accessor :name
end
      # 変数menu1に代入
menu1 = Menu.new
#Menuクラスからインスタンスを生成

12.attr_accessor

情報を持たせるためには、「attr_accessor シンボル」のようにする。以下の図のようにすることで、Menuクラスのインスタンスにnameという情報を持たせることができる。また、この「name」という情報のことをインスタンス変数と呼びますので覚えておく。

class  Menu
  attr_accessor :name
end

13.initializeメソッド

initializeメソッドは「クラス名.new」でインスタンスを生成した直後に自動で呼び出される。

class  Menu
  def initialize
    puts "メニューが生成されました。" 
  end
end
menu1 = Menu.new
#Menu.newが実行されると自動でinitializeメソッドが呼び出される

14.require

「require "./ファイル名"」とすることで、他のRubyコードを読み込めるようになる。

15.gets.chomp

入力を受け付けるには「gets.chomp」を使う。このコードが実行されると、コンソールが入力待機状態になる。「変数 =gets.chomp」とすることで、エンターキーを押されるまでに入力された値を変数に代入することができます。

16.継承

あるクラスを元にして新たなクラスをつくることを「継承」と呼ぶ。「class 新しいクラス名 < 元となるクラス名」とすることで他のクラスを継承して、新しいクラスを定義することができる。このとき、新しいクラスは「子クラス」、元となるクラスは「親クラス」と呼ばれる。継承されるものは、親クラスのインスタンス変数とインスタンスメソッド。

require "./menu"
class Food < Menu
end

17.オーバーライド

親クラスにあるメソッドと同じ名前のメソッドを子クラスで定義すると、メソッドを上書きすることができる。これをメソッドの「オーバーライド」と呼ぶ。オーバーライドをすると、子クラスのインスタンスは、親クラスのメソッドではなく、子クラスで定義したメソッドを呼び出すようになる。

18.superメソッド

オーバーライドしたメソッドの中「super」とすることで、親クラスの同名のメソッドを呼び出すことができる。あくまでメソッドを呼び出しているので、親クラスのメソッドの定義に合わせて、superに対して引数を渡す必要がある。

class Food < Menu
  attr_accessor :calorie

  def initialize(name:,price,:calorie:)
    super(name:name,price,price)
    self.calorie = calorie
  end
end

19.Dateクラス

日付を扱うためには、Dateクラスというものを用いる。DateクラスとはRubyがすでに用意しているクラスで、図のようにrequireを用いて読み込むことで、自分でクラスを定義しなくても使うことができる。このようにすでに用意されているクラスは、requireの書き方が少し異なるので注意する。

require "date"
# "./date" でないことに注意
date1 = Date.today
puts date1
#今日の日付のDateインスタンスを取得

20.クラスメソッド、インスタンスメソッド

インスタンスに対して呼び出すメソッドは「インスタンスメソッド」、クラスに対して呼び出すメソッドは「クラスメソッド」

class Human
  def Human.poplation?
    #クラスメソッドの定義
  end
 def info
    #インスタンスメソッドの定義
 end
end