無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
HTMLを組んだ後のCSSの作成に役立つあれ
What is it? Ok, here's the deal. Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame. And yup, it's free. More information This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line.
XHTML/CSS Markup Generator
About Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It's main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling. Settings Indent: tabs spaces Extra code: yes (before and after) Generate
Css 4 Free
WEBサイトを作っていると、「文字の色を変えたい」、「余白を大きくしたい」、「背景をグラデーションにしたい」ということがあります。 文字色や余白、背景を全て画像で用意するということもできますが、画像ばかりを用意するのも手間ですし、ファイルサイズが大きくなるのも問題です。 そこで、WEBサイトをデザインするときCSSを使います。簡単にCSSのことを説明するな、HTMLの見た目を作ることができるプログラミング言語です。 みなさんもCSS、CSS3といった言葉をネットで見たり聞いたりしたことがあると思います。CSSを使うことで、HTMLを色々と変更することができるので、プログを使っていた人は、簡単なCSSの構文を知っている人もいるかもしれません。 本格的にWEBサイトをデザインしようと思ったら、CSSについてより詳しく知る必要が出てきます。 また、CSS4という新しいCSSの仕様もあります。CS
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
Safari 3.1でWebフォントを利用する--SafariのCSS対応 - builder by ZDNet Japan
現在、Webページで利用できるフォントはユーザーの環境にインストールされたものだけで、文字の表現の幅は非常に限られている。しかし、Webフォントの機能を利用できるようになれば、制作者がサーバー上に用意したフォントでWebページを表示できるようになる。 3月18日から提供されているSafari 3.1では、CSS 3やHTML 5で提案されている機能への対応がさらに進んだ。そこで、新しく対応したスタイルシートの機能の中から、CSS 3の「Webフォント」について2回に分けて紹介していきたい。 サーバー上に用意したフォントでWebページを表示する ユーザーの環境にないフォントでWebページを表示するため、まずは、利用したいフォントをサーバー上に用意する。OpenTypeやTrueType形式のフォントファイルを利用することが可能だ。 ここでは、exljbrisのFontin Sansというフォ
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でフォントサイズを変更すると 隙間
MOONGIFT: � CSS 画像でグラデーション「CSS Gradient Text Effect」:オープンソースを毎日紹介
ソフトウェアと言えるかどうか不明だが、とても格好いいのでご紹介。 最近のサイトの特徴として、グラデーションを使ったクールな印象があげられる。ヘッダーなどのインパクトを与える文字にグラデーションを使ったサイトも良く見かけるだろう。 文字にグラデーションを適用するには画像を使うのが一番手軽だが、文字列を選択してコピーできないという問題があった。その問題を解消するのがこのソフトウェアだ。 今回紹介するフリーウェアはCSS Gradient Text Effect、CSSによるテキストグラデーションだ。CSSなのでソースは見られるが、ライセンスは明記されていないのでご注意いただきたい。 公式サイトにアクセスすれば、何を言わんかというのはすぐに理解してもらえると思う。テキストにグラデーションがかかっている。これは文字列に対して、半透明のPNG画像を重ねることで実現している。 Firefox、Oper
はてなブログ | 無料ブログを作成しよう
ネイルで使う材料で、DIY時の木割れやネジ跡を派手にしたらかわいい OSB合板でちょっとしたボックスをつくりました。 ビス止め下手すぎて木を割ったり穴あけすぎたりした場所に、好きな派手色の樹脂を詰めてパテ代わりにしてみました。 ちょっと某HAYっぽみ出て可愛かったので、自分用にメモです。 手順 塗装 派手色グミジェルで失敗部分…
XHTML-CSS Validator
Just type or paste an URL in the form above, and click on "check it" to see the magic. If you want to fine tune your validation, click on the "advanced" link. That's it! An Idea: The Social Media Algebra I used to be very good at maths. I really was. Then I started studying computer science stuff (which is normal for a computer scientist) and as time goes by, I forgot many of the coolest stuff I l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker