鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

CSS/SCSS

CSSで文字間のスペースを広げたい

letter-spacingを使う! letter-spacing 1rem px でももちろん指定できる。 以上

vw, vh, vmin, vmax覚書と、使う時の注意点

vw, vh, vmin, vmax、これらは何か? これらの、全てについている v は、 viewport の v です。 なので、表示しているデバイスの画面の大きさを基準にして、要素の width や height を指定するのに使うことができます。 vw:viewport width ビューポートの幅…

CSSで縦横比(アスペクト比)を固定したい

ブロック要素で縦横比(アスペクト比)を固定したいと思いました。 結論としては、 padding-top を使うとうまくいきました。 【CSS(stylus)】 .box width 100% height auto padding-top 65% アスペクト比固定イメージ 備忘まで。

CSSで四隅に枠をつけたい

ブロックの四隅にだけ枠(border)をつけたいと思いました。 イメージは以下のような感じ。 「四隅に枠」のイメージ 最初は、途中でborderの色を変えればいいのかな? と思いました。 でも、四隅に小さい四角を用意して、 position: absolute で配置すればい…

背景を二色で塗り分けたい(めちゃめちゃ楽しいlinear-gradient)

やりたいこと span とか div とか増やさずに、1つの要素をあるところで二色に塗り分けたい、ということがありました。 調べてみたら background: linear-gradient という指定の仕方があるという。 やり方も簡単そうなので、こちらで実装することに。 とりあ…

CSSで垂直方向真ん中にテキストを配置したい

垂直方向に真ん中にテキストを配置したい場合は良くある 結構あるんですよね。 ある範囲で、垂直方向真ん中にテキストを配置したいっていうこと。 垂直方向真ん中にテキストを配置したい その度に、 vertical-align が思い浮かぶんですが、毎回結局これを使…

CSSで画像の大きさによらず枠いっぱい画像を表示したい(cover)

画像の大きさによらず枠いっぱい表示したい 画像の大きさが違ったり、縦長だったり、横長だったりする場合がありますよね。 そういう時に、兎にも角にも枠いっぱいに画像を表示してほしい、という時に便利なのが、 background-image として画像を表示させる…

CSSのdisplay:flex(flexbox)を使うときの注意点

CSSのdisplay:flexの基本 flex使い方 親divに、 display: flex をつける。 その直下の子1(左)に flex-basis: 30% 、 子2(右)に flex-basis: 70% をつけると、うまいことフレックスで動いてくれる。 card /* 親 */ display flex width 100% body /* 子2 *…

checkboxのデザインを任意の画像で変更する考え方と実装方法

チェックボックスのデザインを別画像で置き換えたいことはありますよね。 チェックボックスのデザインを変える。考え方 今回は、Pugとstylusを使って書いたのですが、HTML/SCSSで書いている人用に、下に同様のものをそれぞれ追記しますので、必要な人はそち…

毎回キャッシュを読み込まずにページをロードするようにしたい

CSSやJavaScriptで、変更したのに、変更がきかない! あああああぁあ〜 なぜ〜〜〜〜〜えぇぇ〜 という思いをした方も多いのではないでしょうか。 エンジニアあるある。 そのたんびに、キャッシュを消して再読み込み! とかするわけですけれど、エンジニアは…

読み込んだ画像のプレビューで中央縦横真ん中に配置したい

画像をファイルを読み込む部品を作っています。 プレビューするjQueryやinputタグのデザインは以下で書きました。tacosvilledge.hatenablog.com 読み込んだ画像が縦横どんなサイズの画像だったとしても、適度な大きさで真ん中に配置して表示したい、と思った…

cssのcalcファンクション覚書

width: calc ( 100% - 300px ); と言った風に書く。 この時、calc(100%-300px) というように、マイナスの前後を開けずに書いたら、chromeのdeveloper toolでは認識されませんでした。 あと、calc ( ( 100% - 20px ) - 300px) ; みたく、括弧の入れ子もできる…

npm-scriptとAutoprefixerでvendor prefixの付与を自動化する

vendor-prefixをいちいちCan I useで調べて付与するのは当たり前のように面倒なので、npm scriptを使ってできないか調べて見て、できました。 postcssとAutoprefixerをインストール npm i -D postcss-cli autoprefixer -Dは、package.jsonファイルの「devDep…

border-radiusはピクセル(pxで指定)

毎回忘れてググっているので、悔しくなってメモ。 border-radius: 25px; とかでOK。 PaddingやMaginと同じく、4つ指定、3つ指定、2つ指定ができます。 4つ指定した場合 :左上、右上、右下、左下の順で指定できる 3つ指定した場合 :1つ目が左上、2つ目…

初めてのnode-sassとnpm scriptでscssファイルをcssファイルにコンパイルする

前回、npmの初めの一歩を書きました。 tacosvilledge.hatenablog.com 今回は、node-sassとcpxを入れてnpm scriptを使えるようにしたいと思います。 サイトのデザインは、scssで書いた方が、cssで書くよりも効率よく書けるので、 scssで書いたものを、cssにコ…

CSSの背景画像を枠の中にはまるように一番大きく表示する

背景画像を枠に収まるように一番大きく表示させたいときは、background-sizeプロパティの値は、containにします。 これと対照的なのは、(もし背景画像の大きさが、枠より小さくても、枠と同じ縦横比率ではなかったとしても、)枠いっぱいいっぱい背景画像で…

ブロック要素なんだけど左右に並べたい(なんて便利なinline-block)

水平に、画像や、文言や、四角や、いろんなものを並べたいということは頻繁にありますよね〜 まず私のような初心者としては、floatだっ!! と思うと思います。 しかしfloatって結構ややこしいし、思い通りにいかないことが多いのです。 ありがち二大お困り…

長いアルファベットやURLでも途中で改行する「word-wrap: break-word」

アルファベットの続きもじ(とくにURLなど)は、改行すべきところで改行してくれないことがあります。 そういう時は、bodyかhtmlに、「word-wrap: break-word」を指定すると、一発で改行されます。 簡単ですが、対応しておかないと後とレイアウトがずれるこ…

【HTML/CSS】 レスポンシブ対応の第一歩:メディアクエリの書き方

CSSを知る前は、「レスポンシブ対応」というのはえらく仰々しい作業なんだろうと思っていました。 CSSを勉強して、「CSSをデバイスごとに複数かき分ける」ことなんだ、と知りました。 やり方は、2つあるようです。 CSS内でかき分ける CSSをデバイスごとに複…

【CSS】いくつもあるclassの最後の一つだけを指定したい

ブログの記事など、いくつか同じハコを並べたときに、最後のマージンが!! これなんとかしたい、ということはないでしょうか?? こういうときに便利な、最後のコンテンツ(画像でいうところの、「院長紹介」のところ)だけをCSSで指定することができます。…

【CSS】 子要素にfloatをつけたとき親要素の高さが検出されない問題の解消・clearfixのテンプレート

divisionを分けて、子要素にfloat: right/leftをつけたとき、 親要素の高さが検出されない、という問題は、だれもが一度はぶち当たるのではないでしょうか。 これは、親要素の中に、中身のないコンテンツを入れてやることで領域を表示してくれるようになりま…

プログラミング初心者が最初に覚えるべき基本事項(テキストエディタ、HTML/ CSS、JavaScript自習)

今日は、HTMLとCSSだ。 過去に簡単なHTMLの更新作業をしたことがあるが、 自分で作ろうとしてみたときは、CSSがややこしくて躓いてしまった。 細かいところは一旦置いて、概要をつかんだ後実践を通して身に付けていこう。 ■Sublime3のShort Cut ・Ctrl+` コ…