web制作の実案件で僕が受けたフィードバック箇所を重要度でレベル分けして見た
久々にqiita方に書きました。案件でもらったフィードバックなどは、こうやってちょくちょくまとめておきたいと感じますね！！ https://qiita.com/terry_6518/items/3eb87111daaa57ebddd7 …
Inputタグのplaceholder、disabledの装飾
自分用の備忘録。 フォームでよく使われるInputタグのplaceholderやdisabledの時に装飾方法です。 特に装飾していない状態だとInputタグは以下の様になります。 「現在のメールアドレス」は入力できない様にdisabledを施していますが、色が一緒な為、気が付きにくいです。 また「新しいメールアドレス」はplaceholderの文字が大きすぎる為、窮屈だし、文字色も薄めにしたいです。 以下の画像の様な状態を目指します。 やり方 scssのみ記入します。 この様に擬似要素とすると、Inputタグ内のdisabledやplaceholderにcssが当たります。 以上。 …
scssの使い方・書き方入門
scssとは scssはcssを効率的に書く事のできるメタ言語です。cssの場合、長く複雑な記述をしなければいけない所を、scssを使うとわかりやすくシンプルに書く事ができます scssの使い方 実際にscssを使っていく際に.scssか.sassという拡張子のファイルに保存します。また生のcssと違いhtml内に<style>で記述する事は出来ません。 scssファイルを直接読み事は出来ないので、コンパイルという処理を行なってcssに変換します。ターミナルから行う場合は以下のコマンドにてコンパイルしてくれます。(hoge.scssをhoge.cssにコンパイルしている) コンパイルは他にもGUIを使っても行えます。自分は良く、npmを使って自動で更新される度に反映される状態を作っています。 sassとscssに違い 一言でまとめると「書き方が違います！！」 scssの方がcssに近いので一般的には書きやすいとされています。sassはより短い記述が可能なので、効率的に書き事ができます。 細かい書き方の違いはこちらなど参考にしてください。https://original-game.com/scss-vs-sass/ scssの書き方 ネスト(入れ子)構造 scssでは入れ子構造での書き方が基本になります。 というhtmlに対してscssを書くと以下のようになる。 コンパイル結果のcssはこのようになり、入れ子構造から勝手に親要素を認識してくれます。 scssの様々な書き方 scssにて良く使われる記述をまとめていきます。 divの中にいるclassがhogeを指定する …
