CSS/SCSS
letter-spacingを使う！ letter-spacing 1rem px でももちろん指定できる。 以上
vw, vh, vmin, vmax、これらは何か？ これらの、全てについている v は、 viewport の v です。 なので、表示しているデバイスの画面の大きさを基準にして、要素の width や height を指定するのに使うことができます。 vw：viewport width ビューポートの幅…
ブロック要素で縦横比（アスペクト比）を固定したいと思いました。 結論としては、 padding-top を使うとうまくいきました。 【CSS（stylus）】 .box width 100% height auto padding-top 65% アスペクト比固定イメージ 備忘まで。
ブロックの四隅にだけ枠（border）をつけたいと思いました。 イメージは以下のような感じ。 「四隅に枠」のイメージ 最初は、途中でborderの色を変えればいいのかな？ と思いました。 でも、四隅に小さい四角を用意して、 position: absolute で配置すればい…
やりたいこと span とか div とか増やさずに、１つの要素をあるところで二色に塗り分けたい、ということがありました。 調べてみたら background: linear-gradient という指定の仕方があるという。 やり方も簡単そうなので、こちらで実装することに。 とりあ…
垂直方向に真ん中にテキストを配置したい場合は良くある 結構あるんですよね。 ある範囲で、垂直方向真ん中にテキストを配置したいっていうこと。 垂直方向真ん中にテキストを配置したい その度に、 vertical-align が思い浮かぶんですが、毎回結局これを使…
画像の大きさによらず枠いっぱい表示したい 画像の大きさが違ったり、縦長だったり、横長だったりする場合がありますよね。 そういう時に、兎にも角にも枠いっぱいに画像を表示してほしい、ということはよくあります。 画像の表示の仕方としては、 imgタグ …
CSSのdisplay:flexの基本 flex使い方 親divに、 display: flex をつける。 その直下の子1（左）に flex-basis: 30% 、 子2（右）に flex-basis: 70% をつけると、うまいことフレックスで動いてくれる。 card /* 親 */ display flex width 100% body /* 子2 *…
チェックボックスのデザインを別画像で置き換えたいことはありますよね。 チェックボックスのデザインを変える。考え方 今回は、Pugとstylusを使って書いたのですが、HTML/SCSSで書いている人用に、下に同様のものをそれぞれ追記しますので、必要な人はそち…
CSSやJavaScriptで、変更したのに、変更がきかない！ あああああぁあ〜 なぜ〜〜〜〜〜えぇぇ〜 という思いをした方も多いのではないでしょうか。 エンジニアあるある。 そのたんびに、キャッシュを消して再読み込み！ とかするわけですけれど、エンジニアは…
画像をファイルを読み込む部品を作っています。 プレビューするjQueryやinputタグのデザインは以下で書きました。tacosvilledge.hatenablog.com 読み込んだ画像が縦横どんなサイズの画像だったとしても、適度な大きさで真ん中に配置して表示したい、と思った…
width: calc ( 100% - 300px ); と言った風に書く。 この時、calc(100%-300px) というように、マイナスの前後を開けずに書いたら、chromeのdeveloper toolでは認識されませんでした。 あと、calc ( ( 100% - 20px ) - 300px) ; みたく、括弧の入れ子もできる…
vendor-prefixをいちいちCan I useで調べて付与するのは当たり前のように面倒なので、npm scriptを使ってできないか調べて見て、できました。 postcssとAutoprefixerをインストール npm i -D postcss-cli autoprefixer -Dは、package.jsonファイルの「devDep…
毎回忘れてググっているので、悔しくなってメモ。 border-radius: 25px; とかでOK。 PaddingやMaginと同じく、4つ指定、3つ指定、2つ指定ができます。 ４つ指定した場合 ：左上、右上、右下、左下の順で指定できる ３つ指定した場合 ：１つ目が左上、２つ目…
前回、npmの初めの一歩を書きました。 tacosvilledge.hatenablog.com 今回は、node-sassとcpxを入れてnpm scriptを使えるようにしたいと思います。 サイトのデザインは、scssで書いた方が、cssで書くよりも効率よく書けるので、 scssで書いたものを、cssにコ…
背景画像を枠に収まるように一番大きく表示させたいときは、background-sizeプロパティの値は、containにします。 これと対照的なのは、（もし背景画像の大きさが、枠より小さくても、枠と同じ縦横比率ではなかったとしても、）枠いっぱいいっぱい背景画像で…
水平に、画像や、文言や、四角や、いろんなものを並べたいということは頻繁にありますよね〜 まず私のような初心者としては、floatだっ！！ と思うと思います。 しかしfloatって結構ややこしいし、思い通りにいかないことが多いのです。 ありがち二大お困り…
アルファベットの続きもじ（とくにURLなど）は、改行すべきところで改行してくれないことがあります。 そういう時は、bodyかhtmlに、「word-wrap: break-word」を指定すると、一発で改行されます。 簡単ですが、対応しておかないと後とレイアウトがずれるこ…
CSSを知る前は、「レスポンシブ対応」というのはえらく仰々しい作業なんだろうと思っていました。 CSSを勉強して、「CSSをデバイスごとに複数かき分ける」ことなんだ、と知りました。 やり方は、2つあるようです。 CSS内でかき分ける CSSをデバイスごとに複…
ブログの記事など、いくつか同じハコを並べたときに、最後のマージンが！！ これなんとかしたい、ということはないでしょうか？？ こういうときに便利な、最後のコンテンツ（画像でいうところの、「院長紹介」のところ）だけをCSSで指定することができます。…
divisionを分けて、子要素にfloat: right/leftをつけたとき、 親要素の高さが検出されない、という問題は、だれもが一度はぶち当たるのではないでしょうか。 これは、親要素の中に、中身のないコンテンツを入れてやることで領域を表示してくれるようになりま…
今日は、HTMLとCSSだ。 過去に簡単なHTMLの更新作業をしたことがあるが、 自分で作ろうとしてみたときは、CSSがややこしくて躓いてしまった。 細かいところは一旦置いて、概要をつかんだ後実践を通して身に付けていこう。 ■Sublime3のShort Cut ・Ctrl+` コ…
