[B! css] t-abeのブックマーク

リスト要素でカッコ付き数字や丸囲み数字を使うには「text-indent」をマイナスにする | ネットに書かれていないことを綴る

「富士通館林システムセンターの電源装置故障はUPSの切替動作障害」で引用したソニー銀行リリース文中で、リスト要素がカッコ付き数字になっている。これはどうやって表現しているのか。ソースとスタイルシートを見ると、カッコ付き数字はそのまま本文に書き、text-indentプロパティをマイナスにして、その分だけpadding-leftプロパティをプラスにしていた。なるほど、これでマーカーなしにすれば、カッコ付き数字や丸囲み数字のリストが出来る。 OKWaveでは、リスト項目ごとに<div>タグでスタイルを適用する方法をベストアンサーにしているが、リストなのだから<ul>タグ、<li>タグで表現するほうがよい。 OKWave「リストの記号を括弧付きの文字にしたい」ということで、スマートな記述がこれ。マーカーなしにすると、その分だけ全体がインデントされたように見えるので、左マージンをマーカーの幅だけ

t-abe 2015/12/21

リスト要素 ol ul で丸付き数字やカッコつき数字

HTML
CSS

リンク

[CSS]ol のリストで①や②などの丸数字を表示させる方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。 ol li の list-style は none で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。 ol のリストで「丸数字」を表示させるサンプル li タグ内に ① ②…と丸数字も合わせて書いていき、丸数字は <span> タグで囲ってあげます。 <style> ol { position: relative; margin:0; padding:0 } ol li { list-style: none; list-style-position:outside; margin:0; padding-left:1.25em } ol li span { position: absolute; left:0; margin:0 } /*IE6*/ *html ol li span

t-abe 2015/12/21

olで丸付き数字

HTML
CSS

リンク

ChromeはCSSで設定しないと禁則処理してくれない : 元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

行末の「。」が先頭にきてしまうことがあるのはChromeだけだったのかな？で、さすがに気になったので調べてみると、CSS表記で解決できることがわかった。ちなみに、行頭に「。」が来るのを禁止することを禁則処理といいます。修正前の状態つまりはbodyにCSSで禁則の指定をしてあげる。そのCSSは以下のとおり。 □ Chromeの行頭禁則がアレなのを解決 - たけみたの脱社会学日記 body { word-break: normal; word-wrap: break-word; } それぞれ解説すると。「word-break」は改行をどう扱うかの設定。それぞれ、以下のような指定ができる。 □ word-break−スタイルシートリファレンス normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため

t-abe 2012/11/01

Chromeで禁則処理されないのをCSSで対処する方法。

リンク

HTML の label タグに必ずつけたい CSS

CSS に1行加えるだけでラベルまわりがとってもわかりやすくなる。「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rem emberme"> <label for="rem emberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるのでテキストをクリックした時もチェックボックスにチェックが入るようになりますね。ここをクリックでチェック入れられるよ小さいチェックボックスにマウスカーソルを

t-abe 2011/10/04

チェックボックスに対応したlabel要素にカーソルが乗ったときにカーソルを変更するスタイル。

HTML
CSS

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

t-abe 2011/08/23

あとでためす。

リンク

CSSの知識をもっと深める30+2の小技テクニック集｜Webpark

基本的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

t-abe 2011/05/12

CSSの色々まとめ。

リンク

インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」

とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。組織のマインドマップツールをマインドマイスターにすべき理由伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ

t-abe 2011/05/04

これはめちゃくちゃ便利だ。インラインCSSのHTMLをCSSファイルと分割する「Cascader」

リンク

jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法 | jQuery | 阿部辰也のブログ――人生はひまつぶし。

jQuery の hover() を使って、マウスホバーにあわせてスタイルを変更することができます。 hover(マウスが乗っているときの処理,マウスが外れたときの処理); という形式で指定するので、例えば「list」というクラスを指定した要素に対して、マウスが乗っているときだけ「list_hover」というクラスを適用したい場合は、以下のようになります。 $(".list").hover( function () { $(this).addClass("list_hover"); }, function () { $(this).removeClass("list_hover"); } ); 「マウスが乗っているときの処理」で「addClass」＝文字通り、クラス「list_hover」を追加しています。「マウスが外れたときの処理」で「removeClass」＝文字通り、クラス「lis

t-abe 2010/07/23

【ブログ更新】jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法

リンク

「携帯ゲーム機用Webページ」の作り方

本連載では、Web標準のメリットを最大限に活かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口を紹介しています。連載第7回目となる今回は、ニンテンドーDSやプレイステーション・ポータブルなどの携帯ゲーム機向けページの作り方を紹介したいと思います。はじめに本連載では、Web標準のメリットを最大限に活かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口を紹介しています。多様なデバイス向けのページ制作として、前回は携帯用ページの作り方を紹介しました。連載第7回目となる今回は、ニンテンドーDSやプレイステーション・ポータブルなどの携帯ゲーム機向けページの作り方を紹介したいと思います。対象読者 XHTMLとCSSの基本を理解していている方。 Web標準

t-abe 2010/06/29

DSやPSP等の携帯ゲーム機向けWebサイトを作る際の注意点とか。

リンク

CSSでお店のメニュー風なページを作成:phpspot開発日誌

CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。実際のデモページはこちらマークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem

t-abe 2007/12/04

お店のメニューっぽいリストを作る CSS

リンク

[CSS]リストをストライプ状のアコーディオンにするスタイルシート

A Stripe of List Style Inspiration リストの中身を表示・非表示にしている仕組みは、通常時「display:none;」、ホバー時「display:block;」となっています。グラデーションの数を増やすときれいかなと思い、数を増やしたサンプルをアップしてみました。サンプルページもっと増やすともっときれいかも。

t-abe 2007/11/21

CSS

リンク

『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方*ホームページを作る人のネタ帳

t-abe 2007/10/25

CSS

リンク

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。詳しくは、最小限にしたサンプルを作成したので参照ください。高さの異なるカラムを揃えるスタイルシートのサンプル下記の「32768px」って、何か特別な意味があるのでしょうか。

t-abe 2007/10/25