jQuery ツールチップの中のリンク
どのような文脈やCSSで使う予定なのかが不明ですが、 自前でマウスの範囲をチェックして処理を変えるようにしても良いのでしょうけれど、それｒなりに面倒なので、tooltip部分をlinkの子要素になるようにしておいて、mouseenter、mouseleaveで制御するのが簡単ではないでしょうか。 下の例ではmouoseenterなどのかわりにhober()を利用しています。 マークアップを少し変えてありますが、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" c
リストマークの画像のずれを修正する
サイドバーメニュー等の先頭のマーク（マーカー）表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり（テンプレートでは数ヶ所の指定で済みますが）、ページサイズにも影響します。 ということで、マーク表示にはCSS・リスト形式（li）の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで li { list-style-image: url(hogehoge.gif); } と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです（サンプル１）。 サンプル１ これ
横並びメニュー｜CSSの小技(指定テクニック)
ここでは横並びメニューサンプルとサンプルソースのみ掲載します。ロールオーバー及びfloatについては特に解説しません。 グローバルナビゲーション部分が#wraaper、#header等のボックス内に配置されているものとします。 テキストのみの場合 横並びメニューサンプル表示 HTML <div id="globalnavi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </div> css #gl
HTML/CSS/RSS/ATOMの統合バリデータ、W3Cの「Unicorn」サービス
Webサイトを作る際に気にしたいのがHTMLやCSSなどが正しく記述されているかどうかです。いくつかのWebブラウザで表示をチェックするだけでなく、HTMLやCSSのタグや用法があっているかもチェックしてこそプロの仕事。 そうしたチェックにはValidator（バリデータ）がよく使われていました。W3Cの「Markup Validation Service」や「Another HTML-lint gateway」などが有名なところです。しかし、多くのバリデータはHTML、あるいはCSSなどに機能が絞られており、Webサイト全体のチェックには複数のバリデータを利用しなければなりませんでした。 W3Cから新しく登場したバリデータの「Unicorn - W3C 統合検証サービス」は、HTML/CSS/RSS/ATOMなどWebサイトの主要なマークアップをまとめてチェックしてくれる便利なサービスで
基本的なフォーム -- ごく簡単なHTMLの説明
この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、本章の最後で改めて紹介します。 フォームの基本枠組み データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。 HTMLのフォームは、データを入力するための手段（コントロールと呼びます）と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。 form要素の構造 form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
Calendar and Date Picker Design Showcase | Smiley Cat
For a recent project I needed to create a month-at-a-glance date picker / calendar. Seeking some design inspiration, I took a look around the web to see how others had tackled this challenge. As a result of this search I put together a gallery of calendar and date picker designs that I liked. In Search of Inspiration I had hoped to find some good examples from blogs, but it seems that this feature
フォームタグの正しいマークアップとCSS | Nutspress
フォームのテンプレートを作成する際に正しいHTMLのマークアップをしましょうってことで、『How to create perfect form mark up and style it with CSS』というのを見つけたので自分用に覚書。 よく忘れられがちなのが、<fieldset>というタグで無料配布されているCGIやサーバー側で提供しているフォーム、Wordpressなんかでももともとのテンプレートの中に<fieldset>タグを見かけることはほとんどなかったりする。なので、そのままカスタマイズして忘れてしまうタグのひとつがこの<fieldset>タグと<lavel>タグ。 <fieldset>の役割としてはフォームの入力項目をグループ化するためのタグで抜けていてもとくに構文のエラーが出るわけでもないので、結構無視されがち。タグの勉強をしだした頃はしっかり<fieldset>を書くよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML4 で使える文字実体参照
Blogger