あなたが教わってるそのCSSテクニックはもう古い – TAKLOGXの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。
［速報］マイクロソフト、Bing Chatで手書きの画像からHTML/CSSを生成可能に、冷蔵庫の中身から料理のアイデアも、新機能ビジュアルサーチ。Inspire 2023
［速報］マイクロソフト、Bing Chatで手書きの画像からHTML/CSSを生成可能に、冷蔵庫の中身から料理のアイデアも、新機能ビジュアルサーチ。Inspire 2023 マイクロソフトは、日本時間7月19日未明から開催中のパートナー向け年次イベント「Microsoft Inspire 2023」において、AIチャットサービス「Bing Chat」に、画像を基に質問ができる「ビジュアルサーチ」機能（Visual Search in Bing Chat）を追加したことを明らかにしました。 ビジュアルサーチの機能はOpenAIのGPT-4モデルを活用したものだと説明されています。 下記はBing Chatのビジュアルサーチのデモ動画として、手書きのWebフォームの画像からHTML/CSSを生成させる様子を紹介したものです。 手書きのWebフォーム画像からHTML/CSSを生成 Bing Ch
メルカリエンジニアリング
「Mercari Engineering」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。
構造化データとは？メリットや種類・マークアップ・ツールなど初心者にわかりやすく解説！｜SEOラボ
構造化データとは、Webページの構造を検索エンジン（Google）により分かりやすく伝えるためにHTMLにマークアップする専用のコードのことです。 この構造化データは、あらかじめ「schema.org」で定義されてる専用のプロパティ（属性）とバリュー（属性値）を用いてHTMLにマークアップします。 構造化データをマークアップ（構造化マークアップ）すれば、クローラーがコンテンツ内容を認識しやすくなるので、その分Webページ（ブログ記事）のインデックスが促進されます。 そうなれば、Googleに評価されやすくなるので、SEOの良い効果が見込めるでしょう。 一方、構造化データを記述しなければ、クローラビリティが上がりません。 そうなれば、クローラーにおけるコンテンツの理解のしやすさが促進できないので、その分Googleから評価されづらくなるでしょう。 こうした良くない状況を回避する為に、構造化デ
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
Googleがrel=nofollow属性の扱いを変更。sponsored属性とugc属性を新たに導入
[レベル: 上級] rel="nofollow" 属性の扱いを Google は変更しました。 従うべき命令としてではなく、手がかりのためのヒントとして利用するようになります。 また、nofollow の派生型として、link タグと用いる 2 種類の rel 属性を新たに導入しました。 nofollow 属性の扱いを変更 rel="nofollow" 属性が付いたリンクを Google はこれまでランキング要因としては利用していませんでした。 PageRank を渡すこともないしアンカーテキストも評価しません。 そして、nofollow 属性を命令 (Directive) として Google は扱い、必ず従ってきました（nofollow リンクが評価されている状況があるという分析もあるけれど、公式見解では nofollow リンクはランキング要因から除外されることになっている）。 今後
SEO初心者でもわかりやすい！構造化データマークアップの書き方とできること | 株式会社フルスピード - Growth Seed
リッチリザルトの種類は、Google公式サイトの「検索ギャラリー」にまとめられています。 年々サポートの範囲は広がっています。気になる方は一度ご確認ください。 構造化データの記述方法構造化データの記述する際にまず決めなければいけないのは、「ボキャブラリー」と「シンタックス」です。「ボキャブラリー」はマークアップするものの定義、「シンタックス」は構造化データの記述方式を指します。 以下のGoogle公式のドキュメントをもとに説明していきます。 参照）構造化データの仕組みについて【Google Developers】 ボキャブラリー今回は、代表的なボキャブラリー、schema.orgでの実装について説明します。 まず、schema.orgでマークアップする際にはタイプとプロパティを指定します 構造化データをするための準備として、「タイプ」「プロパティ」を決めます。 「タイプ（@type）」とは
2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】
CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。 今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。 2018年人気だったすごいHTMLスニペットベスト【Codepen編】 #99 Animated CSS Seasons CSSのみでスタイリングされたイラストアニメーションで、四季をぞれぞれ表現しています。 See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen. #97 A
ブログのRSSを取得してサイトに読み込む方法まとめ | まめー
ブログの新着情報をニュースやお知らせのように、サイトに読み込みたいときがあります。 その方法は、以下のような条件によって実装方法が異なります。 ・外部ドメインのブログのRSSを取得して表示 ・内部ドメインのブログのRSSを取得して表示 ・ドメイン内部のWordPressの新着情報を取得して表示 このページでは、それぞれのケースで、ブログのRSSを読み込むための、最適な方法をめとめました。 Google Feed APIは使用不可 これまでは、Google Feed APIを使用するのが一般的でした。簡単に実装できたので、私も複数のサイトで使ってました。 参考：Google Feed APIを使って外部ブログのRSSを表示する方法 しかし、突然に表示されなくなる問題が発生し、2016年頃には正式に廃止が発表されました。2017年の1月には実際に表示されなくなっていますので、代替手段で修正しま
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
Browsersync - Time-saving synchronised browser testing
Time-saving synchronised browser testing. It’s wicked-fast and totally free. npm install -g browser-sync Get Started Your indispensable test assistant. With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of s
Udemy(ユーデミー)の評判は？Udemyに10万円超使ったのでレビューしてみる - MUTANT
こんにちは、てつです。 思い返せば会社員を辞めて独立してから様々なことに挑戦してきました。 2016年5月にブログを開始して、その後に海外へ行ったり株式会社を立ち上げたりと色々経験しましたが、その中でもプログラミング学習を本格的に開始したというのは自分の中で大きなことでした。 もともとWordPressでサイトを構築したりHTML/CSSくらいは勉強していましたが、本格的にプログラミングを勉強してWebアプリケーションを作ろう！と思ってテックキャンプというプログラミングスクールにも通い始めました。 お値段は1ヶ月で13万円ほど。高かった・・・ 受講後にさらにプログラミングスキルを高めようと思い、探し当てたのがアメリカ発の学習動画プラットフォーム「Udemy(ユーデミー)」 これ、知った時には軽い衝撃が走りました。 こんなにレベルの高い講座が安い金額で受講できるのか！と。しかも自宅で。 今回
Webアクセシビリティについて勉強してみて知ったことや感じたこと | mkasumi.com
ガイドライン兼国際標準規格であるWCAG2.0をもとに日本工業規格としたのが「JIS X 8341-3：2016」です。2004年、2010年にも改正されていて、2016年4月18日現在、最新版は「JIS X 8341-3：2016」となります。過去のJISを知っている方は最新版との差を知りたいと思いますが、2010年版と違い、2016年版は「等級A」と言われていた適合レベルが「レベルA」となったり、すこし文言が変更されています。2010年と引き続き、WCAG2.0をもとにしているので、項目はWCAGと同じく61項目のままとなっています。 JIS X 8341-3：2016が元に作られている国際標準規格です。JISは日本の規格ですが、こちらは海外にも適用されます。チェックツールなど、海外で配布されているものはWCAGが基準となっています。 基本的に、JIS X 8341-3：2016 はW
iOS9でviewportのinitial-scaleが無効になる時の対策
iOS8とiOS9とでブラウザの表示が違う 先日のブログ記事をiPhone6で見ると中身が左に寄るんだけど…と言われて見てみたのですが、自分のiPhone6では異常ありませんでした。 OSバージョンを確かめながらキャプチャで見比べました。 寄ってますね。 長いコードの部分で、iOS8.4.1では横スクロールが表示されます。 viewport設定でinitial-scale=1.0が無視されているっぽい iOS9のSafariでは、初期の画面倍率を無視してページ全体を表示するよう縮小して表示しているようです。 ios9 (β) viewportに不具合か！？ ios 9 Safari / Web App Viewport Problem (expands to fit all elements in view) 同じように困っている報告も上がっています。 回避策 先ほどのスレッドでも紹介され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Wireframe a Website using Gutenberg - Stackable