Google HTML/CSS Style Guide まとめ - Qiita
Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
CSSだけで作る最も単純なプルダウンメニュー（ドロップダウンメニュー）【Webデザイン】 : 元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。 今回は、その手順を解説していこうと思います。 ＜続きはこちら＞ コメント一覧 (2) 1. 紫水ルリ 2014年08月07日 19:32 はじめまして、 今まで使っていたメニューバーに ドロップダウンをつけることができました。 ありがとうございました。 いろいろ試してみたのですが、 この方法が１番よくわかりました。 ちゃんとドロップダウンになりました。 ブログに記事を作りたいので、 このページをリンクさせてください。 よろしくおねがいします。 2. のりさ 2014年08月07日 22:58 > 紫水ルリさん 了解です。 むしろ、よろしくお願いします。
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less
ピアノロールを使ってWeb上で音楽を奏でよう·PianoRoll.js MOONGIFT
PianoRoll.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Web上で音楽を作る方法は幾つかありますが、今回はPianoRoll.jsを紹介します。いわゆるピアノロールを使ってマルチトラックの音楽を作成できます。 Firefoxで試しています。Google Chromeでは音符部分が表示されませんでした。 音符の記号を選んで、ピアノロールに描画します。 トラックを変更してピアノ以外の音を出す事もできます。再生時には全て一斉に再生されます。 試した感じでは同じトラックの音を同時に奏でる事ができませんでした。しかし他のトラックの音は流せるので音楽の幅が広がりそうです。ぜひ創作活動に励んでください。 MOONGIFTはこう見る 何となくですがピアノロールの方が楽譜に書くよりも直感的に音楽の創作ができる気がします。幾つか適
プラグインは要らない！音声／動画対応したHTML5 - ／要素
HTML5では、新たに あとから述べるように、ブラウザによって対応する音声／ビデオ形式にバラツキがあるなどの問題もありますが、メディア要素を利用することでメディアファイルの扱いがぐんとカンタンになるでしょう。 TIPS 041：音声ファイルを再生する TIPS 042：動画ファイルを再生する TIPS 043：音声／動画ファイルの再生を複数ブラウザ対応する TIPS 044：音声ファイルをスクリプトから再生する TIPS 045：動画ファイルをスクリプトから再生する TIPS 046：ボリュームや再生速度を変更する TIPS 047：動画を全画面表示する TIPS 048：音声／動画ファイルの情報／状態を取得する TIPS 049：音声／動画ファイルの取得状況に応じて処理を実行する TIPS 050：音声／動画ファイルの状態に応じて処理を実行する TIPS 051：音声／動画ファイル再生時
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
[新iPad2/iPhone5 対応版] アプリ作ったら用意する画像サイズの一覧 : 管理人@Yoski
新しい iPad もリリースされて、用意すべき画像サイスがわけわからなくなってきたのでチト整理しときますね。 ※2012/9/13 iPhone5 対応追加 アプリ作ったら用意する画像のサイズ一覧（保存版） - iPhone/iPad アプリアイコン * 57x57 * 114x114 (@2x) * 72x72 (iPad用だけどiPhoneアプリでも用意するべき) * 144x144 (@2x)(iPad用だけどiPhoneアプリでも用意するべき) * 29x29 (検索結果用 - 必須ではない) * 58x58 (@2x)(検索結果用 - 必須ではない * 50x50 (必須ではない。iPad 対応してなければ不要) * 100x100 (@2x)(必須ではない。iPad 対応してなければ不要) * 512x512 (アプリ申請時に必要) (@2x)とついてるものは、ファイル名を x
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
Viewing sent and received headers in Opera
The Live HTTP Headers extension for Firefox can be a useful debugging tool, as it allows Web developers to see the sent and received HTTP headers for any page. There is no such extension for Opera, but you are not without options. The following are some possibilities: Developer console In Opera 10, Tools - Advanced - Developer tools -> Network. This is a complete solution. In Opera 9.2, Tools - Ad
i-mode HTML
i-mode専用HTMLリファレンス メニュー i-mode専用HTML一覧 基本・ヘッダ関連 HTML, HEAD, BODY, TITLE, META, BASE 段落関連 Hx, DIV, P, BLOCKQUOTE リスト関連 UL, OL, MENU, DIR, LI, DL, DT, DD フォーム関連 FORM, INPUT, SELECT, OPTION, TEXTAREA その他 A, PRE, PLAINTEXT, BR, HR, IMG, CENTER, FONT, MARQUEE, BLINK Tips アクセスキーは必ず アンカー文字列には目印を 半角カタカナが使える？！ 符号化方式は「SHIFT_JIS」のみ リスト形成にはどのタグを？ テーブルの作成は・・・？ 絵文字一覧（１～６） カラーコード 携帯電話のHTTP User Agent i-mode専用HTM
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一覧表だけ参照したい ! という場合は DOCTYPE スイッチの一覧表をご覧ください。 DOCTYPE スイッチとは何か そもそも DOCTYPE スイッチとは何か、というのがまず書くべきところですが、これは私が書かずとも良質のリソースが各種ありますのでそのリンクのみまとめておきます。 !DOCTYPE スイッチ 各UAのDOCTYPEスイッチについて - CSS Dencitie Mozilla's DOCTYPE sniffing - MDC Mozilla's DOCTYPE sniffing - MDC ( 日本語
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rendur 2.4
ブラウザだけでHTMLをPDFに変換してくれる『html2pdf』 | IDEA*IDEA
あなたのマークアップのどこがどう正しくないかを具体的に指摘してくれる『xhtml-css』 | 100SHIKI.COM
Copy Menu - ブラウザから書式をカットしてコピーできるツール: ある SE のつぶやき