CSS

HTMLと別のファイルで書くのが基本。しかしHTMLの要素に直接書き込みこともある。例えば最初はdisplay:none;にしておく要素など。

<p style="display:none;">見えない</p>

CSSの開発の仕方

BEMではclass名を長くして、名前が被らないように開発する。あとで書き直すときに書き直しやすい。Sassのおかげで書くのが楽になった。

OOCSSではオブジェクト志向でCSSを記述するので、一つの要素が複数のclassに所属している状態になる。配置や構造を示すclassとデザインを示すclassに所属するイメージ。デザインが一貫しているWEBを作りたいならこちらの様式でやる

Sass

@ mixin  名前A('引数') {
}

#名前B {
@include  名前A('引数')
}

//このようにcssをクラスのように扱えるようになる

参考文献はSCSSの基本的な書き方

Bootstrap

CSSとJSのライブラリ。HTMLのClass属性の中で、styleを指定することができる。Bootstrapで独自に定義されたスタイルを使用できる。例えばclass=btnやtable、navを使用すことで独自のスタイルを実装できる。

できること例
・navでのタブ作成
・ツールチップ
・navとdata targetを使用して押されたら隠していた部分を表示

注意
Bootstrapで記述したclassの内容の方が、cssファイルにかかれている内容より優先される。

大きさの単位

絶対的な大きさとして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セレクタの優先度に関してググると良い

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で囲って無理やりブロックにして、配置指定をする。

position

配置指定でたまに使うのposition。こちらのサイトが非常にわかりやすかったです。CSSのpositionを総まとめ！absoluteやfixedの使い方は？

float

floatは設定と介助が存在。その要素にfloat: left;を設定すると、左に寄せて配置されて、次の要素も自分の左に寄せられる。
↓
次の要素が左に寄りたくない時は次の要素にclear: left;としてやることで解除できる。
参考文献はCSS floatを初心者向けに図で解説　抑えるべき注意点とは？

flex

横並びをどういう並びにするかなどを考えるとき使用する。場合によるかもしれないが、横並びの時にmarginやpaddingで配置を指定するのはよろしくない？以下のコードではbootstarapで横並び中央揃えを行っている。
以下のように一番外側のdivでwidth50%とmargin 0 autoを行い、その中のdivでflexを設定している。これで画面が小さくなった時も、よしなに横並び中央揃えをしてくれる


<div class="w-50 mx-auto">
      <div class="d-flex justify-content-between">
      <!-- この下に中央ぞろえしたいインライン要素がある -->

参考文献はFlex · Bootstrap

ボックスモデル

HTMLの要素はpadding border marginで囲まれている。
HTMLの要素自体の幅、高さをwidth、heightで表す

またその要素に
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変更、インラインブロックへの変更で横に大きいの並べるとか

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にアクセスするために作られた関数

nameとid属性の違い
id属性はCSSやJSで使用する。nameはサーバーサイドでparamsから値を得る時に使用する。

formを使用する時の注意
label要素は入力欄要素(フィールド)と関連付を持つことで、選択できる範囲を広げるために用いる。主にチェックボックスとラジオボタンに使用する。
⬇️
具体的なやり方としては
ラベル
or

こうすることで"ラベル"の部分も選択の範囲になる。

inputのタイプにチエックボックス(複数チェック可能)とラジオタイプ(複数チェック不可能)がある。この時HTML要素のname属性に入っているvalue属性の値をサーバー側では扱う。チェックボックスでは複数の値が入ることもあるのでname属性を配列にして統一しておく(例chk[])。ラジオタイプではname属性は配列でなくて良いが、統一しておく。
↓
サーバー側で値を取り出すときは同じnameで呼び出せるようにしたいので、name属性は揃える。

ラジオボタンの場合,checkedをつけることでデフォルトで選択されている状態にできる

チェックボックスのnameは複数選択できるように配列の形にしておく。
name="hobby[]"

属性定義ではid="中身"とするが、""の中にもサーバサイド言語をかける。""の中でif文を書いて、idが切り替わるようにすることもできる

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' %>
    <div class="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を代入
<!DOCTYPE html>
<html>
  <head> #ここで読み出して、HTMLに出す
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>

provideもyieldも関数で、変数に値を入れる、読み出すの処理をしてくれているということ。

HTML、CSS基本

CSS