■
<head>要素にはWebページの設定に関する情報を書いていきます。
<head>要素内に記述した内容はWebページには表示されません。
<head>要素には必ず入れる3つの要素がありますが、それらについては次のレッスンで学びます。
これまでProgate上では「stylesheet.css」で記述したCSSが結果に反映さ
読み込むファイル名
<head>要素の中では、以下のように①文字コードの指定、②ページのタイトルの設定、③CSSの読み込みなどを行っていきます。
これらは定型文のようなものなので完全に覚える必要はありません
文字コードを指定することで、ページの文字化けを防ぐことができます。
<meta charset="utf-8">とすることで、そのページの文字コードをUTF-8に指定することができます。
UTF-8は、HTML5で推奨されている文字コードです。
<title>要素で指定されたタイトルは、ブラウザのタブ上に現れます。
<ul>の<li>要素を横並びにするにはfloat:left;
list-style: none;でリストマーク消える
div要素同士を横並びにしたい場合も横並びが始まる最初の要素にfloat:leftを使う
paddingの値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用されます。
値を2つ指定した場合、「上下」「左右」の順に適用されます。
「.header-list」の後にスペースを空けてliと続けると、「header-list」の中の<li>要素にのみCSSを適用することができます。
cssにbackground-image:url(画像のurl);
と記述すると背景画像を指定できる
background-size: corver;
と指定すると表示する画面の画像を一枚で納めてくれる
クラスを中央に寄せたい場合は
左右のmarginをautoにしてwidthを指定する
margin autoする際は必ずwidthを指定しなければならない
上下のmarginはautoできない
opacity: 1~0.0;
で要素を透明にできる
数値は１（不透明）〜0,0（完全な透明）の範囲で指定できる
letter-spacing:数値px;
で文字の間隔を指定できる
インラインブロック要素は
横並びで、要素の幅や高さも指定できる
ブロック要素は縦並びで、幅や高さを指定できる
インライン要素は横並びで、幅や高さ指定できないmargin,paddingは左右のみ指定可能
aタグは初期状態はインライン要素だが、
displayを使うとインライン要素に変更できる
displayは
block(ブロック要素)
inline-block(インラインブロック要素)
inline(インライン
)
で指定できる
btnなどの共通のclassに少しだけ変化を付けたい時は
class名に半角スペースを付けてclass名をつけるとクラスを追加できる
class = "btn red"
.btn{
}
.red {
}
カーソルが乗った時の状態をhoverと言い
セレクタ:hover {
background-color:
とすることでカーソルが乗った際に色を変えることができる
border-radius: 数値px;
で要素の角を丸くできる
text-alignでテキスト等のインライン要素、インラインブロック要素の
配置を指定できる
要素を中央寄せする時
広い範囲を囲うようなブロック要素はmargin: 0 autoを使い
テキストやボタンのようなインラインブロック、インライン要素には
text-alignを使う。
fontawesomeを使用場合は
spanタグにfaクラスと fa-アイコン名を両方指定する
opacityは要素の中身全てを透明にしてしまう
背景色のみ透明にする場合はrgbaを使用する
rgbはカラーコードを数値にした物
rgbaはプラス透明度を足した物
rgba(34, 49, 52, 0.9)←左から三番目までがカラー数値で0,9が透明度
transitionを使うとアニメーションをつけることができる
変化の対象と変化にかかる時間を指定できる
変化の対象はcolorやallを指定できる
allは全てのプロパティに適用される
transition:変化の対象 数値s;
hoverと一緒に使うことが多い
line-heightを使うと行の高さを指定できる
line-height: 数値px;
また、line-heightは高さの中心に文字を配置する為
要素の高さと同じ値にする事で縦方向の中央に配置する事もできる
aタグはインライン要素なのでリンクを付けた場合など中身のテキストの部分しかクリックできないが
ブロック要素にするとクリックできる範囲が要素全てに変わる
heightやwidthをpxではなく%で指定すると親要素に対して
どのくらいの幅や高さをもつか指定できる
要素同士を重ねて表示する時は
position: absolute;を使う。
サイト全体の左上部を基準とし、要素をtopやleft,right,bottomを使う。
また,
position:relativeを親要素に指定すると
その要素の左上部が基準値になり要素同士を重ねやすくなる
boxに影をつける時は
box-shadowを使う
box-shadow: 水平方向px 垂直方向px 色;
で指定できる
マウスのカーソルが乗った時にカーソルの形を変えたい時は
cursorプロパティを使う
activeを用いる事で要素がクリックされている時だけcssを適用することができる
セレクタにactiveを追加するだけ
div:active {
}
hoverと同じ使い方
また、activeの時だけ影を消すことができる
div:active {
box-shadow:none;
}
とするとクリックを押した時だけ影を消すことができる
多くのプロパティはnoneを指定することにより消すことができる
position:relativeは要素の位置を変更するために使うことができる
position:relativeとtop,leftを併用すると本来の位置からズラせる
クリック時に
box-shadowをnoneにする
position:relativeとtopを使い影の分だけ位置を下げる
を行うとボタンが凹んで見えるようになる
position:fixed;を使うと常に画面上の指定した位置に固定できる
位置はtop,left,right,bottomで指定できる
だが、positionを使用すると要素の重なりが生じてしまうため
重なり順を指定する必要がある
z-indexプロパティは要素の重なりを指定できる
数値で指定し、値が大きいほど上に表示される
positionとz-indexは必ず併用して使用する
topやz-indexは数値；で指定。pxなどは不要
レスポンシブデザインを適用することにより
画面のサイズに合わせて最適なレイアウトを組めるようになる
レイアウトとは
デザインやインテリア、建築設計においてどこに何を配置するかと言うこと。また、そのような配置をする行為。
メディアクエリとは
ブラウザの画面サイズに応じてcssのスタイルを設定できる手法
メディアクエリは、@media (条件){....}と書き
指定された条件に当てはまる時のみ{}内のcssが適用される
メディアクエリの条件には、
max-width(最大幅)
min-width(最小幅)を指定できる
max-width:○○pxと指定すると
画面幅が○○px以下の時にcssが適用される。
min-widthはその反対の意味。
また、指定する○○pxの部分をブレイクポイントと呼ぶ
スマートフォンの画面は670px以下
タブレットは670~1000px以下
pcは1001~と想定して設定する
@media(条件) {
セレクタ {
適用したいcssを記述
}
}
widthが指定されている場合左右のpaddingを追加するとwidthの幅が超えてしまうためレイアウトが崩れてしまう。
レイアウト崩れはbox-sizing:border-box;を
用いる事で防ぐことができる
box-sizingをborder-boxに指定すると、要素の幅(width)の合計に
paddingとborderが含まれるようになる。
そのため、paddingとborderを追加した時にレイアウト崩れが生じなくなる。
marginは合計には含まれない為注意。
box-sizingには
・content-boxパディングとボーダーを幅と高さに含めない（初期値）
・border-boxパディングとボーダーを幅と高さに含める
・inherit親要素の値を継承する
の値がある
box-sizing:border-box;は全ての要素に対して適用することでレイアウトを管理し易くなる
その為、*(アスタリスク(全ての要素に適応してくれる))に対して
指定することが推奨されており
全ての要素に対して適応されるようになる。
レしポンシブデザインを適応するために
<head>タグにviewportを設定する
viewportを指定しないとスマートフォンやタブレットでの閲覧の際
正しくメディアクエリが適応されない
widthはは固定してしまうと小さい画面の際固定されたpxで表示されてしまう為
画面幅によって全体のwidthが変わるようにwidth100%にする
親要素の高さは子要素を包む高さであるが
子要素を全てfloatにした場合親要素の高さは０になる
floatは浮いていると言う意味で親要素から見るとfloatの子要素は存在しないようにみえるから
floatはclear:left;で浮いている状態を解除できる
clear:left;を適用するためだけの空のタグを用意する
からタグとclearでleftを解除するのはよく使われる
画面幅によってフォントサイズを調整する
pc font-size:45px
タブレット32px
スマートフォン24px
画面幅が大きすぎる場合widthを100％にしていると要素が
離れすぎてしまい見づらくなってしまう
max-widthを指定することで画面幅の上限を指定でき
width:100%は上限内での最大の幅を表示できる
要素を非表示にするにはdisplay:none;
非表示にした要素を表示させる時はdisplay:block;
を用いる
HTML,css, JavaScript
一部分だけ文字を変えたい場合は
<span>を使う
<a><span>はインライン要素
.class名+spanで、spanだけの色を変えられる
css でborder-方向で太さ、種類、色
<input>は一行のテキスト
閉じタグは不要
<textarea>は複数行のテキスト入力を受け取る
input type=submitで送信ボタンを作る
valueでボタンの名前を変えることが出来る
複数のセレクタをコンマ(,)で区切ることで
それらに適用出来る
javesprict
//はコメントアウトされる
let 変数名= 値
letは変数を定義すると言うことを宣言している
const定数名 = 値
変数は変更出来るが定数は変更出来ない
テンプレートリテラル
${定数}とすることで文字列の中に含める事が出来る。
この時全体をバッククォート(`)で囲む必要がある
インデントは字下げ
input要素にautocomplateについて
input要素にautocomplateを設定することでフォームでの入力を自動入力に
変えてくれる
設定できる項目は
name: 姓名family-name: 姓given-name: 名email: メールアドレスpostal-code: 郵便番号address-level1: 都道府県address-level2: 市区町村address-line1: 番地・マンション名（1行目）address-line2: 番地・マンション名（2行目）organization: 会社名off: 自動入力を無効にする
⚫️typeで"email"と設定すればiosの場合USキーボードが起動し、[Space]の横に@や.のボタンが表示される。
※iOS（アイオーエス）とは、iPhoneやiPadなどのApple製品に搭載されているOSである。
OSはオペレーティングシステム（英: Operating System、略称:OS、オーエス)とは、コンピュータのオペレーション（操作・運用・運転）を司るシステムソフトウェアである。
⚫️type="tel"と指定すると、テンキーのキーボードが起動します。
⚫️iOSでは英字入力の場合に、先頭の文字を自動的に大文字にする機能（Auto Capitalize）
アルファベットのスペルミスを正してくれる機能（Auto Correct）が動作します
<input name="username" type="text" autocomplete="username" autocorrect="off" autocapitalize="off">
deviseのsingupにnameを追加
deviseのregistrationsのnew(sing_upページ)にnameを
追加したいとき
application_controller.rb
def configure_permitted_parameters
added_attrs = [:name, :email, :password, :password_confirmation ]
end
added_attrs = [:name, :email, :password, :password_confirmation ]
この部分にnameを追加し
permitに変数added_attrsを追加すると
registrationsのnewに
nameを追加することができる。
