「CSS」の記事

  • CSS

    Sassをはじめる前の基礎知識・インストール方法

    Sassはスタイルシートをつくるためのプログラミング言語です。ファイルを分割できる・変数を使用できるなど大規模サイトを大人数で構築する際に効果的です。「Ruby」で実装されているためRubyの環境が必要です。

  • CSS

    CSSを初期化する方法

    CSSを用いてWebサイトを実装するときは、初めにブラウザのスタイルをリセットするのが一般的です。初期化専用のCSSをリセットCSSと呼びます。

  • CSS

    CSSだけで実装できるフォトフレーム

    フォトフレームは簡単なCSSで実装できるコーディング初心者におすすめのテクニック。ぼくもよく利用しています。CSSを使うのは、画像で作るよりも修正が楽で保守性に優れているので気分によってデザインを変えられるのがメリット。

  • CSS

    ホームページ制作に便利なジェネレーターの総まとめ

    僕のホームページ制作を手伝ってくれるジェネレーターを発表します。汎用機のCOBOLプログラマーだった僕にとって、ウェブ上にジェネレーターが転がっているのは衝撃的です。あまりイラレやHTMLとか知らなくてもホームページをつ […]

  • CSS

    ホバーしたら下線が中央から表示されるホバーエフェクトの実装方法

    テキストリンクのホバーエフェクトを作りました。普通に下線の出し方を少しドラマチックにしてみました。

  • CSS

    CSSで簡単に「ドロップダウンメニュー」をつくる。

    ドロップダウンメニューの作り方をメモします。構造が深いサイトのナビゲーションを実装するときに便利です。サブメニューもあるタイプのドロップダウンメニューをCSSで作っています。jqueryは使用していません。

  • CSS

    「Font Awesome」でアイコン付きリストを作る方法。

    「Font Awesome」に出会ってから、アイコンを自分で作ることは滅多にありません。CSSにも利用できるのが素晴らしい。リストアイコンを実装する方法は忘れがちなのでメモをしておきます。いやぁ、便利になったね。 「Fo […]

  • CSS

    「clear」と「clearfix」の使い分けについて

    「float」の周り込みを解除にするときの常套手段である「clear」と「clearfix」についてまとめました。「clear」プロパティでは、うまくいかないときは「clearfix」をつくって周り込みを解除します。 c […]

  • CSS

    レスポンシブな2カラムレイアウト(サイドメニュー幅固定)をCSSでつくる方法

    サイドメニューの幅を固定したまま、コンテンツエリアだけをウィンドウ幅に応じてレスポンシブにします。サイドエリアにバナーを設置したり、文字崩れを避けたいときなどに効果的です。CSSだけで簡単につくれます。

  • CSS

    youtube、GoogleマップをCSSでレスポンシブに埋め込む方法

    youtube、Googleマップをサイトにレスポンシブに埋め込む方法をメモします。ブラウザの幅を狭めても、スマートフォンで見ても、右端が切れることなく表示できます。CSSで表示幅・高さを調整しています。

あわせて読みたい

Web制作者のためのSassの教科書
Sassの導入方法から基礎的な使い方、実践テクニックまで丁寧に紹介されています。

本の内容を詳しく見る

Back to Top