Flat UI - Free Bootstrap Framework and ThemeCheckboxes Unchecked Checked Disabled unchecked Disabled checked Radio Buttons Radio is off Radio is on Disabled radio is off Disabled radio is on
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
インデントの話 - プログラミングを勉強するブログ
私はこれまでコードを書く際インデントはTabを使っていたんですが世間的にはスペースの方が好まれるみたいですね。 理由はタブ幅はエディタによって異なるからだとか。 なので私も今後はインデントはスペースを使おう！と思っていたのですがよく考えると 一般的なタブ1つに対してスペース4つの方法だとファイルサイズがでかくなっちゃいます。 コンパイルしてバイナリを作るタイプのプログラムなら問題ありませんが JavascriptやHtmlのようにソースをそのまま送受信する必要がある場合にはファイルサイズは重要な問題です。 そもそもサイズを気にするなら空白なんか全部取り払ってからアップすべきという話なんですがやはりコードの可読性を維持したい場合もあります。 私だけかもしれませんが 「このサイトすげえ！どんなコードなんだろ！」 って思ってソースをみたら一行でかかれてた時なんか悲しいですもんね。 そこで今更なが
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
input fileをCSSでキレイにしたい
この記事は12年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。結構この壁にぶつかってる人はいると思います。 textとかsubmitをキレイにしたのに、fileの参照ボタンが…！という思いをした人は多いでしょう。 というか僕がぶつかったので記事を書いているわけですが。 というわけで早速調べてみました。 一番参考になったのはこちらのサイト。 CSS2/DOM – Styling an input type=”file” 英語です。 なので、大事なとこだけ簡単に要約します。 ＜CSS＞ １．<input type=”file” />を「position:relative」で配置した要素（divとか）の中に配置する。 ２．「position:relative」で配置した要素（divとか）の中に子要素（divとか）を配置して、そこに<input />と<img />（実際表示され
vim使っているデザイナー/コーダーで、これ入れてないのはヤバっしょプラグインまとめ 8個 - Qiita
そもそもqiita見ているデザイナー&&vimmerっているんですか(´;ω;｀)ねー 会社の情報共有を兼ねて、使い方から導入方法まで。 紹介するプラグインは以下の通りです。 emmet-vim あまりにも有名なhtml/CSS入力補助プラグイン surround.vim vimのテキストオブジェクトを拡張するプラグイン open-browser.vim URLを開いたり、ググったり出来る vim-browsereload-mac ブラウザを自動更新するプラグイン(Mac Only) vim-css3-syntax html5のコードをシンタックス表示する vim-javascript vimにjsのシンタックスを追加する vim-coffee-script coffee scriptのサポート sass-compile.vim sassのサポート インストール vimのプラグイン
セレクトボックスの選択肢には「選択してください」を用意する - ウェブユーザビリティ.JP
フォーム入力の際、必須入力の項目が未入力であった場合には「○○を入力してください」などのメッセージを出し、入力するまで先に進めないようにすることが一般的です。 これをセレクトボックスに当てはめると、セレクトボックスは必ず１つの選択肢を選択してしまうので、「何も選択していない」ことを表す選択肢を選択している場合にはメッセージを出すということになります。 この、何も選択していないことを表す選択肢の文言はサイトによってばらばらで、空白だったり、「未選択」「選択してください」というような文言が使われます。 例えば、利用者アンケートの場合には以下のような選択肢になります。 ・選択してください←デフォルトで選択されている項目 ・使いやすい ・どちらでもない ・使いにくい ここで、「ユーザーは作業中のエラーを嫌う」ということを思い出し、デフォルトで何か一つ有効な選択肢を選択しておくようにしたら良いのでは
src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. HTMLのimgタグおよびscriptタグで「src=""」が指定されている場合、またはlinkタグで「href=""」が指定されている場合、リクエストが発生してページの取得が実施される振る舞いをするブラウザがあることをNicholas C. Zakas氏が指摘している。しかも空URL指定で取得されるコンテンツは何にも使われることなくそのまま消えていくという、まさに通信帯域だけを消費するという無駄な動きになっているという。 こうした動作の違
RubyでHTMLタグ除去 - ひげろぐ
Railsでsanitizeやstrip_tagsといったメソッドが存在するが、ビューのヘルパーとして定義されているので、どこでも使えるものではない。 これをコントローラーやモデルの中で何とかして使うこともできるようだが、同等の機能を提供するSanitizeというgemがあるのでこちらを使った方が楽だ。 導入 gemで入れる。 gem install sanitize 使い方 すべてのタグを削除する Sanitize.clean(html_string)でhtml_string内のタグを削除する。 irbで試してみる。 :001 > require 'sanitize' => true :002 > html_string = "<h1>hello clean world</h1>" => "<h1>hello clean world</h1>" :003 > Sanitize.clean
ブロックレベル要素とインライン要素
HTMLでは多くの要素タイプが定義されていますが、そのうちbody要素の中で使われるものは、大きく「ブロックレベル要素」と「インライン要素」に分けることができます。 ブロックレベル要素 ブロックレベル要素は見出し、段落など文書を構成する基本要素となるものです。ブロックレベル要素の内容モデルには、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。 ＊ブロックレベルに属する要素タイプでも、p要素タイプのように内容モデルにはインライン要素しか持てないもの、pre要素タイプのようにさらに内容が限定されるもの、hr要素タイプのように内容を持たないものもあります。 ブロックレベル要素は、ブラウザでの表示に際してもひとつの「ブロック（通常改行を伴う表示上のまとまり）」として扱われます。ブロックの間に空行を置くかどうかは、仕様書には定
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
[HTML5] アプリケーションキャッシュの使い方
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、 表示の高速化やオフラインでの動作を可能にするものです。 ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。 特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。 導入方法 あちこちで語られまくってて今更感あるけど一応…。 マニフェストファイルの作成 まずは何をキャッシュするのか指定するマニフェストファイルを作ります。 UTF-8のテキストファイルを開いたら、拡張子を “.appcache” にして適当な名前を付けて保存。 保存する場所はアプリケーションのルートでいいと思います。 保存したらテキストファイルの先頭に CACHE MANIFEST と追加。目印なので忘れずに。 その後にキャッシュするものとしないものの設定を書きます。 ま
XMLの第一人者Tim Bray氏「URLに#!入れるな」 | gihyo.jp
Tim Bray氏のブログ記事を解説したものです。Tim Bray氏はXMLの生みの親であり、最近はGoogle Developer AdvocateとしてAndroidの普及に務めています。Twitterをはじめ、最近のWebサービスにて「twitter.com/#!/timbray」のようにURLに「#!」というhash-bang（shebang）が含まれるのをよく目にしますが、Tim氏はこの流行に批判の意を示しています。 hash-bangを含むURLはAjaxを利用するために考えられたしくみです。#以降は単なるフラグメントとして処理されるため、サーバは#より前のURLを解釈しコンテンツを出力します。そしてブラウザにてJavaScriptが#以降を解釈し、以降のパスに相当するコンテンツをAjaxにて取得しコンテンツを書き換えます。このしくみができた背景は、Ajax後のコンテンツをSE
【レポート】X-Frame-Options、ブラウザ対応完了 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable Firefox 4 Beta 5に導入されたX-Frame-Options機能は、現在のFirefoxリリース版の最新版となるFirefox 3.6.9にも取り込まれている。これですべての主要ブラウザの現行リリース版(IE8、Firefox 3.6.9+、Chrome 4.1.249.1042+、Safari 4+、Opera 10.50+)がX-Frame-Options機能に対応したことになる。 X-Frame-OptionsはHTTPレスポンスヘッダに指定するオプションヘッダのひとつ。レスポンスとして返されるコンテンツをフレームの内部に表示して良いかどうかを指定するといった機能になっている。指定できる値はSAMEORIGINとDENY。SAMEORIGINが指定されている
z-indexとposition:relativeの関係 « Peacemanの腹痛記
今日はハマッタ。 z-indexを指定してるのに指定したボックスが上に来ない。 イライラしながらあーでもない、こーでもないとCSSを書き換えていたのだが、ぐぐってみると「親要素にposition:relativeを指定している場合、z-indexが効かない」ということが判明した。 理屈があーだこーだ書いてあったが、そんなのは当然読む気もせず、ただただひたすらイラついた。 position:relativeなんて使わなければいいのだが、どうしても使わなくてはいけない理由があったので、更にいろいろ調べたり書き換えた結果、なんかよくわからんができた。 たぶん、下にもってきたいボックスのpositionをabsoluteにしたことで実現できたのだろう。 しかし、おかげでいろいろと書き直さなければいけない箇所が出てきてしまったが、やりたいことはできたので一安心。 それもこれも、変なデザインでHPを作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLのインデントは2タブで |
主要ブラウザすべてに影響する「クリックジャッキング」攻撃とは
スマートフォンブラウザ不具合特集
文字参照
Get all text nodes? | Bytes