[B! html] n314のブックマーク

HTMLのa要素にはhref属性を指定しなくてもよい: Days on the Moon

HTMLのa要素はハイパーリンクを表す要素であり、リンク先のURLをhref属性に指定します。しかし、a要素の役割はそれだけではありません。HTML標準によれば、a要素は﹁リンクとなりうる箇所のプレースホルダー﹂として使うこともできます。この場合はhref属性を指定しません。リンクとなりうる箇所の例として、ナビゲーションやタブUI、パンくずリストなどでの﹁現在の項目﹂があります。 <nav> <ul> <li><a href="/">ホーム</a></li> <li><a>最新記事</a></li> <li><a href="/archives">アーカイブ</a></li> <li><a href="/settings">設定</a></li> </ul> </nav> ReactなどJSXでa要素を生成する場合、href属性を指定しないためにはhrefプロパティにundefinedを

n314 2022/10/22

後ろめたい気持ちで実際やってたけど、ちゃんとした使い方だったのか。

HTML

リンク

HTML3.2のどこが「間違って」いるのか、そしてそれを見た目重視のクラスで再現するのがおかしいわけ - Qiita

Jason Knightさんの以下の記事の翻訳です。元記事はMediumプレミアム限定ですが、本人から翻訳OKの許諾をいただいております。﹁海外のガチHTMLコーダーに阿部寛のホームページを見てもらった﹂のフォローアップ的内容です。阿部寛のホームページを題材に、HTML3.2の問題点を議論しています。かなり長いものとなっておりますが、その分得られるものも大きいと思います。本文この題材について﹁当時いなかった﹂人向けに説明したかったんだけど、いい題材が無かった。でも阿部寛の懐かしめなホームページについての記事を紹介されて話は変わった。ハックや、アクセシビリティの欠陥や、そのぎこちなさ―かつて標準だったHTML3.2として見てもだ―を見るのは面白いものだった。彼のホームページを語る前に―そして現代のテクがどれだけよくなったかをご覧いただく前に―HTMLが何のためにできたか、そしてHT

n314 2022/05/24

原理主義になりたいけど全然なりきれない。

HTML
css

リンク

HTML属性を使い、ユーザーに優しい2要素認証を実現する方法

製品コミュニケーションメッセージングマルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で

n314 2021/10/20

HTML

リンク

HTML Over The Wire | Hotwire

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditi

n314 2020/12/23

なんぞこれ…。あとで読もう。

リンク

🤯 HEAD - A simple guide to HTML <head> elements

🤯 HEAD A simple guide to HTML <head> elements Table of Contents Recommended Minimum Elements Meta Link Icons Social Facebook Open Graph Twitter Card Twitter Privacy Schema.org Pinterest Facebook Instant Articles OEmbed QQ/Wechat Browsers / Platforms Apple iOS Google Android Google Chrome Microsoft Internet Explorer Browsers (Chinese) 360 Browser QQ Mobile Browser UC Mobile Browser App Links Other

n314 2019/10/01

多い

HTML

リンク

Can I email…

Apple Mail macOS iOS Gmail Desktop Webmail iOS Android Mobile Webmail Outlook Windows Windows Mail macOS Outlook.com iOS Android Yahoo! Mail Desktop Webmail iOS Android AOL Desktop Webmail iOS Android Samsung Em ail Android Mozilla Thunderbird macOS Windows ProtonMail Desktop Webmail iOS Android Fastmail Desktop Webmail HEY Desktop Webmail Orange Desktop Webmail iOS Android LaPoste.net Desktop Webm

n314 2019/09/13

HTML

リンク

「フロントエンド開発者」の終焉 | POSTD

元記事の著者より‥この記事は主に北米文化で私が見たことを反映しています。誰かに職業をきかれたら、私は﹁フロントエンド開発者です﹂と答えます︵答えは相手によって変わることもあります︶。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです︵これに関しては、後に詳しく説明します︶。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな

n314 2018/01/19

昔はデザイナーとプログラマーの間で「ここ1pxずれてるよ」「エラーメッセージ入れる場所ないよ」みたいなやり取りがあったと思うけど、今は戦場がフロントエンドになったのね。

css
HTML

リンク

Building Faster Websites crash course on web performance Ilya Grigorik - @igrigorik Make The Web Fast Google

n314 2017/10/31

https://www.webpagetest.org/forums/showthread.php?pid=22852 から来た。

リンク

HTMLのheadの書き方、head内に記述する要素の総まとめ

HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素ソーシャル関連のhead内の要素ブラウザ・プラットフォーム関連のhead内の要素メモ head内に記述する最小限の構成下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c

n314 2017/09/26

head内にnoscriptで何を書くんだろう。

HTML

リンク

2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows7のIE 11以降となります︵※︶。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事﹁Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft﹂ 1. meta keywords設定は検索順位に関係がないウェブコンテンツのキーワードを指定するmeta keyw

n314 2016/12/20

リンク

Selecting a css class with xpath

I want to select just a class on its own called .date For some reason, I cannot get this to work. If anyone knows what is wrong with my code, it would be much appreciated. @$doc = new DOMDocument(); @$doc->loadHTML($html); $xml = simplexml_import_dom($doc); // just to make xpath more simple $images = $xml->xpath('//[@class="date"]'); foreach ($images as $img) { echo $img." "; }

n314 2016/11/02

むずすぎないか…

リンク

フロントエンドエンジニアなら知っておきたい「HTML5のセキュリティ問題と対策技術」第44回HTML5とか勉強会レポート #html5j #HTML5｜CodeIQ MAGAZINE

Web技術者コミュニティ﹁html5j﹂が主催する最新技術トレンドや業界動向を学ぶ勉強会﹁HTML5とか勉強会﹂が六本木ヒルズのGoogleで開催された。第44回となる今回のテーマは﹁HTML5とセキュリティ﹂。セキュリティのエキスパートたちが語る、HTML5および関連する周辺技術のセキュリティ対策に役立つ情報とヒントをレポートする。by馬場美由紀︵CodeIQ中の人︶今から始めるHTML5セキュリティトップバッターで登壇したのは、一般社団法人JPCERTコーディネーションセンターの松本悦宜氏。JPCERT/CCが2013年10月に公開した﹁HTML5を利用したWebアプリケーションのセキュリティ問題に関する調査報告書﹂をもとに、Webアプリケーション開発者が知っておきたいHTML5および関連する周辺技術のセキュリティ対策について解説した。便利さの一方で、脆弱性も広がるHT

n314 2016/07/30

リンク

AMP(Accelerated Mobile Pages) HTMLしてみたという話 / masuP.net

Googleさんが発表したモバイル端末での表示高速化のAMP HTMLに対応してみたよ、という話です。 Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web 概要などは上記見てもらえれば感じはつかめると思いますし、日本語で紹介してる記事だとKenichi Suzukiさんの紹介記事を見ると分かるかと思います。なぜやってみようかと思ったかというと、﹁javascriptが無い静的なHTMLとCSSのページは爆速で表示したるで！﹂というGoogleさんの粋な計らいかと勘違いし、ほとんどが静的なページであるこのブログもサクーっと対応できたりするんじゃね、と思ったからですが、ちょっと苦労しました。なおブログを完全に対応させたのではなく、記事ページのみ別にAMP HTML用の記事を出力してい

n314 2016/06/24

HTML
google

リンク

完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita

概要完全に単一のHTMLファイルで動作するMarkdownエディタ﹁かんたんMarkdown﹂を作ったというお話。お断り一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯前回の記事(そろそろExcelで資料作るのやめたい)で、単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまうというアイデアに可能性を感じて下さった方が多いようです1。しかしながら、エディタとプレビューアが別なのが面倒 base64に変換するのが面倒といった意見も多く聞かれました。そこで思ったのです。ならばエディタを作ってしまえと。かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown

n314 2016/01/26

リンク

そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

帳票といえばPDFとして生成するのが一般的でしょうか?でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。ライブリロードで、リアルタイムなスタイル調整バックエンドではなくフロントエンドで生成できる前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環

n314 2015/12/05

これすごいね。

リンク

Private Presentation

Private content!This content has been marked as private by the uploader.

n314 2015/03/23

リンク

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！目次 Div全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びのdivの高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

n314 2015/03/17

HTML
css

リンク

Flexboxで決まり！ | Webクリエイターボックス

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

n314 2015/03/17

HTML
css

リンク

超会議3の超チューニング祭の感想

さて、超チューニング祭が終わったので、感想を書こうと思う。すでに、参加者の中で、感想を書いている人もいる。レポート - 超チューニング祭で努力賞(最速賞)をとるためにやったこと - Qiitaニコ動超チューニング祭で最優秀賞もらいました超チューニング祭に参加した - masarakki'sblogJavaScript - 超チューニング祭に参加＆表彰した - Qiita kmizu/slide_cho_tuning また、いつの間に行ったのか、優勝者に取材したところもあるらしい。﹃ニコ超3﹄の超チューニング祭で、“創世神”戀塚昭彦氏を上回ったカップルが見せたバランス感覚 - エンジニアtype さて、筆者の視点からみた超チューニング祭はどうだったか。そもそも、私がスタッフとして配置されるブースは、超時空ニコニコ研究所であるはずだった。しかし、超会議にさかのぼること三週間前、

n314 2014/04/30

リンク

Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG

こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。通販サイトにある﹁購入ボタン﹂を例に説明すると分かりやすいと思います。この手のボタンを作るには以下の手続きを要すると考えられます。外観を整える CSS HTMLマークアップクリックした際の挙動 JavaScript 何が厄介かというと、﹁再利用﹂が難しいというところなんですね。例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。﹁購入ボタン﹂はあくまで一

n314 2013/12/28

HTML
google

リンク

はてなブックマーク

タグ

関連タグで絞り込む (17)

htmlに関するn314のブックマーク (20)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス