三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
第21回 ディスプレイのワイド化にページ・デザインをどう対応させるのか
PCのモニター・ディスプレイは，ここ数年で液晶が標準となり，併せてワイド化が進んでいます。ワイド液晶ディスプレイが登場するまでPCの画面構成比は，一部のノートPCなどの小型端末を除いて，「横4対縦3（640*480）」～「横5対縦4（1024*768）」という比率でした。解像度は「XGA（1024*768）」を大多数の環境としていればよく，XGAベースで構成しておけば「SXGA（1280*1024）」でも特に問題はありませんでした。 一時期，「サイトデザインはSVGA（800*600）を意識しろ」と言われていましたが，現実問題としてSVGAはほぼなくなりました。2006年の時点でディスプレイ全体の出荷台数に占める液晶ディスプレイの比率は99.7％（電子情報技術産業協会の市場調査結果）です。SVGAまでしか表示できない液晶ディスプレイはほとんどありませんから，これが現在の「XGAを標準解像度
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
IE6でブロック要素の背景色や枠線が消える現象と対策
このサイトでは、CSS の設定により、記事本文などに背景色をつけて枠線で囲っています。 ところが、IE6 で表示させたときになぜだか枠線の上部が欠けてしまったり、背景色が付かなかったり……という現象が発生し、悩まされていました。 Firefoxだと正常に表示されるし、IE6 でもスクロールして戻ってくるとちゃんと表示されたり……と謎の動作をするのです。 いろいろ試してみたところ、どうやら CSS の position 属性に原因があるように思えて来ました。 どうも、position: relative; に設定された要素の子要素以下で、明示的に幅(width)属性を指定しなかった場合、その要素内部の表示がおかしくなる模様です。
今日のコラム：CSSを使ったデザインはもっと自由であるべき Vol.2: 世界中の１％の人々へ
「CSSを使ったデザインはもっと自由であるべき Vol.2」としたのは、以前、「CSSを使ったデザインはもっと自由であるべき」というタイトルでブログを書いたからだ。 たまたま、「文系のためのXOOPS入門」というサイトを見て、XOOPSらしくないすっきりとしたデザインだなと思っていたら、このサイトにたどりついた。 Free CSS templates http://www.free-css-templates.com/ いきついた先にはこう書いてある。 CSS Templates Given below is an assortment of free CSS templates, downloadable in .Zip format. Regarding information on how to use them, kindly go through the license page
第12回 ページの余白で見た目はずいぶん変わる
前回，ヘッダやフッタ，ナビゲーションなどを付けたページ構成を一通り完成させたわけですが，一度プレーンなHTMLの世界に戻ります。何の装飾もなくシンプルなHTMLを書くと，テキストはブラウザ画面の左一杯から右端一杯までいって折り返すという表示になります（図1）。 画面一杯に文字があるというのは，単位面積あたりの情報量が最も多いということです。何らかの情報を提供するのがHTMLの役割だとすれば，図1の状態はHTMLも目的を達するうえでは非常に効率が良いということになります。だけれども，これでは読みにくくてしかたありません。 まず画面全体に文字がびっしりと並んでいるというのは，読む人に圧迫感を与えます。また画面全体に目を通さなくてはならないのでポイントが散漫になり，注視すべき部分を特定できなくなって集中力を阻害します。学生の頃に誰もが「字ばかりの本を見ると読む気がなくなる」と感じたことがあったと
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)
はてなヘッダ色サンプル
標準 ■ #e7ebff グレー ■ #EDEDED 緑 ■ #CFEFD8 紫 ■ #F0E8F2 茶 ■ #EDE2CE 赤 ■ #FFEAEA セピア ■ #FFF5E0 ピンク ■ #FFEDEA 抹茶 ■ #E9EEDE ライトグレー ■ #EDEDED ライトブルー ■ #EFF9FF オレンジ ■ #FFF6CD ライム ■ #E8FFEC 白 ■ #EEEEEE 黒 ■ #333333
窓の杜 - 【NEWS】スタイルシートのソース表示に特化したFirefox拡張「View formatted source」
スタイルシートのソース表示に特化した「Firefox」拡張機能「View formatted source」v0.9.5.0が、5月2日に公開された。「Firefox」v1.0以降に対応するフリーソフトで、編集部にてWindows XP上の「Firefox」v2.0.0.4で動作確認した。現在、ライブラリサイト“Firefox Add-ons”からダウンロードできる。 「View formatted source」は、Webページで定義されたスタイルシートから、調べたい部分のみを抜粋して表示できる「Firefox」拡張機能。スタイルシートは一般的に、HTMLファイルとは別のCSSファイルに定義されることが多いため、たとえば特定ブロックに対応するスタイル定義を探すのに苦労することがある。 本拡張機能を使用すると、まずWebページ内のテーブルなどのブロック要素がそれぞれ赤色や青色でハイライト表
Blog�|�hamashun.com - Blogにコードを貼り付ける時。
ブログにコードを貼り付ける方法で悩むの巻 pre要素へのスタイル指定 Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 ソースを貼付ける50の方法 pre 要素のスタイル定義とマークアップ Blogにコードを貼り付ける際のアレコレが、あちこちで話題に上っています。 これまでに余り情報を見つけられなかったので、とても参考になりました 折角なので、僕もひとつ書いてみたいと思います。 XHtml こちらは至ってシンプルです。 <pre> <code> </code> </pre> 構造としても<code>を使うのが正しいかな、と思うので、こうしています。 こちらは特に問題無いかと思います。 CSS(Befor) 今回の色んな方のエントリを参考にして、多少変更を加えました。 まずはBeforです。 pre { width:450px; overflow:au
404 Blog Not Found:ソースを貼付ける50の方法
2006年09月06日16:15 カテゴリLightweight Languages ソースを貼付ける50の方法 いえ、50もありません。Paul Simonの歌のもじりです、はい。ちなみに6曲目。いいんです。Paul Simonだって50も紹介してないんですから。 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。<textarea>で囲む 身も蓋もないけど、一番実用性が高いのがこの方法かも知れません。 HTMLの精神からいくととんでもなく堕落した方法ですが、 コピペがしやすい たいていのブラウザーで、いちいちソース中のtagを実体参照化しなくてもちゃんとrenderされる という実においしい特典があります。実は一つ前のentryで
Stylish いいよ - 朝顔日記
2005-12-31 ua tool Firefox のユーザスタイルシートをアレコレする拡張機能、Stylish というのを導入してみました。Firefox には、表示ページの表示の仕方をカスタマイズするための userContent.css と、Firefox の UI をカスタマイズするための userChrome.css が使えるわけですが、どちらもファイルを書き換えると、Firefox を再起動しないと変更が反映しません。しかし、Stylish を導入すると、即座に変更が反映したり、新しいウィンドウを開いたりするだけで変更が反映するようになります。 また、2つのスタイルシートだけで管理するのではなく、もっと細かい単位で管理でき、しかもその有効、無効を手軽に切り替えることが出来ます。以下、スタイルシートの管理画面のスクリーンショットのサムネイルですが、これを見ていただけはイメージが
色の悪いサイト用ユーザスタイルシート - 朝顔日記
2006-08-12 ua firefox web を徘徊していると時折どうにも配色が悪くて読みづらいサイトがあります。たいていはスタイルシートを切ってやると、読めるようになるんですが、そうすると一気にレイアウトが変わったりしてこれまで読んでいた地点を見失ったりするのが、難点なんですね。 そのサイトが巡回先であれば、そのサイトの html やら css やらを解析して、不都合な点を自分好みに変更するユーザスタイルシートを書いていたりしたんですが、どうにも面倒くさい。とりあえず、色だけ読めるようにするユーザスタイルを書いておけばいいのか、と先ほど気がついたのでそんなのを書いてみました。 @namespace url(http://www.w3.org/1999/xhtml); *{ background:#f9f9f9 !important; color:#333 !important; }
背景が黒い「Black Google」は地球を救う - GIGAZINE
ウェブページにはさまざまな色が用いられていますが、なんと表示する色によって消費電力が異なるそうです。たとえばGoogleの背景が黒になっただけで、下がる消費電力はかなりのものだとか。だいたい年間30万ドルほどだそうです。 本当なのでしょうか…。 詳細は以下の通り。 ecoIron - All these whirring boxes.: Black Google Would Save 3,000 Megawatts a Year この記事によると、背景が白いウェブページを表示する際の消費電力が74Wの場合、黒いウェブページであれば59Wで済むそうです。 そしてGoogleが一日2億ページビューであり、一回の検索につき10秒表示されると考えると、背景が白の時と比べて、黒では1日あたり8.3MWh、そして1年あたり3000MWhの消費電力が削減できるそうです。そして1KWhあたりの電力料金を1
ユーザスタイルシートによるカスタマイズ(2) - Stylish - えむもじら
この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。 ユーザスタイルシートを用いてウェブページや Firefox 本体の見栄えを変更することができます。 もくじ ユーザスタイルシートを管理する Stylish ユーザスタイルを管理 ユーザスタイルを作成 ユーザスタイルをインストールする その他の情報 about:config と user.js による Firefox のカスタマイズ（別ページ） ユーザスタイルシートによるカスタマイズ(1)（別ページ） Stylishでユーザスタイルを管理 Stylish という拡張機能を用いるとユーザスタイルを簡単に管理できるようになります。 Stylish をインストールすると、このような管理画面から、ユーザスタイルに名前をつけて個別にオン／オフの切り替え、
Stylish でユーザスタイルシートの切り替えを手軽に, 仕事納め - SmallStyle(2005-12-28)
_ Stylish でユーザスタイルシートの切り替えを手軽に Firefox では userContent.css などにユーザスタイルシートを定義することで，自分好みに Web サイトの表示をいじることができます．例えば，広告ブロックのような定義を記述してみたり，FEEDBRINGER で <pre> タグを折り返したり，@-moz-document を利用すれば，特定のサイトのみ適用するスタイルシートを定義することもできます．難点としては，この userContent.css の修正などを反映させるには，Firefox を一度再起動する必要があります．これが結構不便だったりするのですが，Stylish という拡張を使うと，手軽のユーザスタイルシートの切り替えが可能になります． 例を挙げてみると，SmallStyleのサイドバーの表示をしたくないと思ったら， @-moz-document
ユーザスタイルシートによるカスタマイズ(1) - えむもじら
この記事は、Software Design 2007年1月号に掲載された拙著「Firefox 2 カスタマイズガイド」の一部を加筆修正したものです。 ユーザスタイルシート（userContents.css と userChrome.css）を用いてウェブページや Firefox 本体の見た目を変更することができます。 また、Stylish という拡張機能を用いると、ユーザスタイルに名前をつけて個別にオン／オフの切り替え、編集など、ユーザスタイルを簡単に管理できるようになります。 もくじ Firefox 2 入門 総合目次 ユーザスタイルシートとは Firefox の見た目を変更する メニューの削除とフォント設定 ストップ／リロードボタンを統合 サイドバーを右に配置する アクティブなタブを目立たせる ウェブページの見た目を変更する めざわりなウェブページの表示を無効に Gmail の本文を等
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ADP: floatレイアウトでつまづかないためのTips
コードを見せるテクニック
IDEA * IDEA
