サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 Theprinter is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。CSS @media print { section { display:block; page-break-b
米Googleは2月5日（現地時間）、クラウドストレージサービス「Googleドライブ」にWebホスティング機能を追加したと発表した。 使い方は以下の通り。Googleドライブに新規フォルダを作成し、公開設定にする フォルダにWebページを構成するHTMLファイルやCSSファイルなどの一式をアップロードする フォルダ内のHTMLファイルを開く 編集ページのメニューバーにある「プレビュー」をクリックする（下図A） 表示されたページのURLが公開ページのURLになる（下図B）
2014年8月17日 Webサイト制作, 便利ツール グラフィックデザイナーさんの中にはWebデザインに挑戦したいと思っている人もたくさんいると思います。それでもなかなか一歩踏み出せないのはマークアップやコーディングがなんだか難しそうだからではないでしょうか？先日、ロンドンで出会ったグラフィックデザイナーさん達と話して、「タグの文字列を見ただけで蕁麻疹が…」というように食わず嫌いのソースコード恐怖症な方が多いようで、どうにかしてその思いを払拭できないか？Webデザインの楽しさを伝えられないか？と思い、印刷デザイン感覚でWebサイトが作れる「Adobe Muse」を紹介しようと思います。 ↑私が10年以上利用している会計ソフト！ Adobe Museとは？ 「Adobe Muse」はデザイナーさん達御用達のAdobeが提供する、印刷物をデザインする感覚でWebサイト制作できるアプリです。HT
Get 20+Creative Cloud apps and Adobe FireflycreativeAI. Get Photoshop, Acrobat Pro, {{premiere}}, and more apps plus Adobe Firefly standard and premiumcreativeAI features for images, video, and audio – all inCreative 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
アドビがオープンソースとして公開している「Brackets」は、HTML5とJavaScriptで作られたHTMLエディタです。アドビ自身はBracketsについてブログやプレスリリースでのアナウンスは何もしておらず、Github上にAdobeのコードとしてひっそりと公開されています。 アドビには統合的なWeb開発環境として確固たる地位を持つDreamweaverがありますが、Bracketsの画面を見るかぎり、目指すものはDreamweaverを置き換えるようなものではなく、もっと直感的で軽くシンプルなHTML/CSS/JavaScriptエディタを実現しようとしているように見えます。 Bracketsはまだ開発が始まったばかりで、それほど多くの機能が実装されているわけではありません（実際に起動してみましたが、短時間では使い方もよく分かりませんでしたし……）。今後もう少し機能が追加されて
このブログをお読みの方には既に不必要かもしれませんが、XHTML 1.0 とCSS 2.1 の入門記事です。 社会人のためのWebデザインスクール 用に作成したプレゼン資料をもとに記事にしています。 授業の時は、先にこの話をしてから XHTML を書いてもらうのではなく、先にHTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる を読みながら XHTML とCSS で簡単なページを作成してからこの話をしています。 その理由としては、HTML や XHTML を1度も書いたことがない方に「ブロックレベル要素」や「インライン要素」、CSS の「セレクタ」等の話をしても何のことか分かりにくいだろうと考えているからです。 ※この記事は2012年に執筆したものです。現在の 社会人のためのWebデザインスクール では、HTML・CSS コーディングについては
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。HTML TidyCSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
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 が使われて
Crescent Eve はシンプルなエディタです。 こだわりの基本機能とHTML編集機能を持っています。 【雑談】 ある日のふとした疑問 ～HTMLを書く道具 ～ ある日、メモ帳等のテキストエディタでHTML書いている人が意外に多いことに気がつきました。 「多機能で優秀なHTMLエディタは沢山あるのに、なぜかな」 「もしかして、軽くてシンプルなSDI形式のHTMLエディタが求められているのだろうか」 「よし、作ってみよう！」 「あくまでシンプルに、テキストエディタとしても使えるようにして、タグはキーボードから自然に入力補完できるようにしよう」 「手作業でタグを打ち込んだら間違いが出るから、文法チェック機能をつけよう」 「文字コードの自動認識は、絶対失敗しないようにしよう」 ・・・というような考えからCrescent Eveを開発することにしました。 その後 公開以来、多くの方に好評を
Adobe Animate UserGuide Introduction to Animate What's New in Animate Visual Glossary Animate system requirements Animatekeyboard shortcuts Work with Multiple File Types in AnimateAnimationAnimation basics in Animate How to use frames and keyframes in Animate Frame-by-frameanimation in Animate How to work with classic tweenanimation in Animate Brush Tool MotionGuide Motion tween and ActionS
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+
【追記】HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
超初心者でも大丈夫JavaScriptを使ってみようHTMLにプラスする機能として、動きをつけるのが、JavaScriptです。現在のWebページ作成に欠かせないものになっています。Webサーフィンをしていると、背景に雪が降っていたり、時計が動いていたり、文字がいろいろ変化したりと、楽しいページを見かけます。また、画面上でクリックするとそれに反応してメッセージを表示したり、入力フォームで入力し、ボタンをクリックすると、それによって何らかの処理がなされるようなページもあります。それらの多くは、JavaScriptを使っています。ブラウザに拡張する機能を追加することなく、特別なソフトを使う必要もなく今まで通り、メモ帳でHTMLファイルの中に直接JavaScriptを記述するだけです。JavaScriptを宣言すれば、ブラウザが<script>タグと認識し実行してくれます。HTMLでペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
