『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪

Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 <a href="{URL}" target="_blank" rel="noopener">LINK TEXT</a> のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without this, the new page can access your window object via window.opener. Thankfully the origin security model of the web prevents it reading your page, but no-thankfully some legacy APIs mean it

html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開

Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. ////////////   ////////////   ////////////   ////////////   ////////////   ////////////   ////////////  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++  ++++++{{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}  {{{{ }}}}     ../../    ../../    ../../    ../../    ../../    ../..

最新版のWebブラウザー「Internet Explorer 11」（以下、IE）は、2013年10月に正式リリースされ、その後のアップデートでも機能が少しずつ強化されてきた。例えば、2014年4月のWindows 8.1 Update 1提供と同時に機能が強化され、2014年8月のアップデート（August Update）でもさらに更新されている*1。 *1　以前のIEでは、IE5／IE6／IE7のようなメジャー・バージョンアップのタイミングで新機能が搭載されていたが、現在のIEでは他のマイクロソフト製品と同じく、1年の間に何度もアップデートが行われるようになっている。 そのIEにも、Chromeのデベロッパー・ツールと同様に、Web制作者向けのツール「F12開発者ツール」が標準搭載されており、そのツールもIE10以前からIE11のアップデートで大幅に変更されている。そこで本稿では、強化

古くはIE独自仕様のime-mode、最近ではHTML5で実装された多様なtypeなど、inputの入力方法を制御するための方法がいくつかあります。 しかし、ブラウザーによって利用可否が異なります。日本語特有の悩みということで、検索してもあまり情報が出てこないので、調査をしてまとめてみました。 結論から言うと、残念ながら入力方式を完全に制御するクロスブラウザな方法はありません。

公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化したJavaScriptのコードに、インデントや改行を付けて、分析したり確認しやすく整形するツールです。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。

iTunes（App Store）へのリンクを一括管理したいからリダイレクトさせてるんだけど iPhoneのSafariからだと開けないなんてことがあります。aタグにtarget=”_blank”を設定してるとダメみたい。 じゃぁ外せばいいじゃん と思われるかもですけど、 「はずすとサイトから離脱しちゃうじゃまいか」とか 「呪われているので外せません」的な理由があってはずせなかったり。 例としてかみあぷのWebサイト（http://www.appps.jp/）のリンクを見てみましょう。 マンガボックスのところのボタンとアイコンの２つにiTunesへリダイレクトするリンクがついているのですが、 アイコンの方にはtarget=”_blank”が入っています。ですのでSafariでアイコンの方をタップすると、 ガショウィーン、サッ、ピタッと真っ白なページで止まってしまいます。 これはくまったくま

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

みなさん、こんにちは。hifive開発チームの横山です。第2回と第3回では、HTML5で実現可能な表現や機能について詳しく解説しました。これらを用いると、業務システムに従来のWebシステムでは実現できないレベルの高い操作性を持たせることができます。直観的に操作できるUIにより誤操作を防止しやすくなり、ユーザー教育のコストも減らせるのではないか---。そんな期待を持った人も多いのではないでしょうか。 しかしながら、そうしたリッチなUIを備えた業務システムの開発は、単純な画面遷移を繰り返すことで業務を進めていく従来型Webシステムと比べて、開発プロセスを適切に管理し、予定通りの工数で開発を進めることが難しくなりがちです。 そこで今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる「成功させるために考慮すべき点」や「失敗しないための開発の進め方」「役に立つツールや

みなさん、こんにちは。hifiveエヴァンジェリストの中津川です。前回はHTML5で加わった新しい仕様や機能のうち、業務システムを開発するうえで役立つものを中心に取り上げました。今回はさらに掘り下げて、業務Webアプリケーション開発という観点からHTML5がどう活用できるのかを紹介します。 企業システム、とりわけ情報系システムにおいては、日々蓄積される大量の業務データに対して、仮説に基づき様々な観点から情報の抽出が行われています。HTML5を使えば、こうして抽出した情報を「チャート（グラフ）」や「グリッド」、「図形」などを用いて可視化することが比較的容易に実現できます。これら三つはデータ可視化における「三種の神器」と言えるものです。以下、それぞれ詳しく見ていきましょう。 1.チャート（グラフ） 業務で発生するデータを可視化する際には、「チャート（グラフ）」がよく使われます。棒グラフや円グラ

現地時間の2012年10月1日、日本時間では10月2日にGoogleから新たなWebサイト向けツール「Google Tag ManagerTM」が公開されました。 これはGoogleアナリティクスTMやコンバージョンタグなどといった「HTMLに差し込んで使用するコード」をHTMLから外部化して、一元管理するためのいわゆるタグマネジメントツールです。 今までのGoogleのツールと比較すると少々使い方などが特殊で、人によっては分かりづらく感じる方もいらっしゃるかと思いますのでざっくりとした紹介をしてみようと思います。 「HTMLに埋め込むコード」を一元管理するためのツール 具体的には、外部ツールが生成したコードをまとめる 実際に使ってみよう 使用準備（初期設定） Google Tag Managerコードの埋め込み 既存HTMLから埋め込んでいる他ツールのコードを切り出し 「タグ」と「ルール

プレースホルダー (placeholder) の表示とCSSでの装飾方法プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。 プレースホルダー (placeholder) とは placeholder (プレースホルダー) とは、何も入力されていない状態のテキスト入力欄に最初から薄く表示されている案内文字のことです。HTMLではplaceholder属性を使うことで簡単に表示でき、CSSで色を変えることもできます。プレースホルダとして表示されて