読者です 読者をやめる 読者になる 読者になる

CSSのテクニック

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

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

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

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

floatが嫌になって来た頃にinline-blockを覚えるというCSS初心者の階段を登る

水平に、画像や、文言や、四角や、いろんなものを並べたいということは頻繁に起こります。 まず私のような初心者としては、floatだっ!! と思うと思います。 今回、フリーランスとしての初仕事を経て、マークアップについて、「いろは」から少し実践的なや…

画像のサイズが変わっても縦横比を変えずに枠に合わせて拡大させる

記事の一覧表示など、同じサイズの枠をたくさん並べる時に、画像のサイズでどんなものが来ても枠に合わせて取り繕ってくれる呪文を習ったので備忘メモ。 まず、表示するimageはspanでくくって、background-imageで画像を指定します。 <span class="クラス名" style="background-image:url(画像場所);" alt=""></span> こうすることのメリッ…

長いアルファベットや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をつけたとき、 親要素の高さが検出されない、という問題は、だれもが一度はぶち当たるのではないでしょうか。 これは、親要素の中に、中身のないコンテンツを入れてやることで領域を表示してくれるようになりま…