inline-blockを並べた場合に発生する「隙間」を消去するCSS
IEを含めた最近のブラウザでは珍しくなくなったinline-block。 このinline-blockを利用する場合に発生する「隙間」を改善する方法です。 原因は改行コード 下記のようなHTMLを用意しました。 リストタグを使ったインラインブロックを実現しようとしています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
画面下部にフッター表示-CSS TIPS
動的サイトで画面の下部にフッターを表示する事は非常に困難です。 さまざまなパターンを想定してフッターを設定することになります。 コンテンツ領域がブラウザの高さより高い場合 この場合、通常の方法で問題なく表示できます。 サンプル（コンテンツのheight:1000px） ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します サンプル（コンテンツのheight:100px） コンテンツ領域がブラウザの高さより低い場合 この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。 サンプル ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示の際の下部に表示されてしまし、ス
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 ※10秒後にBIGLOBEのおすすめページに遷移します
tableを使わずdivで縦位置を指定 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
tableのセルでは、vertical-alignを指定することで、縦方向の中心や下揃えで文字列や画像を配置することができますが、divタグの中では通常vertical-alignは適用されません。 画面中央に文字列を配置したい場合など、divでvertical-alignを指定する方法を紹介します。 サンプル tableタグを使用せずに、中央・下部に文字列を配置したサンプルです。 中央に配置 コード（中央に配置） (X)HTML <div class="outer"> <div class="vertical_middle"> <p class="inner">テキスト</p> </div> </div> CSS div.outer { display: table; /* ① */ height: 100px; width: 100%; /* ② */ background: #E3F
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ！動作確認したんですか！」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
Best Practices for Speeding Up Your Web Site - Yahoo Developer Network
Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.res-system.com/weblog/item/567
.NET Framework 4.6 インストール環境において正常に印刷できない場合があります - MSDN Blogs