「HTML,CSS」 一覧

HTML,CSS

ログイン画面デザイン100選

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

Google Chrome

【Google Chrome】WEB製作者に捧げる、スマホサイトのHTMLソースを確認する方法

PC用のブラウザで表示できないスマホ用サイトのHTMLソースが気になることはないでしょうか? そういう場合に、chromeアプリでソースを確認する方法を紹介します。

FireMobileSimulatorなどでソースを表示できるサイトは良いのですが、当然、効かないサイトも有ります。
そういう場合にソースを確認する方法は無いものかと調べましたら、なんとも簡単な方法で実現可能なことが判明したのでご紹介。

HTML,CSS

【CSS】文字や画像は透過させず、背景のみ透明度を操作する方法

2013/10/11   -HTML,CSS
 , , ,

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

HTML,CSS

【CSS】CSSのみでマウスオーバーしたテーブル行の背景色を変更する方法

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

HTML5のFile APIを使って、複数(の画像)ファイルをサーバにアップロードする方法。

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

ちなみに、CakePHP2(2.3.6)でも動きました。

Eyecatch html css

HTML5+CSS3で構築する際のIE9以下への対策

2013/07/17   -HTML,CSS
 , , , ,

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

【CSS】CSSの「overflow:scroll」でボックス領域にスクロールバーを表示させる方法。

2013/05/29   -HTML,CSS
 , ,

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

HTML,CSS

【CSS】角丸を表示する時のベンダープレフィックス -moz-border-radius が Firefox で効かなくなっていた件

2013/04/18   -HTML,CSS
 , ,

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

Eyecatch html css

【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3では数行のコードで実現可能。忘備録としてポストしておきます。

HTML,CSS

【CSS】blockquoteタグのデザインを見栄えよくしてみる

2013/03/27   -HTML,CSS
 , ,

ポスト内容に参照元のテキストを引用する場合に使う「blockquote」タグですが、デフォルトの見た目がイマイチだったので見やすさ、分かりやすさ、自己満足度を高めるためにデザインを編集してみました。

Eyecatch html css

tableタグのtd中でURLなどアルファベット文字列を改行させたい場合のCSS記述法

2013/01/02   -HTML,CSS
 , ,

tebleのtdタグの中でURLなど、アルファベットや記号が連続している場合に自動改行しないことがしばしばあります。このような場合に自動改行させるCSSがこちら。

HTML,CSS

【CSS】改行が入っても文字の頭をそろえる(2行目以降を1文字下げる)方法

箇条書きや注釈に「・」や「※」をよく使うと思いますが、改行すると記号が回りこんで埋もれてしまいがちです。
今回は記号ではありませんが、利用規約をHTML化する作業をしていた時に「(1)」などがやはり回りこんでいたのが非常に気になったので、それを回避、揃える方法を備忘録としてポストします。

HTML,CSS

【CSS】CSSでWEBサイトのフォントを「メイリオ」にする方法

2012/08/21   -HTML,CSS
 , ,

個人的に「メイリオ」フォントが好きです。WEBサイトを作る時は表示にメイリオを使うようにするので、そのタグを忘備録としてポストします。

no image

スマートフォン向けにHTML5で作ってみた第2弾

他部署に依頼していたデータが来ねえ! ということで、またも時間が開いたので、
こないだのスマートフォン向けのページをちょっとだけ変えて、割引計算するページを作ってみた。

no image

スマートフォン向けにHTML5で作ってみた

急に一日、仕事に暇ができたので、PHPでスマートフォン向けのページをひとつ作ってみました。
まさに暇つぶし。