ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
ブラウザにやさしいHTML/CSS
1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──
How to center a "position: absolute" element
I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered? body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; h
第38回HTML5とか勉強会 アーカイブ情報
2013 年 4月 26 日に開催された 第38回HTML5とか勉強会 - 「Webアプリ×テスト最新事情」 - のアーカイブ情報です。 JavaScriptテスト最新事情 Why? What? How? 佐藤鉄平( @teppeis )さん スライド...
今更、cssの display:inline-block を理解する - end0tknr's kipple - web写経開発
display:inline-blockとはinlineでありながらwidthやheightを指定可 - block inline inline-block width,height ○ ☓ ○ 例 div,table span,a img,input,textarea,select 通常(というかfirefoxでは)、display:inline 要素に対して、widthやheightを指定しても、変化はありませんが、display:inline-block 要素では、これらを指定できます。 と言っても、画面サンプルやsrcを見る方が理解は速いと思います。 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="common.css"
jQueryでoption要素を追加した際の諸問題 - むつらつれづれ
jQueryで任意のoption要素を追加するには、append()やprepend()を利用するのが手軽。 $('#target').append($('<option>').attr({ value: 'xxx' }).text('xxxxxxx')); だが、この操作はIEの場合に問題が生じる。v1.1.3.1以前ではoption要素を追加しても幅が調整されない不具合があり*1、v1.2.3ではoption要素を増やした直後にそのvalue値をval()で設定しようとすると、 「selected プロパティを設定できませんでした。 未定義のエラーです」 というスクリプトエラーが発生する*2。これらの問題はselect要素ごと作り直してしまうことで回避できる。 $('#target').after($('#target').clone()); $('#target').remove()
jQuery/サンプルコード/プルダウンのselectedIndexを取得する - ありんく tech-wiki
JSのソースコード † $("#select_sample").change(function(){ var index = this.selectedIndex; $("#select_message").html('selectedIndex = ' + index); }); $("#button").click(function(){ var $select = $("#select_sample"); var index = $select.get(0).selectedIndex; $("#click_message").html('selectedIndex = ' + index); }); 関連ページ jQuery/サンプルコード213日前 ツールボックス 新しく作成 新しくページを作成 編集 このページを編集 凍結 このページを凍結 変更点 このページの最終更新箇所を表
jQueryでTableタグをスクレイピングして値を取り出す方法 - 小さい頃はエラ呼吸
はじめに 以前、JavaScriptでtableタグをスクレイピングして値を取り出す方法 というエントリを書きました。 先日、コメント欄でjQueryで書きなおすとどうなりますか？と聞かれたので、jQueryで書いてみました。 jQuery最高の教科書posted with amazlet at 14.01.23株式会社シフトブレイン SBクリエイティブ 売り上げランキング: 17,130 Amazon.co.jpで詳細を見る jQueryでTableタグをスクレイピングしてみる テーブルタグをもつHTMLを作成します。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tableタグのサンプル</title> <style type="tex
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
Javascript/jQuery/input要素のvalueを操作する - 俺の基地
prototype.js感覚で使ってたら嵌ったｗ 実は結構迷ったのでメモ <input type="text" value="" id="hoge" /> こうやってもだめ $('#hoge').value = 'aaa'; こうじゃないとダメ $('#hoge').val('aaa'); タグ Tag: Javascript jQuery
ブラウザの画面サイズの取得(javascript) - my-notebook
ブラウザの画面サイズの取得(javascript)接続してきたブラウザの画面サイズを元にHTMLのレイアウトを調整したい場合に使用するJavaScript。 今回は、textareaを画面サイズに応じて調整したかったので、実装しました。 材料(コード)を揃えますブラウザ画面サイズを取得して、対象となるHTML要素のサイズを設定する... ために必要な材料(コード)を用意していきます。 画面サイズを取得するjavascript関数getBrowserWidth() ... ブラウザの横幅を取得function getBrowserWidth() { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clien
きのふよりけふ、けふよりあした 【HTML】イベント順序【Javascript】
今更という感じもしますが、 HTMLドキュメントがロードされるときに実行されるイベントの順序について調べてみたのでメモ。 試していないから否定できない可能性はブラウザとHTTPサーバの組み合わせによってイベントの実行順序が変わるかもしれません。 なので実行環境は次のとおりです。 実行環境 windows7 ultimate apache 2.2 chrome 13 HTMLとJavascript ○index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>event test</title> <script type="text/javascript" src="./common/js/jquery.js"></script> <script type="text/javascript"
line-height｜プロパティ｜CSS HappyLife ZERO
line-heightプロパティは、行の高さを指定できます。 このプロパティは「行間」の指定をする印象も有るかも知れませんが、行間ではなく「行の高さ」を指定するプロパティになります。 尚、文字間を調整するには、letter-spacingプロパティの指定をする事で可能です。 対応ブラウザ プロパティの解説 値 normal｜<長さ>｜<実数>｜<パーセント>｜inherit 初期値 normal 適用される要素 全ての要素 継承 します パーセント値 要素自体のフォントサイズを参照します メディア visual 値の解説 normal UA（ブラウザなど）が要素のフォントサイズに基づいて、適切な値を設定します。この値は<実数>として扱われ、1～1.2を指定したのと同じ表示になるよう仕様書では推奨しています。 <長さ> 行ボックス高さを、emなどの単位で指定します。尚、マイナス値は不正です。
★スタイルシートリファレンス
baseline 適用した要素のベースラインを親要素のベースラインに揃える（初期値） top 上端揃え middle 中央揃え bottom 下端揃え text-top テキストの上端揃え（テーブルセルへの指定は無効） text-bottom テキストの下端揃え（テーブルセルへの指定は無効） super 上付き文字（テーブルセルへの指定は無効） sub 下付き文字（テーブルセルへの指定は無効） パーセント（%） その要素のline-heightプロパティの値に対する割合を%で指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動） 数値＋単位 数値にemやexやpxなどの単位をつけて指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動） vertical-alignプロパティは、それぞれの値を指定した際の実際の動作が理解しにくいもののひとつですが、
iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた - かちびと.net
Moongiftさんの記事を見て興味が 沸いたので即DLしてみました。 iPhone等のモバイル向けのWeb アプリを構築するHTML5中心の フレームワーク・Sencha Touch。 個人的にはかなり良いオープン ソースでした。 という訳で、Sencha Touchを触ってみましたよ。これ使えば、低スキルの僕にでもアプリ作れそうです。 で、Sencha Touchってどういうもんなの？という方もいらっしゃるかと思いますので、ファイルに含まれているサンプルをご紹介します。 SENCHA かなり素敵なフレームワークでしたよ。HTML5っていうのがいいですね。含まれているサンプルを以下に簡単にご紹介します。サンプルの説明は動作の説明になります。 尚、含まれているファイルは画像ファイルとHTMLファイルとjsファイルのみですのでローカルサーバー等が無くてもサンプルを見る事が出来ますよ。 キャプ
スマートフォン端末の画面に合わせて、ウェブサイトの表示を最適化する方法 « wondering-mug
「おいおい、この画面サイズ別に、ページを別途用意しなきゃいけないのかよ・・・」 と、心配してるなら、安心して下さい。 サイト製作者は、端末ごとに画面サイズを用意する必要はありません。 METAタグでViewportの指定をするだけで、意図した大きさにページを表示してくれます。 表示を最適化するための「Viewport」の指定方法。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0" /> <title>デモ</title> </head> <body> <p>スマートフォンの画面サイズに自動で表示！</p> </bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Background Opacity
Sign in - Google Accounts
Components · Twitter Bootstrap
http://mindia.jp/book/syatin/keyword/Firefox%E3%81%A7%E7%B8%AE%E5%B0%8F%E3%81%97%E3%81%9F%E9%9A%9B%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%8C%E3%82%BA%E3%83%AC%E3%82%8B%E5%95%8F%E9%A1%8C