【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
HTMLの簡単な解析 (Nokogiri, ruby)
概要 様々な局面でHTMLの解析が必要になります。例えば、こちらのページでも紹介したSeleniumで複雑なことをしようとすると、driver.page_sourceで取得したHTMLを解析したくなります。このような用途のために、RubyにはNokogoriというツールがあります。 公式ドキュメント 本ページの内容を越えるものは、こちらの公式ドキュメントを参照してください。 要素セレクタは2種類 XPathまたはjQueryでもお馴染のCSSセレクタを使用できます。本ページではCSSセレクタを用いた例を示します。 解析対象HTMLの読み込み Nokogiriの入力はUTF-8である必要があります。ちなみに出力もUTF-8です。 文字列HTMLを解析 sample.rb #!/usr/bin/ruby require "nokogiri" require "selenium-webdrive
HTML5タグのdetails/summaryを使ってGitHubのREADME/コメントを整理
B! 7 0 2 0 とあるGitHubのレポジトリのREADMEを見ていたら 一部を折りたたんで表示するアコーディオン表示になっていたので GitHubの仕様かと思ってたんですが、 HTML 5.1で導入されたdetails/summary要素によるものでした。 これを使ってGitHubのREADMEなんかで長くなってしまって重要でない部分を一部折りたたんだり、 Issuesとかでも上手く使うことで見やすくすることが出来ます。 details/summary 隠し部分ではMarkdownも使える まとめ details/summary 使い方は 1 2 3 4 5 6 7 8 9 10 <details> <summary> 見出し部分。ここをクリック。 </summary> <div> ここが隠れてる部分。 </div> </details> みたいに書くと 見出し部分。ここをクリック
perlでHTMLを解析して欲しい情報を抽出するためのコードをメモ
HTMLファイルから特定のタグに囲まれている情報だけを抽出したり、リンクだけを抽出したりしたいと思ったので、それを実現するコードを色々調べてperlで作成してみたのでメモしておきます。いわゆるスクレイピングするためのコードです。このコードでは、perlのHTML::TreeBuilderを使いました。 #2014/1/25追記 以下にメモしたコードそのままでは、HTML5で記述されたhtmlファイルから情報を抽出できません。HTML5にも対応したコードはperlでHTML5を解析して情報を抽出するコード（HTML::TagParser版）にメモしたので、見て頂ければと思います。 実行環境と使用したperlモジュール 実行環境はUbuntu12.04 64bit です。 使用したのは以下の２つのモジュールです。これらのインストールはcpanmで行いました。 HTML::TreeBuilder
初めてのフォーム - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
droppy - ネスト形のドロップダウンメニュー
<script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> HTML の例を以下に示します: <ul id='nav'> <li><a href='#'>Top level 1</a></li> <li><a href='#'>Top level 2</a> <ul> <li><a href='#'>Sub 2 - 1</a></li> <li> <a href='#'>Sub 2 - 2</a> <ul> <li> <a href='#'>Sub 2 - 2 - 1</a> <ul> <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li> <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li> <li><a href='#'>S
React VRで始めるお手軽WebVRプログラミング
React VRというのは、Facebookが開発し、GitHubにてBSDライセンスで公開しているオープンソースのVRアプリケーションフレームワークです。現在のところは、Webブラウザ向けにWebGLとWebVRを使ったVRアプリケーションを作るための様々な仕組みを提供しています。 React VRを知らなくても、ReactやReact Nativeなら知っているという人もいるかもしれません。VRコンテンツを作るには新しいフレームワークやライブラリなどを学ぶ必要がありましたが、Reactと同じ考え方を使ってVRコンテンツを作ることができる点が、他のフレームワークと異なる点です。 ネイティブVRが最高の体験をもたらすとは限らない VRというと何らかのVRヘッドマウントを装着して体験するものというイメージがあります。また、VRヘッドマウントは高額で、VRを体験するハードルが高かったことも事実
web制作者（フロントエンド・マークアップエンジニア向け）がブックマークしておきたい、便利なチートシートやリソースのまとめ - NxWorld
普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。 主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。 普段から多用している言語はもちろん、頻繁に調べてるとかまだまだ勉強しつつ使っているというものがあれば、それに関するチートシートをブックマークしておくことで不明点が出る度に検索する手間も省けて制作時間の短縮にも繋がると思います。 また、基本的にはweb上で確認するものになっていますが、中にはわかりやすく1枚のイメージでまとめられていたりPDF形式で用意されているものもあるので、それらを印刷して手元
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home - Statocles