学習[55]日目:haml、sassに関して
本日の学習内容
本日の迷ったところ
- font-awesomeを用いたアイコンの実装(fileアップロードする為のボタンの作成)
- boxsizingが未適用によるブロック要素同士のズレ
- Base-level rules cannot contain the parent-selector-referencing character(Error)
- 幅や高さの指定は計算値を使用することが多かった...
font-awesomeを用いたアイコンの実装(fileアップロードする為のボタンの作成)
まず、ファイルをアップロードする為のボタンに関してはinputで作成します。
しかし、デフォルトで適用されてしまうスタイルがあり、ボタンにはファイルを選択、テキストで「アップロードするファイルを選択してください」となってしまいます。
これを任意のアイコンを設定してボタンにするには labelタグで囲ってあげることにより、通常ボタンアイコンのみクリッカブルである設定をタグに含んでる要素に適用範囲を含めることが出来るようになる。
これでアイコンを追加すればクリックが可能になるわけだが、これだけでは、不要なスタイルが適用されたままなので、inputのスタイルをdisplay noneで排除してlabelタグにスタイルを適用することで任意のボタンの作成が可能
boxsizingが未適用によるブロック要素同士のズレ
そもそもbox-sizingとは、要素の幅と高さの中にpaddingとborderを含めるかどうかという設定ができるプロパティです。
デフォルトで設定されているのは基本的にcontent-boxで要素が作り出す幅は、width + padding + borderの太さ + marginになります。pxでwidthやpaddingを指定する分にはこれでも別に良いのですが、borderはpxでしか設定出来ないので親要素に対して幅100%にすることが難しく、ズレが生じることになります。
しかし、border-boxを* で全体に適用することでwidthの中にpaddingとborderが含まれるので「width」と「左右のmargin」の合計だけを100%にすれば、親要素にはまります。
Base-level rules cannot contain the parent-selector-referencing character '&'(Error)
上記のエラーが発生してhamlの記述変更後に起きたのでhamlを確認していたが、hamlの記述を変更したことによってsassで適用されるセレクタがなくなってしまい、scssの反映が無効になりエラーが起きたということが分かり、無駄にhamlをいじくってしまったような気がしました。
幅や高さの指定は計算値やpx以外の単位を使用することが多かった...
em、rem、vh、vwとか色々使用してこなかった単位が出てきて正直びっくりしてしまったが、今まで使用していたpxは絶対値での設定でこれらは全て相対値で設定するものだということを理解した。
これらを利用してくことで慣れていくしかない。
以上、本日の学習内容のまとめになります。
最後までお読み頂きありがとうございました。
参照：https://saruwakakun.com/html-css/reference/box-sizing
