印刷用CSSの書き方（基本編）：ADP
MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
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でフォントサイズを変更すると 隙間
<DIV>をヨコに段組しよう -2step脱テーブルスタイルシートCSSレイアウト講座-
このページでは、<ＤＩＶ>を横に段組していく方法を紹介します。 <ＤＩＶ>の特徴は、前のページで説明したので、 まだ見てない方は、そちらを見てからでお願いします。 さて、前のページで、<ＤＩＶ>はちゃんとした設定をしないと、 横に並べることができない、ということを紹介しました。 でも、ちゃんとした設定といっても、たった1つの属性を、書き込むだけなので、 かんたんなんです。 ここでは、スタイルシートの定義方法のなかで、 もっとも一般的な、「ＣＬＡＳＳセレクタ」をつかって、段組していきます。 では、とりあえず、２つの<DIV>を、横に並べてみましょう。 なぜこのように、横に段組できるかというと、 「box1」と「box2」で定義している「 float属性 」のおかげです。 この、 float属性 は、 要素の配置と回り込みを指定するための属性 ですので、 この場合、「
JavaScript/HTML5, iPhone/Android, ハイビジョン映像, 自動化関連：[OpenSpace]
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス／アプリケーション...のページを参照してください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]見やすい棒グラフにするスタイルシート -Pure Css Data Chart
CSS・スタイルシートテンプレート - ネットマニア