CSSの読み込みを高速化するための5つのポイント
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
GoogleドライブにWebホスティング機能が追加
米Googleは2月5日（現地時間）、クラウドストレージサービス「Googleドライブ」にWebホスティング機能を追加したと発表した。 使い方は以下の通り。 Googleドライブに新規フォルダを作成し、公開設定にする フォルダにWebページを構成するHTMLファイルやCSSファイルなどの一式をアップロードする フォルダ内のHTMLファイルを開く 編集ページのメニューバーにある「プレビュー」をクリックする（下図A） 表示されたページのURLが公開ページのURLになる（下図B）
Create Websites Without Writing Code Using Adobe Muse
2014年8月17日 Webサイト制作, 便利ツール グラフィックデザイナーさんの中にはWebデザインに挑戦したいと思っている人もたくさんいると思います。それでもなかなか一歩踏み出せないのはマークアップやコーディングがなんだか難しそうだからではないでしょうか？先日、ロンドンで出会ったグラフィックデザイナーさん達と話して、「タグの文字列を見ただけで蕁麻疹が…」というように食わず嫌いのソースコード恐怖症な方が多いようで、どうにかしてその思いを払拭できないか？Webデザインの楽しさを伝えられないか？と思い、印刷デザイン感覚でWebサイトが作れる「Adobe Muse」を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ Adobe Museとは？ 「Adobe Muse」はデザイナーさん達御用達のAdobeが提供する、印刷物をデザインする感覚でWebサイト制作できるアプリです。HT
Adobeアカデミックストア
Get 20+ Creative Cloud apps and Adobe Firefly creative AI. Get Photoshop, Acrobat Pro, {{premiere}}, and more apps plus Adobe Firefly standard and premium creative AI features for images, video, and audio – all in Creative Cloud Pro. Includes: https://main--cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/acrobat-pro-40.svg Acrobat https://main--cc--adobecom.aem.page/cc-shared/assets/i
アドビ、オープンソースのHTMLエディタ「Brackets」を公開。まだまだ開発中
アドビがオープンソースとして公開している「Brackets」は、HTML5とJavaScriptで作られたHTMLエディタです。アドビ自身はBracketsについてブログやプレスリリースでのアナウンスは何もしておらず、Github上にAdobeのコードとしてひっそりと公開されています。 アドビには統合的なWeb開発環境として確固たる地位を持つDreamweaverがありますが、Bracketsの画面を見るかぎり、目指すものはDreamweaverを置き換えるようなものではなく、もっと直感的で軽くシンプルなHTML/CSS/JavaScriptエディタを実現しようとしているように見えます。 Bracketsはまだ開発が始まったばかりで、それほど多くの機能が実装されているわけではありません（実際に起動してみましたが、短時間では使い方もよく分かりませんでしたし……）。今後もう少し機能が追加されて
10分くらいで分かるXHTML+CSS
このブログをお読みの方には既に不必要かもしれませんが、XHTML 1.0 と CSS 2.1 の入門記事です。 社会人のためのWebデザインスクール 用に作成したプレゼン資料をもとに記事にしています。 授業の時は、先にこの話をしてから XHTML を書いてもらうのではなく、先に HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる を読みながら XHTML と CSS で簡単なページを作成してからこの話をしています。 その理由としては、HTML や XHTML を1度も書いたことがない方に「ブロックレベル要素」や「インライン要素」、CSS の「セレクタ」等の話をしても何のことか分かりにくいだろうと考えているからです。 ※この記事は2012年に執筆したものです。現在の 社会人のためのWebデザインスクール では、HTML・CSS コーディングについては
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ - てっく煮ブログ
Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − ＠ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて
シンプルなテキスト・HTMLエディタ Crescent Eve (フリーソフト)
Crescent Eve はシンプルなエディタです。 こだわりの基本機能とHTML編集機能を持っています。 【雑談】 ある日のふとした疑問 ～ HTMLを書く道具 ～ ある日、メモ帳等のテキストエディタでHTML書いている人が意外に多いことに気がつきました。 「多機能で優秀なHTMLエディタは沢山あるのに、なぜかな」 「もしかして、軽くてシンプルなSDI形式のHTMLエディタが求められているのだろうか」 「よし、作ってみよう！」 「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」 「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」 「文字コードの自動認識は、絶対失敗しないようにしよう」 ・・・というような考えから Crescent Eveを開発することにしました。 その後 公開以来、多くの方に好評を
ウェブページの読み込み時間を短縮する方法を提案してくれるサービス「Page Speed Online」 | ライフハッカー・ジャパン
「Page Speed Online」は、ウェブページの読み込み時間を短縮するにはどうしたら良いのか、具体的に提案してくれるサービスです。解析したいページのURLを指定するだけで、すぐに利用できますよ。 以下に使ってみた様子を載せておきます。 まず、Page Speed Onlineへアクセスしましょう。 解析したいページのURLを入力してしばらくすると、このように、100点満点で何点かを示してくれます。 それだけではありません。左側に行うべき対処法がカテゴリ分けされており、参照できます。 たとえばこのように、画像の圧縮について提案してくれます。どれくらい削減できるかが具体的に示されていて分かりやすいですね。 ウェブページの読み込み時間が気になる方は、是非試してみましょう。 Page Speed Online （カメきち）
Create and publish HTML5 Canvas documents in Animate
Adobe Animate User Guide Introduction to Animate What's New in Animate Visual Glossary Animate system requirements Animate keyboard shortcuts Work with Multiple File Types in Animate Animation Animation basics in Animate How to use frames and keyframes in Animate Frame-by-frame animation in Animate How to work with classic tween animation in Animate Brush Tool Motion Guide Motion tween and ActionS
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
犯してはいけない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属性を省略することができます。写真共有サイトにユーザーが画像を
初心者の Simple・JavaScript
超初心者でも大丈夫 JavaScriptを使ってみよう HTMLにプラスする機能として、動きをつけるのが、JavaScriptです。現在のWebページ作成に欠かせないものになっています。Webサーフィンをしていると、背景に雪が降っていたり、時計が動いていたり、文字がいろいろ変化したりと、楽しいページを見かけます。また、画面上でクリックするとそれに反応してメッセージを表示したり、入力フォームで入力し、ボタンをクリックすると、それによって何らかの処理がなされるようなページもあります。それらの多くは、JavaScriptを使っています。ブラウザに拡張する機能を追加することなく、特別なソフトを使う必要もなく今まで通り、メモ帳でHTMLファイルの中に直接JavaScriptを記述するだけです。 JavaScriptを宣言すれば、ブラウザが<script>タグと認識し実行してくれます。 HTMLでペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーター
ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox
Google Chrome Developer Tools入門 in DevFestX Sapporo
Google Swiffy
複数バージョンのIEでデザインを確認できる「SuperPreview」が更新、IE9に対応