はてなブログのAMP対応で学ぶウェブサービスのAMP対応 - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
Excel(csv)から一瞬にして大量のhtmlを作成する方法.vol2 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
先日もご紹介しましたexcelからhtmlの変換ソフトですが、またまた便利なフリーソフトがありましたので紹介したいと思います。作業としては前にご紹介したこととほぼ同じです。テンプレートとなるhtmlを作成し、excelの1行目にタイトルを挿入したい位置に記入して、あとはフリーソフトを使って1発変換すれば、一瞬にして大量のhtmlを作成することができます。もしもドロップシッピングの商品CSVを利用して実施に作業した内容をメモしておきます。 下記のサイトよりフリーソフトをダウンロードします 全体で230KBぐらいなのでお手軽にダウンロードできます。bptran.exeこれがフリーソフトになりますので、こちらを使用することになります。（それ以外は、ソフトの解説やサンプルなどが内包されています。） Excelファイルを整理します もしもドロップシッピングのCSVより必要な部分を抜き出し、整理します
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
もしも10分の1の行数でHTMLが書けたら
Zen-Codingとは 1年ほど前から、Zen-Codingが話題になっています。Zen-Codingを使うと、特定の省略された記法を展開できます。この展開が非常に強力で、ちょっとしたHTMLを記述するのであれば、Zen-CodingでHTMLやCSSのマークアップを効率的に行えます。 Zen-Codingはさまざまなテキストエディタに対応したプラグインとして提供されています。プラグインには、公式対応しているものと、サードパーティの開発者が作成したものがあります。 それぞれのプラグインによって、実装機能が異なる場合があります。これらのプラグインの詳細はZen-Codingの公式サイトから確認できます。 基本的な使い方 ここからはZen-Codingの基本的な使い方を解説します。Zen-Codingをテキストエリアで利用できるサンプルを用いて、実際に試しながら読み進めてください。テキストエ
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちら Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事 Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
SEOの基礎(4) – 見出し及びAlt属性に関して知っておくべきこと ｜ SEOモード
SEOの基礎、パート4です。 今回は見出し、つまりh1-h6タグと、imgタグのalt属性に関する記事になります。 以下はStoney deGeyter氏による「SEO 101 – Part 4: Everything You Need to Know About Headings and Alt Attributes」の全訳になります。もし誤訳や解釈のミスなどがありましたら、ぜひご指摘ください。可能な限り修正していきたいと思います。 SEO101 – Part4: 見出し及びAlt属性について知っておきたいこと 以下のシリーズはニューヨークでL’Oreal主催の美容系ブロガーグループに行ったプレゼンテーションから転用したものである。プレゼンテーションのほとんどは、ブログを検索エンジンとユーザーに優しいものにする方法について用意されたものだが、ここで私はあらゆる業界をまたがって製品やサービ
自動でリンク切れチェックし、Webサイトの品質を保つ便利ツール8選 | 人手に頼らないWebサイトの戦略的品質管理指南
Webサイトの品質維持には、リンク切れや不要なファイルを少なくすることが重要です。今回は、Webサイト品質の問題点発見とその解決へのスピードを格段に上げる自動チェックツールを8つ紹介します。日本アイ・ビー・エムが提供するIBM Rational Policy TesterやW3Cリンクチェッカー、W3Cマークアップ検証サービス、リンク切れカッター、Web Developerなどのフリーツールも紹介 数百ページ～数万ページというWebサイトでは、人的な検査だけですべての問題点をチェックするのは実質的に不可能に近い。また、ページ数が少なくても、チェック漏れがあっては意味がない。 自動チェックツールを利用することで、問題点発見とその解決へのスピードは格段に上がる。現代のWebサイトでは、理想的な品質管理を実現するには、何らかのツールの利用は必須だともいえる。 最も効率良く診断できる専門ツール手前
HTMLチェックとかリンク切れチェックでこれくらいは知っておきたいツール | 初代編集長ブログ―安田英久
Web担のサイトを少しずつ改善するなかで、久しぶりにサイト全体にわたってHTMLが正しく使われているかをチェックしてみました。結論としては、やっぱり、ちゃんとHTMLチェックとかしないとダメですね……。 というのも、先日、Operaでだけトップページの表示が崩れるという現象があったのです。Web担では、記事ごとのHTMLは基本的にすべてHTMLチェッカーを通して確認していて、記事本文のHTMLは公開前にチェックされています。しかし、一覧ページに表示されるHTMLの部分（「ティーザー」と呼んでいます）がそのチェックフローから漏れていたことが判明したのです。早速、社内で使っている記事HTMLチェックの仕組みを修正して、ティーザーもHTMLチェックされるようにしました。 そういうことがあったので、サイト全体のテンプレートなどもHTMLチェックを通してみました。もともと、Web担のテンプレートのH
Another HTML-lint
Another HTML-lint は基本的にはフリーです。非営利目的ならば無断で再利用再掲載して構いません。その際、プライマリサイトへのリンクを削除してはなりません。サイト管理者の所在と問合せ先を明示してください。広告表示もしないでください。 営利目的に利用する場合はこちらを読んで利用料をお支払いください。 広告表示を伴うサーヴィスを展開することは禁じます。 このゲートウェイにリンクを張るのも自由になさってください。リンクの連絡は不要です。 注意: わたしは、場末の一介のやくざなプログラマであり、HTMLの専門家でも何でもありません。CGIの専門家でもありません。インタネットの専門家でもありません。HTMLなどに関する専門的な質問にはお答えできませんが、メーリングリストに投稿すればどなたか答えてくださるかも知れません。 なお、わたしへの匿名のダイレクトメールは受け付けません（スパム扱いで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SitePoint CSS Reference