CSS
HTMLと別のファイルで書くのが基本。
大きさの単位
絶対的な大きさとしてpxが主流。しかしスマホの普及により、rem(html要素のフォントを1とした時の相対的な単位)を使用される
色
色は#FFFFFFやrgb(255,255,255)などの方法で表される。
カラーコードでぐぐるとわかる
idとclass
idは一度しか定義できず、CSSで読みだすときは#をつける。
classは複数回定義できるが、CSSで読みだすときは.をつける。またclassは複数所属可能なので、class = aaa bbbとしてやるとaaaとbbbに所属できる。
優先度
親要素でCSSの内容を記述し、子要素でもCSSの内容を記述したとき子要素の内容が優先される
同じ要素のidのCSSの内容とclassのCSSの内容ならば、idのCSSの内容が優先される
詳しくはCSSセレクタの優先度に関してググると良い
ボックスモデル
HTMLの要素はpadding border marginで囲まれている。
HTMLの要素自体の幅、高さをwidth、heightで表す
![要素.jpg]()
またその要素に
box-sizing: border-box;
と指定すると、widthやheightをmarignまで含んだ時の大きさに設定することになる
インラインとブロック
ブロック要素
ブロックは画面の横幅全体を使い、次の要素は改行された状態になる。
例 h1~h6 p form table ul ol dl li div
text-alignやmarginをいじるやインラインブロックへの変更をすることでブロック要素は配置設定に使用できる(インライン要素は配置設定をしないのは基本。)
インライン要素
インラインは画面の横幅全体を使わず、次の要素は隣にくるようになる。
例 br a img input select textarea strong span
上述したがインライン要素は配置設定をしない。
そもそも下記なので配置設定できない。
・大きさ制限できない(width,height)
・marginできない(ホントは左右はできる)
・text-alignできない
・floatできない
またインライン要素の配置を変えたいならば、その要素に親要素を作り、そいつのtext-alignやmarginをいじるやインラインブロックへの変更をすることで配置設定をする。そのためインライン要素から別の要素への変換(display)をする機会はない。
インラインブロック要素
インラインブロックは基本的にブロック要素的な面が強いが、次の要素は隣にくるようになる。ブロック要素だけでは配置設定のバラエティーがなくなるので、ブロック要素からインラインブロック要素に変更することがある。ブロック→インラインブロックのパターンしかない。
重要
以上のことからわかることは
配置変更をしたければ、ブロック要素をいじることで行う。例えば、text-alignやmargin変更、インラインブロックへの変更で横に大きいの並べるとか
text-alignとmargin
私はtext-alignとmargin 0 autoが同じだと思っていた。でも違うのだ。
text-alignはその要素の幅の範囲内(width内)での文字の位置を指定している。つまり文字の位置を指定しているのである。
marginはその要素のmargin(余白)の部分を変更しているので、要素の幅(width)や高さ(height)の範囲には影響を与えない。
要するにtext-alignは要素の中での指定、marginは要素の外側での指定。
marginのあれこれ
同じ方面でmarginがかぶると、marginの相殺(margin同士の足し算ではなく、marginの大きい方を採用する)。marginの相殺と呼ぶ
margin 0 autoで中央ぞろえ
margin-left autoでベタッリ右
要素の真ん中に文字をおきたければ
要素の大きさ(幅や高さ)のwidthやheightで行う。要素の大きさを変えても要素内での文字の位置は変わらない。
↓
要素内での文字の位置を変えたければ、text-align: center;で文字を幅でも高さでも真ん中に置くのかを決める。またline-heightで文字自体の高さを決めれるので、要素のheightとline-heightを同じにすることで、完璧に要素の真ん中にもじが来るようになる。
範囲指定
範囲を指定するためだけの要素
ブロックで範囲を指定するのがdiv(text-alignやmarginでいじって、指定範囲の位置指定)
インラインで範囲をしてするのがspan(特定の文字の色変更とかに使用)
background
backgroundを使用すると背景を変えれる。backgroundでの範囲はその要素のborderまでの範囲なので、余白をつけたければ,marginを使う。またrepeatを指定すると、永遠にその背景ってことになる。
img
imgはインライン要素なので、pで囲って無理やりブロックにして、配置指定をする。
HTML
<>で囲まれている部分を要素idやnameなどは属性という。
h1やpで囲んで記事を書くが、なくても文字は表示される
imgのalt属性は画像が表示されない時に出る文字、最近はSEOに必要な要素にもなっている？
ulは箇条書き(順序なし)、olは箇条書き(順序あり)、dlは説明って感じ(dlの中にdt(用語)、ddが用語の詳細説明)
表に関して。trで行をざっくり作る、trの中にthやtdを入れて行にマスを作っていくイメージ。thは見出し、tdは左寄せ。
bodyの構造。headerとfooterを頭とお尻に。その間の空間をarticleとして、その中に複数のsection(切りの良いところで、次のセクションに次の内容を書く)を置く。最近はSEO的にも重要だとか
form_tagとform_forの違い。モデルに対して操作を行うならば、form_forを使い、そうでないならばform_tagを使用する。詳しくはrailsで学ぶサーバーサイド
またform_tagでmethodを指定するが、postは見えない状態で、paramsの中に入れて運ぶ感じ。getではURLに？でクエリ（条件）を置いて、送信する。詳しくはrailsで学ぶサーバーサイド。
＜a＞は外部のURLにアクセスするための要素
＜%= link_to %＞はアプリ内部のrootingにアクセスするために作られた関数
viewでの注意
・お作法としてapplication.htmlには統一レイアウトを置き
yeildという場所を書き、そこに全てのviewの内容が反映される。
app/views/layouts/application.html.erb
<html><head><title><%=full_title(yield(:title))%></title><%=csrf_meta_tags%><%=stylesheet_link_tag'application',media: 'all','data-turbolinks-track':'reload'%><%=javascript_include_tag'application','data-turbolinks-track':'reload'%><%=render'layouts/shim'%></head><body><%=render'layouts/header'%><divclass="container"><%=yield%><%=render'layouts/footer'%></div></body></html>
同様に全てのviewは、別のviewファイルから読みだして自身のviewに反映させてもいい
<%=render'反映させたいviewの場所'%>
<%= render @microposts %>
#これをするとviewの中のmicroposts/_micropost.html.erbを追加することになる
これをパーシャルを追加するという。他にも
<%= render 'shared/error_messages', object: f.object %>
#これを行うとshared/error_messagesの方で、f.object(つまりf自身、入力内容自身)を変数objectと設定してパーシャリ川で使用できるという事
↓
_error_messages.html.erb
<% if object.errors.any?%> #このようにして使用する
.
.
.
これも同じような意味
this.erb
<%= render partial: "list_footer", locals: {username: @username, listname: @listname} %>
この意味はlist_footerパーシャル(view)の中でthis.erbで定義した@usernameをusername、 @listnameをlistnameとして使用できるという事。しかしloacalsを使わずに、@usernameをそのまま使用することも可能。しかしlocalsを使った方がパーシャルを再利用しやすいため使用される。参考文献は部分テンプレートにlocals:を使って変数を渡す時は partial:もつけないとエラー
・erb(rubyの埋め込まれたHTML)
erbでは<% 中身 %>で中身の処理をして、<%= 中身 %>では中身の処理をして結果をHTMLに出す。
例
app/views/static_pages/home.html.erb
<% provide(:title, "Home")%>#ここで:titleにHomeを代入<!DOCTYPEhtml><html><head>#ここで読み出して、HTMLに出す<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
</head>
provideもyieldも関数で、変数に値を入れる、読み出すの処理をしてくれているということ。
