タグ

HTMLとTipsに関するwackyのブックマーク (43)

  • パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife

    普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10

    パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife
    wacky
    wacky 2007/01/31
    パンくずリストのマークアップ&CSS例(8種類)。「>」記号を背景画像にするものやアクセシビリティを考慮したものなど。非常に参考になる。
  • フィードリーダーの脆弱性まわりのこと

    最近、FreshReaderに脆弱性があったということで、いくつか調べて直したり、赤松さんと連絡取り合ったり、それからはてな使ってないのにユーザー様とか書かれて不愉快な気分になったりしてたんですが。 この記事はひどすぎると思う。 フレッシュリーダーの脆弱性に関連してSage++のこと そもそもの問題として「ローカルディスク上のHTMLファイルをブラウザで開くと超危険」です。XMLHttpRequestやIFRAMEでローカルファイルの内容を読み取れるからです。Sageに脆弱性があるということは、あらゆる個人情報の漏洩につながります。「開発者の個人情報を晒すリスクが云々」というのは、個人的には分からなくもないですが、ユーザーの個人情報を危険に晒していることを認識すべきです。 開発者人が過去に書いているので、危険性の大きさは十分に認識できているはずです。「脆弱性がある」と公表してしまった時点

    wacky
    wacky 2007/01/25
    ローカルのHTMLファイルをインターネットゾーンで開くIEの独自機能「saved from url」について。
  • CodeZine:Perlで作るモバイルサイトのコツ:第6回(Perl, モバイル, XHTML)

    はじめに Webアプリケーションを作成する上で避けて通れない機能の一つにセッション管理があります。ユーザーが入力画面で入力した情報を、確認画面でセッションに保存し、完了画面を出力する前にセッションから復元してDBなどのストレージに格納する、というフローなどで使用されます。 PC用のWebアプリケーションならば、クッキーを用いることでこのセッション管理を行うことができますが、現在の携帯の多くはクッキーを利用できないため、同様の処理を行うことはできません。 そこで稿では、携帯でのセッション管理の実装方法について解説していきます。 対象読者 CPANモジュールのインストールができる方。 PC用のWebアプリケーションでのセッション管理を理解している方。 必要な環境 Perl 5.8以上が動作するサーバ(筆者環境ではPerl 5.8.8)。 Apache 1.3系、2.x系が動

    wacky
    wacky 2007/01/25
    Perlによる携帯サイト構築のTipsを解説する連載(第6回)。携帯でのセッション管理の実装方法。
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    wacky
    wacky 2007/01/15
    CSSのclass名やid名に使えそうな名前のリスト。あちらこちらから拝借。
  • DOCTYPE スイッチについての検証とまとめと一覧表 - hxxk.jp

    DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。 標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。 既存の DOCTYPE スイッチ一覧表に "?" ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 ある

    wacky
    wacky 2006/12/20
    DOCTYPE宣言で「//EN」の前に空白文字を入れるとURL表記があっても標準準拠モードになってしまうので注意。
  • Ajax Cookbook

    Post sponsored by smtp ghost In the "old-style" event registration model, you would typically register events by assigning functions to the onevent property of DOM elements: elem.onclick = function() { alert("You clicked me"); } The problem with that approach is that you can only assign a single event handler function to any given event. All modern browsers support more advanced event registration

    wacky
    wacky 2006/12/19
    Ajaxサイトを構築する上で役立つJavaScript / HTML / CSSのコードスニペット集。ライブラリ非依存。Creative Commons Attribution 2.5ライセンス。
  • Perlで作るモバイルサイトのコツ:第5回 :CodeZine

    はじめに 第5回は携帯サイトのデザイン性を高めるための主流となっているXHTMLの出力方法を解説します。最近の携帯端末ではほとんど対応になっているXHTMLですが、一部の非対応端末との切り替え方法などについて触れてみます。 対象読者 Perlを実行できる環境にて携帯サイト構築を考えている方 必要な環境 Apache 1.3系または2系 Perl 5.6以上 端末のXTHML対応/非対応の判別を行う DoCoMo,AUはWAP2.0ブラウザ搭載端末、SoftBankはW型および3GC型端末で対応となります。 それらを第1回で紹介したHTTP::MobileAgentを使って判別すると次のようになります。 use HTTP::MobileAgent; my $agent = HTTP::MobileAgent->new; if ($agent->is_docomo){

    wacky
    wacky 2006/12/05
    Perlによる携帯サイト構築のTipsを解説する連載(第5回)。効率的なXHTMLの出力方法。
  • Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

    Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE Code snippets and poems often use spaces for indenting text. Pre-tag is used to display preformatted text on webpages. This makes indenting visible, but has the annoying side-effect of disabling wrapping. When wrapping is disabled, long lines go out of the right side of window, which is never usefull. This howto explains how you can

    wacky
    wacky 2006/12/04
    pre要素の中で折り返しを可能にするためのクロスブラウザなCSS。
  • diaspar.jp

    This domain may be for sale!

    wacky
    wacky 2006/10/10
    IEのpre要素がレイアウトを破壊する問題を解決するバッドノウハウ。
  • Mozilla — 利益ではなく、ユーザーのためのインターネット

    このサイトが機能するために必要な Cookie に加えて、あなたの閲覧のニーズをより理解し、エクスペリエンスを向上させるために、追加の Cookie を設定する許可をお願いします。プライバシーは侵害しませんのでご安心ください。

    Mozilla — 利益ではなく、ユーザーのためのインターネット
    wacky
    wacky 2006/10/06
    Firefoxで動作するWYSIWYGなリッチテキストエディタの作成方法。iframe要素で designMode="on" を指定する。
  • MSDN ホームページ

    This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

    MSDN ホームページ
    wacky
    wacky 2006/10/06
    IEで動作するWYSIWYGなリッチテキストエディタの作成方法。任意の要素で contentEditable="True" を指定する。document.designMode="on" を指定すれば全体編集モード。
  • Push my button - Digital Web

    Got something to say? Share your comments on this topic with other web professionals In: Articles By Aaron Gustafson Published on September 25, 2006 If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. The few times it actually did get some attention, the lowly button was us

    Push my button - Digital Web
    wacky
    wacky 2006/09/28
    button要素とCSSにより美しく装飾したボタンを作成。(英語)
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    wacky
    wacky 2006/09/24
    IEでapplication/xhtml+xmlのページを開いても「ファイルのダウンロード」にならないためのレジストリ。
  • Collection &amp; Copy - ヒアドキュメント、IE専用、コメント

    JavaScript function hdoc(){ return arguments.callee.caller.toString().match(/hdoc\(\/\*(([\n\r]|.)+)\*\/\)/m)[1]; } function hdocTest(){ var message = hdoc(/* Peter Piper picked a peck of pickled peppers; A peck of pickled peppers Peter Piper picked. If Peter Piper picked a peck of pickled peppers, Where's the peck of pickled peppers Peter Piper picked? */); alert(message); } 関連リンクCollection & C

    wacky
    wacky 2006/08/02
    HTMLコメントを利用して、JavaScript上でヒアドキュメントを実現するテクニック。IE専用。
  • デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌

    maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説

    wacky
    wacky 2006/06/19
    カスタマイズされたデザインのフォームを実現する仕組み解説。label要素とCSS / JavaScriptの組み合わせ。
  • d.aql - scriptタグの中にJavaScriptを書く正しい方法

    XHTMLでCDATA区間を使う。以上。 経緯 HTML4のscriptタグでJavaScriptをちょろっと書く時、中にHTMLタグがあるとダメという話が発端である。例えば、以下のようなのがダメだ。 <script type="text/javascript"> document.write('<p><a href="http://www.hikoboshi.org">hikoboshi.org</a></p>'); </script>ちなみに、ブラウザで動かせば多分動く。(試してないけど。)じゃあ何がダメかというと、HTMLの仕様的に。ちなみにこういう書き方をすると、多分HTML4でもXHTML1でもダメだと思われ。 そんな話をきっかけに、いろいろ調べた。 何故ダメか まずはHTML4のDTDを調べる。(別にstrictを選ばなくても良いんだけどとりあえず。) http://www.w

    d.aql - scriptタグの中にJavaScriptを書く正しい方法
    wacky
    wacky 2006/06/15
    HTML4では<script>タグ内がCDATA、XHMLでは#PCDATAとして扱われる。
  • Bridge Word

    This shop will be powered by Are you the store owner? Log in here

    wacky
    wacky 2006/05/31
    Wordの「HTMLで保存」機能を使うより、Gmailに送って「View HTML」でソースを見た方がクリーンなHTMLが手に入る、という話。あとで検証。
  • Automatic colored rows - Example for BiteSize Standards

    Are you a content creator looking to take your first steps in website design? You’re precisely where you need to be. HTML stands for HyperText Markup Language. Visualise HTML as the structural backbone of any website. A foundation that organises all the text, graphics, videos and overall layout. It operates behind the scenes, instructing web browsers how to render content for viewers. HTML is used

    Automatic colored rows - Example for BiteSize Standards
    wacky
    wacky 2006/04/26
    テーブルの背景色を1行ずつ変えてストライプにするシンプルなJavaScriptコード。
  • 川o・-・)<2nd life - prototype.js 1.5 からの新機能 Template の使い方

    JavaScript での変数を使った文字列の作成は何かとめんどくさいですね。prototype.js では 1.5_pre0 から Template という簡易テンプレートとして使えるクラスが加わりました。相変わらずドキュメントはソースと test 嫁なので簡単な使い方を紹介します。 まずは Template となる文字列を new Template で作ります。Template のリテラルは #{}です*1 。 var t = new Template('#{foo}, #{bar}!');次に作成した Template インスタンスの evaluate 関数を呼び出し、引数として Hash(Object) を渡します。 t.evaluate({ foo: 'hello', bar: 'world' }); // hello, world!もしテンプレートを使い回さず、一度限りの文字列

    川o・-・)<2nd life - prototype.js 1.5 からの新機能 Template の使い方
    wacky
    wacky 2006/04/20
    prototype.jsの簡易テンプレート「Template」オブジェクトの説明。
  • PHP で DOM を使って HTML を出力 - memo.xight.org

    wacky
    wacky 2006/04/19
    DomXml拡張モジュールを使って、サーバ側でDOMベースのHTML操作を行う方法。