[CSS]初心者にも分かりやすいスタイルシートのチュートリアル
スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo 下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。 Step 1. Wireframe – HTML ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="post"> <div class="postheader"> <!--ヘッダ--> </div> <!--コンテンツ--> </div> </textarea>
モビットってどんな返済方法があるの？ | 現金が必要な時に一番便利なネットキャッシングで即日借入【ネポ】
カードローンって最近よく耳にするようになったのではないでしょうか。カードローンというのは消費者金融や銀行に申し込んでカードを発行してもらい、そのカードを使って提携のATMなどからお金を借りるというものです。金額は人によって決まっていますが、特に目的について制限されるわけではなく、1万円からなど比較的少額からの借り入れも出来るという便利な個人ローンなんです。 でもカードローンって本当にたくさん種類があります。各銀行でもそれぞれカードローンがありますし、消費者金融だってそれぞれの商品としてカードローンを取り扱っています。モビットもカードローンの1つですね。モビットは三井住友銀行系の会社ですので、三井住友銀行のATMからの借り入れ・返済であれば手数料無料になるんですよ。 実際お金を借りたら返さなければいけないのですが、モビットはどのような返済方法があるのでしょうか。返済方法は3つ！口座引き落とし
コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
チェックボックス、ラジオボックスをオシャレに表示するJS:phpspot開発日誌
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists チェックボックス、ラジオボックスをオシャレに表示するJS。 次のようなチェックボックス、ラジオボックスにスタイルできるJSです。 <input type="checkbox" class="styled" /> のように、class="styled" で自動スタイルされます。 CSSを変更でデザイン変更可能です。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
ke-tai.org > Blog Archive > ケータイでの画像回り込みについてまとめてみました
ケータイでの画像回り込みについてまとめてみました Tweet 2008/6/11 水曜日 matsui Posted in デザイン | 7 Comments » 本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。 まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あ
そろそろブラウザの実装レベルに応じたスタイリング分けをしよう - Liner Note
そろそろブラウザの実装レベルに応じたスタイリング分けをしよう 書いた人： hash 投稿日： 2008年06月08日（最終更新：5年6ヶ月と28日前） 読者の皆さんの反応 1 被ブックマーク数： 70 要約：シンプルなマークアップを元に各ブラウザの実装レベルに応じて、様々なスタイリングをしていく方が楽だし、いろんな閲覧者が幸せになれるんじゃないかなと思った次第 全てのブラウザで同じに見える必要はないというのは前から何度か言われていることですが、もう少し具体的な文脈に落として考えてみようかな。 例えば、引用文を引用文ぽくスタイリングしたいとする、こんな感じに。 で、とりあえずGoogle先生で調べてから頭を回してみるわけですが、 Natalie Downe » Blog Archive » Inline image quotes CSSで引用をデザインする。 – DesignWalker 第
CSS の「値」とは何か - IT戦記
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
404 Blog Not Found:CSS - 縦方向にセンタリングする
2008年03月01日14:15 カテゴリTips CSS - 縦方向にセンタリングする 以下で紹介されていた、縦方向にセンタリング表示するためのCSSです。 Vdot Media - Vertically center content with CSS 縦方向にセンタリングするという需要は私には結構あります。たとえばスライドを作る時とか。 結論だけいきなりまとめてしまうと、以下のようになります。 http://www.dan.co.jp/~dankogai/blog/vcenter.html ここではあえてpaddingをつけてそれぞれのdivタグの位置関係を明示するようにしました。 これで、セルが一つだけ入ったtableを使う必要がなくなりました。 が、はっきりいってめんどいなあ。divタグを三重に使うというのがねえ。原理も、CSSでtableを再現しているに過ぎないし。IE用のテクニ
3周年記念セルフエントリーまとめ
Blog 開設 3周年を記念して過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。 早いもので、今月でこの Blog も開設から丸 3年が経過 （2005年2月スタート） しました。 そこで今回は、過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。たまには過去のエントリーを見直してみるのも面白いかもしれません。 ちなみに、このエントリーで 446件目のエントリーでした。3年間で 446件っていうのは多くはないと思いますが、平均すると年間で約 148件、大体 2、3日に 1エントリーくらいのペースで書いてることになりますね。チリも積もれば山となる、継続することは大切です。 (X)HTML、CSS 関連 まずは (X)HTML とか CSS 関連のエントリー。このサイトでメインの話題…… と思われている分野です
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) - 徒書
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) これまではさほど関心を持っていなかった角丸なのですが、最近のはてなブックマークで角丸を扱った記事が多く取り上げられてたり、CSS Nite Vol.6(見に行ってました)でも角丸が取り上げられたりしていたので、今更ながらにわかに興味が出てきたのでした。 たぶん、自分が角丸へ関心を持つのを避けていたのは、作る側として「実現するのがややこしいから」ということだったと思うのですが、見る側からしてみると、角丸のもつ見た目の印象はかなり効果的だよなあ、と考えるようになってきました。最近見たものだと、Catalystでサンプルアプリケーションを作った時のデフォルトページが、-moz-border-radiusをつかったスタイルで、衝撃的でした。 さて角丸をどう実現するか
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
RubyのHTML HelpのCSS - 2nd life (移転しました)
http://elbereth-hp.hp.infoseek.co.jp/ruby.html で配布しているRubyのHTML HelpのCSSを変更して再コンパイルしてみた。デフォルトのデザイン*1が好みじゃなくて、以前も変更して使っていたんだけど、再配布しても問題ないCSSにして配布る！ http://rails2u.com/tmp/ruby_htmlhelp/ruby_htmlhelp.png http://rails2u.com/tmp/ruby_htmlhelp/ruby-refm-rdp-1.8.1-ja-htmlhelp_css.zip http://rails2u.com/tmp/ruby_htmlhelp/ruby-refm-rdp-1.9.0-ja-htmlhelp_css.zip ( 最新版に更新 ) フォントサイズ小さめ、青メインの配色で。見た目重要！ RDE のプ
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
![[CSS]気をつけたいIE 7のバグ -CSS-Discuss](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
[CSS]チェックしておきたい50のCSSのテクニック | コリス
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス
CSS Spriteを活用しよう - DesignWalker
フォームのデザインいろいろ - DesignWalker