【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
createObjectURLがすごい件 - プログラムモグモグ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
ふつうのユーザが知らないHTML5コーディングツール10選 - YAMAGUCHI::weblog
はじめに こんにちは、Python界の情弱です。今日はChrome+HTML5 Conferenceのお手伝いに来てます。いままで全く触れてこなかった世界ですが、結構HTML5はXMLのようにセマンティクスに重点を置いてるんですね。CSS3も動的なエフェクトを簡単にかけられるようになってるし、とてもいいですね。 さて、YouTube Live Streamのお手伝いしながらRSS見てたら、ちょうど今日のテーマに沿ったエントリがdiggで紹介されてたので、翻訳しました。 10 Excellent HTML5 coding Tools Many Users Don’t Know About 10 Excellent HTML5 coding Tools Many Users Don’t Know About （オリジナル） HTML5はウェブサイトの作成方法を根本から変えることになるでしょう。
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで ｜https://wp.yat-net.com/name
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで カテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート
Sticky Notes with CSS3 デモ：左、デモ：右 [ad#ad-2] 付箋紙はどんな背景にも適用できます。 デモ 画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装 上記の当サイトに設置したデモのコードを紹介します。 リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Notes with CSS3<br />by <a href="http://www.accidentalhacker.com/sticky-notes-with-css3/">accidental hacker</a></p> </li> </ul> [ad#ad-2] CSS3のグラデーション、ボックスシャドウ、回
勝手に添削: Selection内のHTML Textをいい感じに取得する: Days on the Moon
というわけでやってまいりましたこのコーナー! 本日のお題は「Selection内のHTML Textをいい感じに取得する - 枕を欹てて聴く」でございます。選択範囲のHTMLソースを抜き出すというやつですね。では早速いってみましょう! if(src.focusNode){ // selection まずは HTML5 テキスト選択 API の Selection オブジェクトが登場! 以後これに対する操作が続きます。しかしこの Slection オブジェクト、getRangeAt メソッドを使うとなんと選択範囲に対応する DOM 2 Traversal and Range の Range オブジェクトが取れちゃうんです! // common parent node search (以下 21 行省略) それ Range#commonAncestorContainer で取れるよ! // c
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
HTML5 Formsを学ぼう - jsdo.it - Share JavaScript, HTML5 and CSS
<div class="slide"> <h1>HTML5 Formsを学ぼう</h1> <p>HTML5から新たに使えるようになったフォーム周りの機能について調べたことをざっくりとまとめたメモです. <p>作成日: 2010/09/28 <p>書いた人: 8th713(<a href="http://twitter.com/8th_713" target="_blank">Twitter</a>) </div> <div class="slide"> <h2>対象ブラウザ</h2> <p>Windows版の以下のブラウザで調べた結果を基準にしています. <ul> <li>Google Chrome 7.0.517.17 dev <li>Safari 5.0.2 <li>Opera 10.62 </ul> <p>Firefox4b6はフォーム周りの新機能にほとんど対応してないっぽいので除外
15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash
HTML is basically a standard for structuring and presenting content in the internet and HTML5 is the newest incarnation of HTML. HTML5 is supposed to have features like video playback which currently depends upon third-party(and proprietary) browser plug-ins like Adobe Flash. And please do keep in mind that, HTML5 itself is still a work in progress and hence these 15 demos are far from perfect. Bu
Live DOM Viewer
Markup to test (permalink, save, upload, download, hide): <!DOCTYPE html> ... DOM view (hide, refresh): Rendered view: (hide): innerHTML view: (show, refresh): <!DOCTYPE HTML><html></html> Log: (hide): Script not loaded. This script puts a function w(s) into the global scope of the test page, where s is a string or object to output to the log. Some files are available for testing purposes, notably
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
canvasでキラキラした背景を作る方法 - KAYAC engineers' blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
HTML5と関連仕様、言語リファレンスが公開 | Web標準Blog | ミツエーリンクス
HTML WGより3月4日付で、新しいHTML5の草案を含めた6つの文書が公開されました。 HTML5 HTML Canvas 2D Context HTML Microdata HTML+RDFa HTML: The Markup Language HTML5 differences from HTML4 HTML5 differences from HTML4の日本語訳も、いつもの通り更新しています。 HTML5 における HTML4 からの変更点 変更点 昨年の草案からの変更点から、いくつか気になるものを挙げてみます。 ひとつは、会話文を表現するdialog要素が削除されました。専用のマークアップを用意する必要性や、表現力に乏しいといった懸念が寄せられたことによります。 また、figure要素とdetails要素について内容モデルの変更がありました。これらの要素はキャプションにlab
[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
GoogleのChromeブラウザの構成モジュールのそれぞれのバイナリ・サイズの表 - [モ]Modern Syntax
今回のモダシンラジオはここ最近観た映画について一人語りする回です。以下の8本の映画について15分弱でさらっと喋ってみました。15分で8本なんでほんと「さらっと」なんですが、「マダム・ウェブ」以外は全部オススメです（「マダム・ウェブ」もそんなに悪くないけど）。 ・ボーはおそれている ・ストップ・メイキング・センス 4Kレストア ・劇場版ハイキュー！！ ゴミ捨て場の決戦 ・落下の解剖学 ・コヴェナント 約束の救出 ・マダム・ウェブ ・犯罪都市 NO WAY OUT ・ＡＲＧＹＬＬＥ／アーガイル さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor）の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for Podca
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
[CSS]実用的なレイアウトが揃っているフリーのテンプレート集 -Best Free Templates