特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold Archive
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. どうもこんにちは。Toshikuraです。今回のTipsは【CSS 画像やテキスト要素を縦横中央配置する6つの方法】です。CSSの基礎的な記事ですが縦横中央配置には色々な方法がありますのでメモしておきます。うまく使い分けると便利な場面もあったりしますので備忘としてお役に立つかもしれません。 1. display:tableでの実装 CSSのdisplayプロパティによって要素をテーブル化し、vertical-alignで縦方向へ中央配置する方法でレスポンシブ化も容易です。もっとも安定した方法だと思いますがIE7では動作しません。 HTML <div class="table"> <p>p tag p tag p tag p ta
CSSセレクタの名前を付けるときに考えていること - morishitter blog
idを使うときも同じだけど、話をわかりやすくするためにclassに統一するということで。 個人的にはセレクタにidは使わない派です。 先日、@cssradarさんが「自分の仕事はclass名を決めた時点で8割終了している」みたいなことを言ってて、僕も概ね同意している。 それほどにCSSでは命名が大切だと思う。 そこで僕が普段どう考えてCSSセレクタに名前をつけ、ルールセットを定義しているのか書いてみた。 1. class名は意味を表すようにする（見た目の情報をのせない） 例えば、以下のようなもので .red { color: #f52; } .rounded { border-radius: .25rem; } .left-arrow { ... } 赤色だとか角丸だとか、見た目を表したclass名は付けないようにしている。 というのも、class名はHTMLのclass属性に書くもので、
text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 - ディレイマニア
長らくtext-indent:-9999pxでテキスト飛ばして画像に置換する方法を使い続けてきました。 しかしこの手法を使うのはあまりよろしくないと言われています。 というわけで、画像置換のときに使える代替案をご紹介します。
画像をキラーン！と光らせるCSSテクニック
twitter facebook hatena google pocket 画像をマウスオーバーさせた時にキラーンとさせたいなんてことたまにありますよね。 今回は透過pngとCSSのtransitionを利用して実現したいと思います。 via：Create a Sheen Logo Effect with CSS sponsors #1：透過画像を作成 白でフェードをかけたPNGをシャキーン！させたい画像サイズにあわせて用意します。 #2：HTML・CSSを記述 下記のようにありそうな感じのHTMLでOKです。 <a href="/" class="shakeeen"><span></span></a> これに対し、CSSを以下のように記述します。 a.shakeeen { display: block; background: url("シャキーン！させたい画像") 0 0 no-rep
よくある:first-child擬似クラスの間違い | CodePlus
ul li:first-childとかでよく使用すると思われる、first-child擬似クラスですが、親要素の中の特定の最初の要素にかかるわけではありません。あくまで子要素の最初の要素です。dlを例に見て行きましょう。 first-childが効くのは最初の子要素 HTML <dl> <dt>タイトル</dd> <dd>説明</dd> </dl> CSS dl dd:first-child { font-weight:bold; } 上記のような例では、first-childは効きません。親であるdlの中のfirst-childはdtだからです。ddは最初の子要素ではないので、対象から外れます。 このようなパターンでCSSのみで完結させたいのであれば、隣接セレクタやCSS3のnth-childあたりを使って対応しましょう。
clearfix のアレンジ版作ってみました - understandard
Firefox 3.6 が clearfix の影響で margin-bottom が margin-top にもかかるという話を聞いて、普段使ってた clearfix で試してみたところ、同様の現象が出たので、対応版を作ってみました。 追記（2012年2月7日）: 公開当初のコードでは問題があったので、最後に追記しました。 ネタ元の記事は以下。 firefoxでmargin-bottomがmargin-top | 乱雑モックアップ この記事で紹介されていた clearfix は以下ようなもの。 僕はこの指定から height:0; を抜いたものを使っていました。 .clearfix:after{ content: ''; display: block; clear: both; height: 0; } .clearfix{ /zoom: 1; } この記事の公開時点（2012年2月1日
hasLayout メモ - understandard
IE7に付いたズーム機能を使って拡大・縮小したときに body に指定した背景画像が拡大・縮小されず、理由が分からず困ったことがありました。 「原因は haslayout の値が false になっているから」 隣にいた同僚にそう教えてもらってなんとかズーム機能に対応はできましたが、今後同様の事例が出た時に困らないようにメモ。 で hasLayout って何？ hasLayout は IE 独自のプロパティで、各要素がレイアウト情報を持っているかどうかを示すもののようです。 上に書いた背景画像の拡大・縮小時のバグは hasLayout プロパティの値が false になっている場合に起こるそうです。 その他のバグの情報は Microsoft の Internet Explorer 7におけるズーム機能の問題 ( http://support.microsoft.com/kb/933053/
CSS Loupe（おまけ）とCSSプログラミングの制作について – No.1026
CSS Programming Advent Calendar 2012の19日目、一週間ぶりです。元バスケ部の友人に「そんなに綺麗なフォームでそんなに入らない意味がわからない」といわれたことがあるくらい美しいフォームに定評のある1026です。CSSフリースローお楽しみ頂けたでしょうか？ さて、今日は元々宣言していたパズルがポシャったのでかるいやつを、ということでCSS Loupeを作りました。JSでたまにあるこういうもののPure CSS版です。 クリスマスっぽい画像を探したら、全体的に赤でちょっと拡大がわかりにくくなってしまったでしょうか… フィルターかけるボタンとかつけようかとも思ったのですが、付けたところでルーペとしてどうにかなるわけではない（という言い訳で若干面倒くさい）ので辞めました。 適当な解説 画像の上にdivを敷き詰めて、hoverするdivに合わせてルーペが移動。拡大画
CSS FreeThrow – a game, noJS, only CSS and HTML – No.1026
CSS Programming Advent Calendar 2012 の12日目です。 自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です（今自分で考えました）。 最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。 適当な解説 メーターとボタンの連動 CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput（ここでは其れに対応するlabel）を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重
Basic Process to Apply CSS to Your Website
2014年8月17日 CSS, Webサイト制作 CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように変数「@xxx」を使って値を定義することができます。 @radius: 10px; @bg-color: #fff; @padding: 10px; .foo { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .bar { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-ra
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSデザイン - Naifix
HugeDomains.com
CSS Layout Properties for Noobies
ベーシックで使いやすそうなレスポンシブWebデザイン向けCSSフレームワーク・CSSHórus
3streamer.net