DirtyMarkup Formatter - HTML, CSS, & JavaScript BeautifierDirtyMarkup: HTML Beautifier DirtyMarkup is the web's premier HTML beautifier. Used by millions of users around the world, our site and API has formatted HTML, CSS, and Javascript across nearly a billion lines of code.
スクロールすると「ページトップへ戻る」ボタン出現｜お小遣い稼ぎSite
一定の量をスクロールすると、右下に「PageTop」ボタンが出現。 クリックすると、ぬるっと一番上まで戻ってくれるボタンを設置します。 Googleが用意したjQueryを読み込む <head></head>の中に以下を追加。 本体をDLして自分でアップロード・読み込んでもいいけど、グーグルさんが用意したjQueryを読み込んだほうが速いです。 （ネットサーフィンをしてると大体コレを踏んでいて、パソコン内にキャッシュが残っていることが多いので） HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> jQuery <head></head>の中に以下を追加。 6行目の「600」は、600pxスクロールしたら「ページトップ」が出現。 13行目の「500」は、上部ま
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - SHIROMAG
私のブログでは音楽を扱った記事が多いので、大量にYouTubeを埋め込むことが多々あります。 しかし、あまりにたくさんのYouTube動画を埋め込むと、ページの読み込みに時間がかかってしまいます。 そんな悩みを抱えていたある日、下のような記事を発見しました。 追記:元ネタのブログが消えてしまいました。 おお！これこそ、私が探し求めていた記事だ！ この記事で紹介されているコードを参考に、もっと利用しやすいコードに修正してみました。 クリックすると動画が再生されるのが分かるように マウスホバー時のエフェクト YouTubeとは関係ない画像まで消えてしまう問題を解決 以上の3点を実装できるように、コードを改良しました。ブログ主の錠前さんの許可はいただいております。 YouTubeを大量に貼っても重くならないコード [はてなブログでの利用方法]まずはこちらのCSSをデザイン→カスタマイズ→デザイン
text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 - ディレイマニア
長らくtext-indent:-9999pxでテキスト飛ばして画像に置換する方法を使い続けてきました。 しかしこの手法を使うのはあまりよろしくないと言われています。 というわけで、画像置換のときに使える代替案をご紹介します。
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
備忘録 - 本blogをHTML5にするためにやったこと : 404 Blog Not Found
2011年12月15日20:00 カテゴリTipsiTech 備忘録 - 本blogをHTML5にするためにやったこと 正確には、「本blogをIEから見てHTML5に見えるようにするためにしたこと」ではありますが。 レシピ 二つだけ <!DOCTYPE html>を<html>の前に追加 <head>内に以下を追加 <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <![endif]--> 本来であれば1.だけでIE9はHTML5モードになってくれるはずなのですが、2.がないと駄目でした。実のところHTML5では2.はinvalidなのですが、重要なのはvalidityではなくブラウザーの挙動なので。Chrome Frameでも利用されているテクニックですし。 internet ex
HTML5でサイトをつくろう
若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか？どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
HTML5を使ったファイルアップロード用プログラム集:phpspot開発日誌
10 HTML5 File Upload with jQuery Example HTML5を使ったファイルアップロード用プログラム集 プログレスバー付きや、デスクトップ等からのドラッグ＆ドロップ対応等、HTML5やjQueryを活用したアップローダーの例が公開されています。 プログラムのダウンロードも可能。アップロードはWEBサービスの昨今において必須の技術ですが、こうしたサンプルを見つつ実装方法について一考してみてもよさそうですね ファイルアップロードも昔は単調はフォームだったのが嘘に思えるぐらい進化してますね 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー 超シンプルな画像アップローダー＆画像シェアできるツール「imgur」 今だかつてない使いやすさでUIもクールなマルチアップローダー実装ライブラリ「Plupload」
MdN Design Interactiveにて『ゼロからはじめるHTML5でのサイト制作』連載スタートいたします | HTML5でサイトをつくろう
本日よりMdN Design Interactiveにて『ゼロからはじめるHTML5でのサイト制作』の連載をさせていただくことになりました。 以前雑誌web creatorsにて記事を執筆させていただいていたのですが、今回WEB版の方でHTML5をゼロから学べる連載をスタートいたします。 ゼロからはじめるHTML5でのサイト制作 目次：HTML5でサイトをつくろう！ゼロからはじめるHTML5でのサイト制作 第1回：HTML5でサイトをつくろう！xhtmlからHTML5へ 第2回：HTML5で使い方が変更されたタグをまとめよう（11月29日公開予定） 第3回：HTML5の新しい要素を使ってマークアップをしてみよう（12月12日公開予定） 本ブログと同じくHTML5といってもいきなりインタラクティブなページ作りとか飛躍せずにじっくり基本から行っていきますのでゼロからやってみようという人もよかっ
HTML5で制作された国内企業サイト20から現状の制作状況を知る!! | HTML5でサイトをつくろう
HTML5でのコーディング 最近、HTML5のコーディング案件に関わることがあったのですが、その時にHTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。 尚、サイトを調べていて気づいたのですが、現状(2011年8月)では宣言をHTML5にして内容自体は今まで通りdiv要素を使ってマークアップしているサイトが多いように感じました。新要素を多用して後から間違えが出てくるという可能性を考慮すると、とても理にかなっていると1人で感心してしまいました。今後この流れは変わると思いますが現状(2011年8月)では大切な考え方の1つだと思っています。 それともう１つ、多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。調べて見つけるとWEBの制作会社サイトであることが非常に多いように感じました。とても参考にさせていただきました。私も取り残されないように
HTML5に踏み出せない人に捧げる、HTML5を使う10の理由
HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 Top 10 Reasons to Use HTML5 Right Now [ad#ad-2] 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これからはHTML5 10. アクセシビリティ HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にrole
Facebookページをブログのようにボリボリ作れるサービスを作ってみた [ファンゲーター]：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ
要するにFacebookページの追加ページをブログのようにボリボリ作れるサービスです。 『「いいね!」を押さないと見えないページがあるfacebookページ=ファンゲート』を簡単に作れます。 通常必要なレンタルサーバーを借りる必要やスクリプトの設置がいりません。 プログラムやスクリプトを作る必要もありません。 Google様のクラウドサーバー(GAE)に設置します。 Google様のクラウドなので何百万アクセスが来ても自動的に負荷分散をします。 法人様のページでも使用できます。 無料です。 導入するとファンページにHTML編集画面が出てきますので、HTMLを編集したり、画像をアップロードしたりするだけです。 単純にFacebookページの配信サーバーにも使えます。 通常必要なIFRAMEのAppをファンページに乗せるために必要なクレジットカードによる本人認証もしないで作れます。こっち
![Facebookページをブログのようにボリボリ作れるサービスを作ってみた [ファンゲーター]：村上福之の「ネットとケータイと俺様」：オルタナティブ・ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/26932adb821eaf3a91b51e02a17c795c309cdb41/height=288;version=1;width=512/https%3A%2F%2Fblogs.itmedia.co.jp%2Fmt-static%2Fsupport%2Fassets_c%2Fuserpics%2Fuserpic-172-100x100.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブなイメージマップの作成 - Qiita
商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ
必ず覚えておきたいHTML5の特徴と新機能／HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向
浜 俊太朗のHTML5マークアップ移行ガイド
IBM Developer
