CSS

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

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

CSS

CSSを初期化する方法

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

CSS

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

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

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

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

CSS

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

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

CSS

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

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

CSS

「Font Awesome」を使ってリストアイコンを作る方法。

「Font Awesome」を使ってから、アイコンを自分で作ることは滅多になくなりました。あまりにも繰り返して使っているので、スラスラとコードを書けるようになりました。でも、リストアイコンを実装する方法は忘れがちなのでメ […]

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