CSS3でHTMLの要素に滑らかなアニメーションをつけるためのチートシート | ライフハッカー・ジャパン
「CSS3 ANIMATION CHEAT SHEET」ではHTMLの要素に滑らかなアニメーションをつけられるCSSが公開されています。CSS3からアニメーションやキーフレームを指定できるようになり、JavaScriptを使わなくてもCSSのみでアニメーションが簡単につけられるようになりました。よく使われそうなアニメーションをひとまとめにしたCSSがダウンロードできます。 以下に使ってみた様子を載せておきます。まずCSS3 ANIMATION CHEAT SHEETへアクセスしましょう。トップにおじさんの絵がありますが、サンプルの動きに使われます。 アニメーション例はたくさんあります。よく使われるスライドイン・アウトを始め、拡大縮小やバウンドもありますよ。それぞれの項目をクリックすると、おじさんの絵が実際に動いて動作の確認ができます。 使い方は簡単で、配布されているCSSをダウンロードして
HTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイト「DevDocs」 | ライフハッカー・ジャパン
「DevDocs」はHTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイトです。MacにDashというドキュメントを高速に横断検索できるツールがありますが、それに似たサービスですね。オンラインで検索できるので、便利です。検索するとリアルタイムに検索結果が絞りこまれ、必要なドキュメントの内容が表示されます。 使うには、まずDevDocsへアクセスしましょう。左側のメニューに検索対象の言語が並んでいます。 プルダウンを開くとカテゴリごとにドキュメントが整理されています。左上の検索ボックスから対象のタグやメソッドを入力すると絞り込むことができますよ。高速に検索できるので、必要な情報がすぐに手に入るのがうれしいですね。ウェブ開発をしている方はドキュメントを読むことが頻繁にあると思います。DevDocsをブックマークしておくと、いざというときに便利ですよ。 DevDocs
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
HTML5のアニメーションを簡単に作成できるサイト「HTML5 MAKER」 | ライフハッカー・ジャパン
「HTML5 MAKER」はHTML5のアニメーションを簡単に作成できるサイトです。HTML5でアニメーションを作るのが簡単に行えますよ。ドラッグ＆ドロップで画像やテキストを追加し、アニメーションをつけることができます。PowerPointと似たような動作でHTML5のアニメーションが完成します。 以下に使ってみた様子を載せておきます。まずHTML5 MAKERへアクセスしましょう。登録不要で作成できるので、早速「CREATE ANIMATION」からアニメーションを作ってみましょう。 このように、画像やテキストを追加していきます。下部にアニメーションの設定がありますよ。開始時のアニメーションや終了時のアニメーションが設定できます。左側にスライド一覧があります。一つ前のスライドを複製できるので、連続したアニメーションを使うときに便利ですね。完成したら、「Save」するとHTML5形式でまる
GmailやEvernoteのテキストでもMarkdown! ブラウザ拡張機能『Markdown Here』 | ライフハッカー・ジャパン
Chrome/Firefox/Safari/Thunderbird：Markdownはコードを知らなくてもテキストを簡単にHTMLに変換できる素晴らしい方法だということを、以前「テキスト以上ワープロ未満：手軽に書式付きテキストを編集できる「Markdown」の魅力」という記事で紹介しました。 そんなMarkdownをGmailやPostboxのようなメールクライアントで使いたい場合、ブラウザ拡張機能『Markdown Here』がおすすめです。インストール後、ある程度まとまった文章を書いたら、該当部分を選択してブラウザ内に表示されているMarkdown Hereボタンをクリックします。それだけで、文章が簡単にHTML化されます。 また、メールクライアントだけでなくEvernoteやWordpressのようなWeb上のテキスト編集ツールで使うことも可能です。 Markdown Here |
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あ、これ便利！HTMLエンティティを簡単に見つけることができるオンラインサービス -Entity Lookup
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
IDEA * IDEA
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説