「HTML,CSS」 一覧

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

切り替えたときにどうやって「タブの下の線」を消せばよいのか試行錯誤した結果を備忘録としてポストします。

今までも何度か登場していますが、ラジオボタンの背景色。今回は、選択肢によって色を変えれば見やすくなると思ったのでそれに対応したものの備忘録です。

a要素の href 属性に電話番号を設定するだけでスマートフォンで電話発信用のリンクを作成することが可能です。その方法を備忘録としてポストします。

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

トップページなどで、動画や画像コンテンツの下に配置してあったグローバルナビを、スクロールしたら画面上部に固定して表示するスクリプトを作成したので、備忘録を兼ねて紹介します。

WEBアイコンフォントで有名な「font-awesome」のアイコンを、をフォー ...

WEBアイコンフォントで有名な「font-awesome」のアイコンをh1などの標題で使う際、各ページの標題に埋めるのもメンテナンスが大変なので背景に出来ないかと思ったので、その方法を備忘録としてポストします。

背景に動画を使うサイトをよく見受けられるようになってきました。 どうやって作って ...

リストや定義リストなどを横並べに配置する「flexbox」の書き方メモ。 以前書 ...

CSSで画像を丸く切り抜く方法を備忘録としてポストします。

最近、ロゴに「.svg」となったファイルを使うサイトが増えていているような気がします。
.svgとはなんなのかよく知らなかったので調査し、実際にブラウザで表示させることが出来るようになったので、備忘録としてポストしてみたいと思います。

以前ラジオボタンの背景色を制御するスクリプトをjQueryで作成したのですが、ラジオボタンを大量に設置するとブラウザが反応しないという事態に陥ったので、CSSの疑似要素を使って制御する方法を紹介します。

以前から、タグクラウドの表示で一文が改行させるのが非常に気になっていましたが、何の事はない、 対象のaタグに対して white-space:nowrap を指定するだけですっきりさせることが出来ましたので、備忘録としてポストします。

タイトル通り、一番単純でスッキリしているテーブルのスタイル指定。
自分へのコピペ用としてポストします。

heightがわからないボックスの中にテキストを縦方向中央に配置する方法を備忘録としてポストします。

CSSの背景関係を指定するプロパティですが、一括指定の方法をよく忘れるので、一度、backgroundプロパティに整理してみます。

リストの奇数・偶数・指定番目などを指定して装飾する方法を備忘録としてポストします。

画像を任意の場所に固定配置し、スクロールしてもその場に表示させる方法２種類を備忘録としてポストします。

CSS3でグラデーションを作る際、コピペですぐ出来るよう、忘備録としてポストします。

Bootstrap使用時、「img-responsive」プロパティで画像をレスポンシブ対応させた場合に左寄せとなりますが、それを中央寄せ（センタリング）させる方法を忘備録としてポストします。

Bootstrap使用時、HTML5の placeholder 属性の文字色を変更したい場合の方法を忘備録としてポストします。

CSSのフレームワークである「Bootstrap」を使って既存のメールフォームをリニューアルしたので、その使い方などを忘備録としてポストします。

ちょっとでもテンションが上がるようなログイン画面にしてみたい、ってことでググりましたところ、海外のサイト（しかも2009年）の記事ですが、ログインのデザイン画面のみを集めたサイトを見つけました。

ボックスの透明度を操作する時に「opacity」を使うと、文字や画像までもが透過してしまうので、「background-color:rgba();」を使い、アルファ値を設定することで背景の透明度のみを操作する方法を紹介します。

HTMLで縦に長いテーブルを組んだ時など、カーソルがどこにあるのかよく分からなくなる事がたまにあるので、マウスカーソルがある行の背景色をCSSの設定のみで変更する方法を紹介します。

HTML5のFile APIを使うと、複数ファイルのアップロードが簡単に出来るそうなので、試してみました。
対象のブラウザがモダンブラウザに限定されるようなのですが、妙に簡単に出来たのが印象的。

ちなみに、CakePHP2（2.3.6）でも動きました。

システムを作成する際の確認する人のポリシー(？)でIEのバージョンが8という困ったことになったので、これはいい機会だと捉え、HTML5+CSS3対策の実験台となってもらいましたｗ

決まったサイズのDIV領域に「overflow」を設定し、スクロールバーを表示させて狭い範囲でも有効に利用する方法です。

本当に今更なことなのですが、CSS3で角丸の作り方。Firefox13以降では仕様が変わったために、プレフィックスを省いた書式が必要になっています。そのまとめです。