これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]
運営しているホームページやWebサイトで、OGP設定は行っていますか？ OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。 そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。 OGPとは OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。 上の赤枠のように表示を目立たせることが可能で、URLだけの場
![★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ded3c626dd8aed6f4410bbdd0395c88db2470395/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F610%2Fog_image%2Fdefault-bdf2027367621662f48bdc85408bf81b.jpg)
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
リニューアルこそ事前の設計が最重要！ホームページのリニューアル前に読んでおきたい良記事15選
Webサイトを長年運営していると、デザインの流行り廃り、改善のために修正が必要になるのは当然です。 それが大規模になれば大幅なリニューアルを検討する必要もあるでしょう。 特にリニューアルはトラブルがつきものです。そのため、事前に要件定義として新たなデザイン案や仕様など細かく決めておきましょう。 今回は、Webサイトのサイトリニューアルする際、参考になる記事をまとめてご紹介します。 リニューアルを成功させるためにもぜひご一読ください。 サイトリニューアルの参考になる良記事まとめ 1.目的を達成させるための最適なWebサイトのタイプ(種類) http://creators-manual.com/kind_site/ 単にWebサイトを作ると言っても、目的によって最適なタイプは異なります。 せっかくサイトリニューアルをしてもWebサイトの目的につながらなければ意味がありません。 この記事では、W
実務でかなり役立つ！コーダー必携の書「コーディングWebアクセシビリティ」の無料版が公開中
以前紹介した「コーディングWebアクセシビリティ」の電子書籍版が、ようやくリリースされました！ リリースに伴って無料版が公開されており、これがなかなかのボリュームです。Web制作に携わる人、特にコーディング関係者はこの機会に読んでおくことをお勧めします。 電子書籍版コーディングWebアクセシビリティ 本書はSmashing Magazineのアクセシビリティ担当：ヘイドン・ピカリング著「Apps For All(2014)」の訳書で、翻訳はBAの太田さんと伊原さんが監修したものです。 BAの二人は、僕の元同僚。 僕が知る中ではアクセシビリティといえば太田さん、太田さんの存在自体がアクセシブルと言ってもいいかもしれません。 そんな造詣が深い太田さんと伊原さん二人の監訳は訳書にありがちなぎこちない日本語ではなく、制作現場の生きた言葉で非常に分かりやすかったです。 電子書籍版では、4つのフォーマ
パンくずリストを構造化データにする方法とSEO効果 | SEO内部対策についてまとめ【基本の対策を詳細解説】
Googleは、schema.org（スキーマ）のサポートを去年から開始しています。そして、GoogleはData-Vocabulary.orgの開発を終了していることから、すでに構造化データをschema.orgで記述しているサイトも多いのではないでしょうか？schema.orgを導入するメリットとしては、Google、Yahoo、Bingの3社が共同で取り組んでいることが挙げられると思います。それによって、それぞれの検索エンジンにサポートされ、検索結果に表示されるスニペットを装飾することができます。（リッチスニペット）ということで、これから構造化データを導入する場... パンくずリストを設置する理由 まず、パンくずリストを設置する目的とその理由についてご説明します。 それは大きく分けて、ユーザビリティとクローラビリティの二つから考えられます。 では、ひとつずつご説明します。 ユーザビリ
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
HTML5プロフェッショナル認定資格がIT技術者・非技術者を問わず就職・転職に効く理由と背景とは
HTML5のスキルが有望なのは技術者も非技術者も同じ ――業務システム開発者がHTML5を学ぶメリットは何でしょうか。 和田：一番大きいのは「業務の幅の広がり」です。HTML5では、これまでサーバーサイドで行っていた処理をクライアントで行う機能も備えています。また、IoT（モノのインターネット）やVR（バーチャルリアリティ）、ゲームアプリといった領域まで手がけられるようになります。逆に言えば、これからはHTML5の習熟度が、IT技術者にとって大きな差別化要因となり得ます。 たとえば、業務システム開発者を多数擁する、あるSI企業では、HTML5で業務Webシステムを開発するプラットフォームを提供しています。これは会社自らツールを提供して、クライアントサイドの開発を効率化するとともに、サーバーサイドが主体だった自社の技術者のスキルをクライアントサイドに広げているのだと思います。このほか、インフ
Joomla!の道しるべ - Joomla!の使い方、Tips、エクステンション紹介・日本語化など
メール不達のお知らせ 2018年11月1日まで、本サイトのお問い合わせメールが機能しておらず、メールを受け取ることができませんでした。この期間内にお問い合わせ頂いた方は、大変お手数ではございますが、再度お問い合わせページからご連絡ください。
Web制作におけるセキュリティの基礎知識（後編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのなかみーです。 昨日の「【新人ディレクター向け vol.7】Web制作におけるセキュリティの基礎知識（前編）」では、攻撃されたときに何が起こってしまうのか、ということをサービスの運営者と利用者の立場でそれぞれ書いてみました。 今回は少し突っ込んで、攻撃手法とその対策について書いてみようと思います。 （まずは敵を知ろうぞ） 代表的な攻撃手法 SQLインジェクション クロスサイトスクリプティング クロスサイトリクエストフォージェリ ディレクトリトラバーサル OSコマンドインジェクション HTTPヘッダインジェクション フォースブラウジング ブルートフォース クリックジャッキング Webサイトへの攻撃に限って書いていますが、代表的なものだけでもこれくらいあります。なんて世の中なんでしょうね。 それぞれどんなことがされちゃうのか、代表的なものを抜粋して少しだけ解説しますね
Web制作会社必見！損しないWeb制作業務委託契約書の作成方法
”Web制作業務委託契約書”の重要性や利用目的はあまり理解されていません。 「あの時契約書を作っておけば・・・」 既にクライアントさんとトラブルになったWeb制作会社様が、相談時にこのようなことを仰ることがあります。 ビジネスではスピード感も大事ですし、トラブルが起きないことを前提に取引を進めていることも多いと思うので、制作に関する契約書を作成しないこともあるでしょう。 しかし気をつけて下さい。 契約書作成の手間を省いてしまうと、トラブルとなった場合に、その手間より多大な負担がのしかかってきます。 そのような事態を避けてもらえるよう、今回はWeb制作会社様向けに、業務委託契約書を作成方法について、ベリーベスト法律事務所の弁護士が書きました。 [nlink url=”https://best-legal.jp/outsourcing-contract-template-582/”] １、We
Web制作における契約書の種類とその範囲 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Facebookの昔の写真に「いいね！」を押されて少し炎上した中水です。 投稿年月日がどれだけ古くても、誰かに「いいね！」をされるとタイムラインのトップに上がってくるんですね。LIGメンバーのおかげで、Facebookからのアラートが数日間止まりませんでした。 さてさて。 今回は、新たにWebディレクターとなった方たちに捧げる【新人ディレクター向け】と題したシリーズの、第1回目です。 全6回でお送りする予定ですので、お付き合いください。 Webディレクターが求められる3つのこと Webディレクターは幅広い仕事をこなすことが求められますよね。まずは大きく3つに区切ってみます。 制作について 法律について 財務について けっこうざっくり区切ってみましたが、どれもこれも重そうな内容ですね。 今回は、制作における契約書についてしぼって説明していきたいと思います。 まずは制作のフローを確
Webディレクター必見！WBSの書き方
プロジェクトに関わるタスクを洗い出したリストを、WBS（ワーク・ブレイクダウン・ストラクチャー）と呼びます。WBSは、見積もりやスケジュール、スタッフのアサインの根拠としてその都度作成・修正します。 WBSは、正確な予算管理と遅延のないスケジュール管理のためには必須の存在です。WBSがプロジェクトの成功を左右することもあるため、Webディレクターには精度の高いWBSを作成する責任があります。 プロジェクト計画書の作成 WBSは、プロジェクト計画書を根拠に作成すると、より精度の高いものになります。プロジェクト計画書とは、提案や打ち合わせを経て合意したプロジェクトの範囲（スコープ）をまとめた文書のことです。プロジェクト計画書は、その後作成するスケジュールなどと共に、クライアントに確認を取り、認識にズレが生じないようにすることが重要です。 そして、プロジェクト計画書をもとに、プロジェクトスコープ
Web制作で知っておきたい外注管理のコツ
外注とは、会社で請けたプロジェクトの一部を外部に委託することです。プロジェクトの遂行に外注を使うことはよくあります。しかし、Web制作には、業界標準となる厳密な作業フローや工業規格のような基準はないため、外注先が社内標準と同じ作業フローや品質で制作を進めるとは限りません。 外注管理は、そうした双方の認識のズレなどによってトラブルが起きたり、品質の低下を招いたりすることのないように、外注のスキルやスケジュール、コストなどを総合的に管理することです。 発注前の注意点 プロジェクトの外注は、まず依頼先の選定から始まります。選定の際は、対応可能なスキル、成果物と価格の実績、関わった工程などの詳細など十分に把握し、必要なスキルの有無を確認することが重要です。 依頼を決定したら、提案依頼書（RPF）などで概要を伝え、対応の可否を確認した上で見積もりを依頼します。その際には、業務の範囲だけでなく工程や、
HTML5でh1タグを正しく使う - Qiita
それぞれの文書のアウトライン（その見出しとセクションの構造）が関係する限りにおいて、次の2つの断片は、セマンティックに等価である： <body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body> <body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文
![[HTML5]アウトラインで迷わない！ sectionと見出しについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
HTML5 に於けるセクショニングについて - HTML 入門
ここでは、HTML5 で導入されたセクショニングに関して解説します。 HTML 文書に於けるセクションとは。 セクションとは、文書の一節を指します。 文書を適切に節に分割し、 場合に依っては分割された節も更に小節に分割し、 それらに見出しを与える事で、 機械にも人間の読者にも論理の流れが把握し易くなります。 特に視覚障害者が音声出力でウェブ文書を読む場合、前から順番に読んでいるとどうしても時間が掛かってしまいます。 適切に節立して且つ各節に適切な見出しが設けられていれば、それを診て読み飛ばせるかどうかを判断出来るようになります。 これは健常者にとってもモバイル環境で閲覧している場合に有用になるかも知れません。 見出しに依るセクション分け。 HTML5 では、見出し(<h◯>要素)に依りセクション分けが自動的に行われるようになっております。(※ 1) 先ず、セクション内で初めて現れる見出しが
無料ホームページ制作・作成なら作り方かんたんなペライチ
ペライチだけでなんでもできる 誰でも簡単に売上アップを 目指せるホームページ スマホ対応の本格ホームページがあっという間に。知識がなくても簡単な操作で作成が可能。不安な方へのサポートも充実。フォーム、決済、予約、メルマガ等、ビジネスに必要な機能が低価格でオールインワン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
記事リリース前の最終チェック！編集方法を具体的に解説 by トイロハ編集部
Googleリッチスニペット対策！初心者向けSchema.org解説！
