Chrome+HTML5 Conference「Webアプリの道も一歩から」講演資料を公開します - Hatena Developer Blog
2011年8月21日(日)に開催されたChrome+HTML5 Conferenceにて、id:nagayamaとid:nanto_viが講演を行ったので、その資料を公開します。「Webアプリの道も一歩から 〜はてなブックマークの場合〜」と題し、公式Chromeウェブアプリ はてなブックマークの開発フローや利用技術について解説しました。発表は2部構成で、ディレクターのid:nagayamaがはてなでのChromeウェブアプリの開発フローに関して、エンジニアのid:nanto_viがウェブアプリで活用しているHTML5関連技術に関して述べています。 Webアプリの道も一歩から 〜はてなブックマークの場合〜 View more presentations from nagayama Web アプリの道も一歩から 実装について by nanto_vi スクリプトの設計 表示内容と URL の切り
[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス
「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
iPhone向けサイトを考える : リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション - livedoor Blog（ブログ）
画像だけを表示するRSSリーダーを作る時にCSS3のアニメーションを使ったので、軽くまとめてみます。間違い等あれば指摘していただけるとありがたいです。全体的に[要出典]です。 アニメーション自体がものすごく軽いのはsafariのCSS3で使える-webkit-transformと-webkit-transitionを使っているためです。 -webkit-transformは変化後のスタイルを規定し、-webkit-transitionは動きを規定します。 -webkit-transform:translate -webkit-transform:translate(0,0)；//位置 -webkit-transform:rotate(0deg)；//角度 -webkit-transform:scale(1);//倍率 がデフォルトの値です。本来の位置からどれだけずれているかを
1枚の画像からサイズ可変な罫線を表示する（1）：FirefoxとSafariのCSS - builder by ZDNet Japan
現在のWeb制作では、画像を使ってサイズ可変な罫線を表示する場合、辺やコーナー別に画像を用意して対応する。しかし、画像を作成するのに手間がかかる上に、画像の表示先として複数の要素（タグ）を用意する必要があるなど、HTML/XHTMLソースやスタイルシートの設定が複雑になるという問題がある。 それに対して、CSS 3ではborder-imageプロパティを利用することにより、1枚の画像からサイズ可変な罫線を表示する方法が提案されている。border-imageプロパティでは、ブラウザが1枚の画像を9つに分割して罫線の表示を行うので、これまでのように制作者が辺やコーナー別に画像を用意する必要がない。また、スタイルシートも などの1つの要素に適用するだけで設定できるというメリットがある。 Safari 3ではこの機能をサポートしており、-webkit-border-imageというプロパティで利
CSS Lecture: CSSで可変対応した角丸のボックスを作る その2
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
First step CSS - Section 4
今までは，<H1>（見出し），<EM>（強調）といった文書中である役割をもつ要素にスタイルを指定した。ここでは“スタイルを適用する範囲”を示し，ほかの役割を持たない HTML の要素を導入する。 <DIV> と <SPAN> は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから～ここまで”の形で使われる。 ここで“文書中での役割をもたない”というのは，たとえば <UL> はくくった範囲に“箇条書きである”という“役割”を与えるが，<DIV> と <SPAN> は決まった役割を与えない。 <DIV> と <SPAN> は，スタイルシートの範囲指定のほかに，ある範囲が“何語で書かれているか”を示すのにも用いられる。
white-space－スタイルシートリファレンス
white-spaceプロパティは、ソース中のホワイトスペース（連続する半角スペース・タブ）・改行の表示方法を指定する際に使用します。 white-spaceプロパティは、 １.ソース中のホワイトスペース（連続する半角スペース・タブ）の表示方法 ２.ソース中の改行の表示方法 の２点を指定するプロパティです。 この２つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。 ■値 normal ソース中のホワイトスペースを無視 ソース中の改行を1つの半角スペースとして表示 ボックスサイズが指定されている場合にはそれに合わせて自動改行する（初期値） pre ソース中のホワイトスペースをそのまま表示 ソース中の改行をそのまま表示 ボックスサイズが指定されている場合にも自動改行しない nowrap ソース中のホワイトスペースを無視 ソース中の改行を1つの半角
今のうちにチェックしておきたいCSS3 ボタンのサンプルでよく分かるその特徴 | 日刊ウェブログ式
動作しないブラウザがある以上は今すぐは難しいかもしれませんが、CSS3ボタンのサンプル集です。フォトショップなどで編集していた部分も、これからはCSSで指定できてしまうんですね。これは今のうちにチェックしておいた方がいいかも。 CSS3をボタン作成ツールで体感 ※CSS3未対応のブラウザでは正常に動作しませんのでご注意を Button Maker CSS3がどんなものか、実際に触れることで堪能できます。 個人的には、ドロップシャドウやグラデーションの色合いが素晴らしいと思う。 CSS3プロパティジェネレーター フォトショップのような感じでグラデーションが細かく設定出来ます。これもCSS3の特徴ですね。 Photoshopライクな操作で手軽に作れるCSS3ジェネレーター CSS3ボタンのサンプル集 building beautiful buttons with css gradients こ
CSS3 marquee - CSS3ウェブブラウザー実装メモ - 血統の森 web実験小屋
2015年09月追記：2014年10月にCSS Marquee Module Level 3はW3C Working Group Noteとして発行され、公式に廃止されています。以下の記述は歴史的経緯の参考情報としてそのまま残しておきます。 作成：2008-06-15 更新：2014-04-08 最終更新：2015-10-04（本文そのままのマイナーな変更） CSS3仕様としての遍歴は、以前はCSS basic box modelで、現在はCSS Marquee Level 3として仕様が公開されているものの、2014年4月現在、少なくともWindowsで開発が継続されているブラウザで、marqueeプロパティが動作するブラウザは存在しない。従ってこのページは、歴史的な意味しかない。 Blinkで-webkit-marqueeは削除されている。Intent to remove: overf
もう、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
グラフィックデザイナーのためのCSSレイアウトメモTIPS「position : absoluteについて」
CSSレイアウト[TIPS] position : absoluteについて 「position : absolute」はpositionプロパティのなかの１つで、ボックス要素を絶対的な位置で配置する。 position:absoluteで指定されたボックスは、他の要素との関係は切り離され別物になる。親ボックス以外の他のボックス要素から影響を一切受けない。 position:absoluteには必ず「親」がいる。これが大事。 親にしたいボックスに「position：static」以外のposition指定をし（たいていはrelativeでOK）、そのなかに子を入れてposition:absolute指定をする。「top」「bottom」「left」「right」の値は、親ボックスからの距離。 親ボックスを指定しなければ「ブラウザウィンドウ」が親になる。 結論から言うと、親ボックスが「ブラウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
