何かと便利な定義リスト。 用語集や、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; } こんな感じです。 そして、実際の画面では↓こんな感じで表示されると思います。 もっとテーブ
TypeKey認証やコメント投稿の後で文字化けが発生するという質問を最近何件か頂いています。TypeKeyの文字化けについてはHTTPリダイレクトを伴っており、ページ直前のHTTPレスポンスで返却されたcharsetを見てしまうのが文字化けの要因と思われます(発生するサイトとしないサイトの違いは不明です)。下記のサイトに解説があります。 エンタープライズ:Linux Tips:リダイレクト先で文字化けしてしまう ただしコメント投稿後の文字化けは原因不明(リダイレクトではないという認識)です。 上記のサイトにも少し書かれていますが、リダイレクトによる文字化け解消について .htaccess を利用する方法がありましたのでご紹介します。 1..htaccess ファイル作成 まず .htaccess というファイルをテキストエディタ等で新たに作成し(既に存在する場合はその中)、そこに下記のいず
CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。 ブラウザによって異なる、フォントサイズの境界 例えば「font-size:70%」というふうに指定して、Internet Explorer 6とFirefox2.0で見てみたページが以下のようなものです。 ※ページはxmlタグつきのXHTML1.0 Strictで作成、つまりInternet Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。 あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。 このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微
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
化学式(組成式)や数学などの指数には、subやsupと言った要素を使えばいいわけですが、 これらは推奨されてのでスタイルシートで検討する事を考えて見ました。 ちなみに雑学ですが、下付文字は英語では「subscript」、上付文字は「superscript」と言います。 これらのタグはこれらの頭文字3文字を取っている訳ですね。 また、化学式(組成式)においてイオン価数と添え字が共存するような場合には、 スタイルシートならではのテクニックを使って表現する事を考えてみましょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>テキストの装飾</t
こんちわ。松田です。 最近作っているシステムで、以下のようなお題が出されました。 問:セレクトボックスで選択した要素を↑↓ボタンで並び替えよ。ただし、CTRL選択による複数選択にも対応すること。(10点) JavaScriptのライブラリは腐るほど出回っているのでとりあえずググろうかと思いましたが、そもそもなんてキーワードで検索したらいいのか分かりません。 「セレクトボックス 並び替え」「selectbox 要素 移動」「selectbox move」・・・ うーん。。。 日本語で検索して引っかからないと、英語ページに救いを求め、だんだんとシンプルな英単語でググっていくことになりますが、今回はなかなかいい結果が見つかりません。 そんなわけでこれは自分で実装してみることにしました。 まずは↓ボタンから作るか。ということで、クリックしたら呼び出される関数をとりあえず定義。 そして、<optio
世間では史上空前の参考文献記述ブームだそうですが、そんなことは気にせずにとりあえずhoshikuzuさんの出題された『詰めHTML』で遊んでみました。 ちょっと思い出したのでクイズを書いてみます。 以下の条件で、IEでは、imgie.gif、 Firefoxでは、imgfx.gif、その他多くののブラウザでは、imgother.gif ノミを表示するHTMLを作ってください。 JavaScriptなどのスクリプトは使わない CSSを通じてハックしない HTMLの書き方のみで勝負するが、validでなくても良い 書いてみたのはこれ。 http://openmya.hacker.jp/hasegawa/test/hoshikuzu20070925.html IEだとモヒカンの人が、Firefoxだと今夜わかる人が、それ以外のブラウザだと危険文字メタ文字の中の人が表示されると思います。「それ以外
ちょっと思い出したのでクイズを書いてみます。 以下の条件で、IEでは、imgie.gif、 Firefoxでは、imgfx.gif、その他多くののブラウザでは、imgother.gif ノミを表示するHTMLを作ってください。 JavaScriptなどのスクリプトは使わない CSSを通じてハックしない HTMLの書き方のみで勝負するが、validでなくても良い ※最新のブラウザで実現できなかったらすみません。なんだお、とか叱らないでくださいませ。 このテクで、ブラウザごとにJSファイルや外部スタイルシートとかを分別できないのかなぁと昔、妄想したことがあります。 hasegawayosukeさんへ http://d.hatena.ne.jp/hasegawayosuke/20070927/p1 なんと申しますか、すごいものを拝見させて頂きました。ある意味勉強になります。ありがとうございます。
CSSでは数多くのプロパティが提供されています。それらはいくつかのグループにわけることができ、グループの特徴を捉えるとスタイルシートの使い方が理解しやすくなります。現時点では全てのプロパティが実用化されているわけではないので、使い物になりそうなものをいくつか選んで、グループごとに紹介します。 目次: フォントとテキスト 色と背景効果 ボックスモデル 表示位置など 単位について 取り上げるプロパティ: font-size, font-style, font-weight, text-decoration, line-height, letter-spacing, text-align, text-indent, color, background-color, background-image, background-repeat, padding, margin, border, bord
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く