border-spacing：CSSプロパティの使い方とサンプルコード集 - ウェブランサー
border-spacingプロパティの説明 border-spacingは、表（テーブル）に含まれるセル同士の間隔を指定します。この値は、border-collapseの値がseparateの場合にのみ効果があります。 表のセルは通常、密着した状態で格子状に配置されます。その状態を制御するのがborder-collapseプロパティで、その隙間をどれぐらい空けるのかを示すのがborder-spacingプロパティです。 ここで指定した値は、表の外周との距離にも影響します。表そのものにborderやbackgroundが指定されていれば、その境界の内側に間隔を空けてセルが並びますが、しかし表に境界線や背景色が指定されていないと、見えない境界に対して隙間を空けるので気をつけて下さい。 border-spacingに指定できる値 <length> CSSで使用できる長さを表すデータ型の値です。
CSS - tableのwidthはどう解釈されるか | Try | d-spica
tableにCSSでwidthを指定した場合，どう解釈されるかのテストです。DOCTYPEはXHTML 1.0 Strict，XML宣言は省略しています。 Tried at 2007-06-06 まず，tableのマークアップは次の通り <table> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <tr> <th scope="col">項目1</th> <th scope="col">項目2</th> <th scope="col">項目3</th> <th scope="col">項目4</th> <th scope="col">項目5</th> </tr> <tr> <td>data11</td> <td>data21
フォントサイズを指定する - スタイルシート
フォントサイズを、BODYタグやTABLEタグなどに指定します。 ほぼ全てのタグに適用することが可能です。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { font-size: medium } /* 標準 */ .xs { font-size: xx-small } /* 小2 */ .xm { font-size: x-
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa
CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可 [ホームページ作成] All About
CSSでの左寄せ・中央寄せ・右寄せ表示方法 日本語や英語など「文字を左から右へ向かって記述する言語」で書かれたHTMLでは、文字寄せ方向が指定されていないなら、文章は左寄せで表示されます。しかし、タイトルや見出しなどを中央寄せ(センタリング)して掲載したい場合はよくありますし、日付や注釈などを右寄せにして掲載したい場合もよくあるでしょう。 ウェブページに掲載した文章や画像の文字寄せ方向を指定して、左寄せ・中央寄せ・右寄せで表示する方法は簡単です。CSSのtext-alignプロパティを使って、寄せたい方向を指定するだけですから。しかし、単に1行の文章を左寄せや右寄せで表示するのではなく、同じ行内に「左寄せの文章」と「右寄せの文章」を同時に書きたい場合もあるでしょう。例えば下図のようにです。 そこで今回は、HTMLで記述した文章にCSSを適用して、特定の範囲を左寄せ・中央寄せ・右寄せの3通り
![CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/90bd1c1df5e3bc375b9a21a7908a0861804cfd72/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F7%2F8%2F1552874382%2Ftopimg_original.jpeg)
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ！動作確認したんですか！」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
昔の記事には注意を出すことにした - by edvakf in hatena
前にどっかで「ブログの賞味期限」というのがあったらいいなー、という記事があって、激しく同意した記憶がある。 ブログの記事を書くときに、この記事の賞味期限は何ヶ月ですよ、とか設定できて、それを過ぎると自動的に注意が表示されるようになるというアイデア。 このブログは2年も続けることができ、時には昔の記事が今でもリンクされたりすることがある。そういう時に自分の記事を見返して、「あー、今ではちょっと違うのになあ」と思うけど、とき既に遅し。リンクした人は間違った情報を信じてしまっているかもしれない。 じゃあ古い記事を訂正すればいいじゃないかということなんだけど、ブログを長く続ければ続けるほど過去記事は増え、いつかは全部の記事をメンテするなんて不可能になっていく。 で、まあそういう記事を運悪く検索で発見しちゃった人なんかは、本当は日付けを見て察してほしいんだけど、やっぱりこっちから注意を促すべきだと思
[CSS]pre要素で実装されたコードを美しくデザインするスタイルシート
Styling Code Snippets with CSS demo デモでは、ノートスタイルが二種類と視認性に優れたブラックタイプが一種類紹介されています。 三種類ともHTMLはシンプルで、クラスを記述するだけでデザインを適応できます。 グリーンのノート <textarea name="code" class="css" cols="60" rows="5"> pre { font-size: 12px; padding: 0; margin: 0; background: #f0f0f0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; line-height: 20px; background: url(pre_code_bg.gif) repeat-y left top; width: 600px; over
一発で表示崩れの原因が分かるCSSの小技！： OLの本音は給湯室にて･･･
OL7人とその課長の実況型ブログです。OL達のホンネや女子に囲まれた課長の苦悩と悦び(?)を等身大でお送りします。娘だらけのお父さん！女同士の人間関係に悩む方も必見です!? ナッチーはたまにcssやhtmlのコーディングなどもします。 でも、たまになのでショボイです・・・ で、書いてるうちにいきなり表示が崩れたりします！ でも前のバージョンとソースの違いがわからない・・・・ そんな時のみんなに笑われる必殺hackがあります！ その名も！ Photosopで差の絶対値攻撃!!!! 以下手順になります～ 全然違いのわからない AとBのソースが仮にあったとします。 2つをスクリーンショットして Photoshopのレイヤーを分けてそれぞれにペースト で。レイヤー操作「差の絶対値」 すると・・・・・ 見てー！犯人はココダーーー 差異があるところは黒くならないんです。 本来は画像修正時の差分チェック
IE6で閲覧すると。
hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
dlのdt dd を横並びに
何かと便利な定義リスト。 用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。 しかし、中々思うように横並びが出来ないのが定義リスト。 今回はそんな厄介な定義リストのサンプルを作ってみました。 まずはスタイルシート。 dl { border:1px solid #999; width:390px; } dt { float:left; width:100px; padding:5px 0 5px 10px; clear:both; font-weight:bold; } dd { width:260px; margin-left:100px; padding:5px 5px 5px 10px; border-left:1px solid #999; } こんな感じです。 そして、実際の画面では↓こんな感じで表示されると思います。 もっとテーブ
ホームページで使用できる色の一覧
名前の付いている色の一覧 上段は色値、下段は色名です、コピィ(Ctrl+C)し、ホームページの色指定にご使用下さい。
自分デファクトなCSS定義、mydesign.cssを考えてみる(2) - Cyokodog :: Diary
mydesign.cssの適用 サンプルのhtmlに、mydesign.cssの構成ファイルである reset.css(YUI)、myreset.css、myskin_default.cssを順番に適用してみます。 サンプルhtml <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="mydesign.css" /> </head> <body> <h1><a href="#">mydesign.css</a
border-collapse－スタイルシートリファレンス
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。 ■値 スタイルシート部分は外部ファイル（sample.css）に記述。 table.sample1 {border: solid 1px #000000; border-collapse: collapse;} table.sample2 {border: solid 1px #000000; border-collapse: separate;} td.sample {border: solid 1px #ff0000} HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table cl
カラーチャート - CSS2 リファレンス
【注】：この文書内のカラーチャートを閲覧するためには，CSSを真面に実装していてるウェブブラウザが必要です。 Black=#000000 Silver=#C0C0C0 Gray=#808080 White=#FFFFFF Maroon=#800000 Red=#FF0000 Purple=#800080 Fuchsia=#FF00FF Green=#008000 Lime=#00FF00 Olive=#808000 Yellow=#FFFF00 Navy=#000080 Blue=#0000FF Teal=#008080 Aqua=#00FFFF ウェブセーフカラー（安全色）216色 WindowsやMacintoshなどのプラットフォームでそれぞれ設定されている256色のシステムカラーパレットのうち，共通している216色です。この色を使うと異なるプラットフォームでも色化けを生じることなく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ホームページ作成ガイド/細い枠線を指定する（+CSS） - TAG index Webサイト)
DHTMLリファレンス
