(株) ライトコードの宮田です。 前回は、Vueインスタンスを作成し、data に持たせた "Hello World" の文字列を表示するプログラムを作成しました。 今回は「ディレクティブ」と呼ばれる、Vue.jsが提供している特別な属性を利用したプログラムを書いてみましょう!
今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース(2008年1月)からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
CSSはWebページの見た目を整えるものですが、ちょっと違う使い方もできます。たとえば、予期せぬ横スクロールが発生した時、以下のようにすることで全ての要素のアウトラインが表示され、不用意にはみ出している部分が視覚的に分かりやすくなります。 * { outline: 2px solid red; } これを応用してタグの不適切な利用部分をハイライトできます。 このような不適切なタグ利用を検知して警告する「デバッグCSS」を作ってみました。このようなCSSをLintのようにする使い方は#lintHTMLwithCSSのハッシュタグで海外でも考案されています。仕様上許可されないものは赤色で点滅、ダメではないが、やらない方がベターなものは黄色で点滅するようになっています。 当記事では下記のデモを見ながらだと理解を深めやすいので、合わせて読むことをオススメします。 サンプルを別ウィンドウで開く コー
Native lazy-loading for <iframe> was added to the HTML standard today: https://t.co/KgO8lIBdEK Thanks @domfarolino for the heavy lifting with spec & tests 🎉 https://t.co/GLy6qHE7l5 — Simon Pieters (@zcorpan) July 8, 2020 YouTube 動画でネイティブ Lazy-load ネイティブ Lazy-load は、loading=lazy 属性を追加するだけで遅延読み込みを可能にします。 専用の JavaScript は不要です。 ブラウザの標準機能として Lazy-load をサポートします。 もとともは Chrome の独自機能として Google が開発しました。 Ch
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的(?)になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考: img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら? なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
どうも、まさとらん(@0310lan)です! 今回は、ごく普通の静的なWebサイトにユーザー認証機能を手軽に組み込める無料のサービスをご紹介します。 特に難しいプログラミングは必要なく、単純なHTMLの属性を付与するだけで誰でも簡単に高度な認証機能を実装できるのが大きな特徴です。 また、ログインユーザー向けのコンテンツを作成したり、自動的に画面を遷移させるなど便利な機能もたくさん盛り込まれています。HTMLの基本的な知識があれば誰でも活用できるので、Web開発にご興味ある方も含めてぜひ参考にしてみてください! なお、paizaラーニングでは、動画で学べる「HTML/CSS入門編」の講座を公開していますので、まずHTMLの基本を学びたいという方にはこちらもおすすめです。 【 Authpack 】 ■「Authpack」の使い方 それでは、「Authpack」の基本的な使い方について具体的に見
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
And the start attribute can be added to begin the list at a number other than one, like this: <ol start="2"> <li>Apple</li> <li>Banana</li> <li>Pear</li> </ol> I’m not sure how I never knew about these properties! I guess I can see how they might come in handy in the future. There are plenty of times when we need to break up ordered lists here on CSS-Tricks with things like code blocks and having
Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです 20のボーダーアニメーションエフェクト、9の画像アニメーションエフェクト、12のテキストアニメーションエフェクト、オーバーレイやカラーなどが全てclassで管理されており、組み合わせる事で1000以上のエフェクトのパターンを作れるよう設計されているそうです 各エフェクトは全てclassで管理されています。例えば上サンプルなら <figure class="c4-izmir c4-border c4-border-corners-2 c4-image-pan-left"> </figure>親要素に、izmirを使うためのclass、ボーダーアニメーションを加えるclass、ボーダーエフェクトの種類を指定するclass、左にパーンするclassを付与
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css
[レベル: 上級] rel="nofollow" 属性の扱いを Google は変更しました。 従うべき命令としてではなく、手がかりのためのヒントとして利用するようになります。 また、nofollow の派生型として、link タグと用いる 2 種類の rel 属性を新たに導入しました。 nofollow 属性の扱いを変更 rel="nofollow" 属性が付いたリンクを Google はこれまでランキング要因としては利用していませんでした。 PageRank を渡すこともないしアンカーテキストも評価しません。 そして、nofollow 属性を命令 (Directive) として Google は扱い、必ず従ってきました(nofollow リンクが評価されている状況があるという分析もあるけれど、公式見解では nofollow リンクはランキング要因から除外されることになっている)。 今後
by Charles 広告やスポンサーコンテンツを検索結果に影響させないようにするためや、リンク先へのページ評価の受け渡しを無効化するためのnofollow属性が進化するとGoogleが発表しました。新たに「sponsored」「ugc」という2つのリンク属性も発表されています。 Official Google Webmaster Central Blog: Evolving “nofollow” – new ways to identify the nature of links https://webmasters.googleblog.com/2019/09/evolving-nofollow-new-ways-to-identify.html nofollow属性は、もともとスパムに対抗する手段であり、信頼できないサイトへのリンクに対してnofollowを設定することで検索エンジン
<html>や</html>や<head>や</head>がないページを見たことはありませんか? 開始タグ<html>は最初の内容がコメントでなければ省略でき、終了タグ</html>は直後にコメントがなければ省略できます。また、<head>は内容が空か最初の内容が要素なら省略でき、</head>は直後に空白文字かコメントがなければ省略できます。 Web制作者が知っておきたいHTMLで必須ではない「任意のタグ」「任意の属性値」「省略してもよい属性値」を紹介します。 Optional HTML: Everything You Need to Know by Jens Oliver Meiert 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLで必須ではない任意のタグ 2. HTMLで必須ではない任意の属性値
Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。 Native image lazy-loading for the web! by Addy Osmani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chrome 75でリリース予定のloading属性 ブラウザがネイティブで遅延ロードをサポート loading属性とは loading属性の
「HTMLは簡単だよ」という声をよく聞きます。 確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。 HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。 10 HTML Elements You Didn't Know You Needed by Emma Wedekind 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Audio要素 Blockquote要素 Output要素 Picture要素 Progress要素 Meter要素 Template要素 Time要素 Video要素
CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。 そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現してくれるライブラリです。 CSS3 Animate Itの使い方 公式サイトで用意されているアニメーションです。 クリックイベントと組み合わせたデモです。 例えば以下のようなHTMLタグでアニメーションを実行できます。 <div class='animatedParent'> <h2 class='animated bounceInDown'>It Works!</h2> </div> アニメーションの仕方はクラス名として定義されているので、指定するだけです。後はJavaSc
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 に遷移する。 実際試してみたのが ここ。 リンクを開
This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (4KB) Install As Modules $ npm install translater.js Client-side usage <div> 这里是中文 <!--{jp}ここは日本語です--> <!--{en}Here is English--> </div> <script src="../dist/translater.min.js" type="text/javascript"></script> <script type="text/javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く