ヘッダー、フッターをブラウザ幅いっぱいにする方法
色んな方法があると思いますがスタイルシートでmin-widthを使い簡単に出来ます。通常のホームページレイアウトは大きく分けると、全体を囲むボックス、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスになっています。 このレイアウトを全体を囲むボックスを無くし、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスに変えさらにヘッダーを幅いっぱいにする為のボックス（仮名称headerbg）とフッターを幅いっぱいにする為のボックス（仮名称footerbg）を加えます。 ここではメインの幅を940pxで作成した例で説明していきます。ヘッダーボックス（仮名称header）の幅を940px、メインボックス（仮名称container）の幅を940px、フッターボックス（仮名称footer）の幅を940pxにします。そこにヘッダーフッターをブラウザ幅いっぱいにするボックスが入っています。下記の
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webcreatornote.com/2011/01/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E9%83%A8%E5%88%86%E3%82%92%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%9B%E3%81%9A%E5%9B%BA%E5%AE%9A%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/
builwing.info
TECH PROjin
html5-memo.com
MdN Design｜総合情報サイト