CSS

CSS

FLOCSSを使って破綻しにくいCSS設計を!

CSS設計をしっかり行うことで破綻のしにくく再利用しやすい、保守性の高いCSSを書くことができるようになります。CSS設計の手法は有名なものがいくつかあるのですが、自分が(今のところ)好きなのはFLO…

はにわまん
CSS

途中からヘッダー固定にする方法!画面上部までスクロールされたら固定する

途中からヘッダー固定にする方法の紹介です。 スクロールしてグローバルメニューが画面の上部に達した時に固定するという動きを実装していきます。 実際の動きとしてはこんな感じです。 途中からヘッダー固定にす…

はにわまん
CSS

動画をヒーローイメージのように画面いっぱいに背景表示させるCSS

背景に動画を使うための方法を紹介していきます。厳密には背景は画像しか指定できないので、「背景っぽく」CSSで表現するって感じですね。 この記事ではファーストビューの画面いっぱいに動画を表示させるための…

はにわまん
CSS

CSSを理解するためのWebサービス2つとおすすめ書籍を5冊

この記事ではCSSを理解するためのWebサービスとおすすめの書籍を紹介します。 基本的には手を動かして体験しまくって、自分の頭でイメージできるようになって身につくものだと思います。 CSSの基礎は無料…

はにわまん
CSS

CSSで倍率を表現する「%」と「em」はどう違う?特徴と用途のまとめ

レスポンシブサイトを主流になって、CSSでの表現で「%」と「em」がよく使われるようになりました。この2つの値は両方とも倍率を表すものです。 マスターするポイントとしては、「どこの値に対する倍率か?」…

はにわまん
CSS

レスポンシブのブレークポイントの決め方!PCデザインカンプから再現する際のベスト

「ブレークポイントをどうしよう…」、レスポンシブデザインでは常に悩みの種かもしれません。日頃コーダーとしてデザインカンプからPCデザインだけ渡されて「スマホもレスポンシブでいい感じによろし…

はにわまん
CSS

CSSでテーブルを作る上で実践的に覚えておきたいこと

CSSのテーブルは癖が強いというか、どういう風な仕組みで動いているか分かりにくいCSSにプロパティだと思います。 よくあるのは、レスポンシブ時にはみ出る、、、というやつですね。もともとテーブルとスマホ…

はにわまん
CSS

日本語の縦書きサイトで使うCSSプロパティと注意点

縦書きのサイトを作るときのCSSの使い方と注意点についてまとめました。 癖が強いので、ブラウザ間での差異がないかのチェックは入念にしておいた方がいいかもしれません。 縦書きにするCSSの指定方法 以下…

はにわまん
CSS

CSSで変数っぽく使えるインクリメント変数で連番がスマートに!

CSSは基本的に変数は使えませんが、連番を表現するときは動的に順番の「値(数字)」を取得してくれる関数?値?が用意されています。 よくあるのは、ブログとかのランキングで「○位」みたいな指定をするときで…

はにわまん
CSS

Webフォント(Googleフォント)の使い方!WindowsやMacに依存しないサイト制作

Webサイトで表示させるフォントには大きく分けると2つあります。 デバイスフォント ・・・ WindowsやMacなどのデバイスに依存 Webフォント ・・・ ネットワーク上からフォントデータを取得 …

はにわまん
1 2 4