HTML要素からHTTP/2優先度を指定する Priority Hints が動いた - ASnoKaze blog
HTTP/2にはクライアントからHTTPリクエストの優先度を指定することができる。サーバはその優先度に基づいてHTTPレスポンスを返す(無視しても良い)。 一般的にはブラウザ自身が判断し、ページのレンダリングを早くするためにCSSなどは優先度を高く、画像は優先度を低く設定している。 一方で、Webサイトを作る側としては、最初に表示される領域(Above the fold)の画像を優先度高くしてほしいと行ったこともあるだろう。 そこで、HTMLからリクエストの優先度を指示できる「Priority Hints」という仕様の標準化が進められている。 例 すでに、Chrome Canary (71)で動作するようなので試す。 importanceに"high"や"low"を指定する <img src="img/1.png" importance="high"> <img src="img/2.pn
Markdown＋CSS組版での技術系同人誌制作時の環境
CSSで組版（印刷打つの紙面を構成）を行うCSS組版が、技術系同人誌（主に技術書典）界隈や、一般の出版業界でも盛り上がりを見せています。 今回、CSS組版・パブリッシング交流会というところで登壇した内容を記事にいたしました。また、記事の最後には、同イベントでのCSS組版について感じたことも報告としてまとめました。 実際に行ったCSS組版の方法 MarkdownからHTMLにどう変換するかの模索結果 が今回の記事の内容です。そのため、ベストプラクティス、というわけではないです。CSSで組版を行うということは、必然的に、HTML等で書かれた文書が必要になるので、それをどうやって生成しようという話です。 目次 バックグラウンド なぜMarkdown＋CSS組版なのか Markdown＋CSS組版の作業の流れ エディタ Atom エディタ Typora HTML出力 印刷画面プレビュー Tips
いろいろな用途に使えるバージョン管理ツール「universions」がすごい
バージョン管理をすることで、過去の制作物と比較しながら作業を遂行することができるので、Gitをはじめとしたバージョン管理システムは、エンジニアの必須環境となっています。 一方、Webクリエイターの中には、黒い画面にUNIXコマンドを打ち込むのに苦手意識がある方もいるでしょう。バージョン管理をしたいけれど、従来のバージョン管理システムでは難しいと感じている方もいるはずです。そこでオススメなのが、*コラボレーションツール「universions」*です。 そこで今回は、*いろんな用途に使えるバージョン管理ツール「universions」*の概要や使い方をご紹介します。内製のHTMLサイトも、WordPressサイトも簡単に設定できるので、ぜひ使い方を学んでみましょう。 universionsは、*「Webクリエイターのためのファイル管理コラボレーションツール」*を標榜している、直感的に使えるバ
[プログラマの人向け(?)]私が考えたHTML/CSS コーディング規約 - Qiita
追記 2018/02/21 追記事項 編集リクエストをしていただき、ありがとうございます！ 思ったよりご覧になられているようで恐縮です... 拙い記事で自分の理解不足によるところもありますので、もし「ここはおかしい！」という所がありましたら、どうぞご指摘お願いします(お手柔らかに)＿(:3」∠)＿ ※内容に関係しないところで、一部修正しました。 はじめ プログラム言語は一般的にコーディング規約というものが存在するのはご存知かと思いますが、HTMLとCSSにもコーディング規約が存在します。 今回、他の方のHTML/CSSコーディング規約を下敷きにしつつ、自分が今まで経験してきたことを踏まえたMyコーディング規約を作りましたので、公開してみることにします。 対象 特に絞ってないですが、あえて言うと「システム開発の過程でコーディングもたまにするプログラマ」を想定して書いてます 前提 HTML/C
![[プログラマの人向け(?)]私が考えたHTML/CSS コーディング規約 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee550e73b8a50e88554877779235c309f6780535/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJTlFJUUzJTgxJUFFJUU0JUJBJUJBJUU1JTkwJTkxJUUzJTgxJTkxJTI4JTNGJTI5JTVEJUU3JUE3JTgxJUUzJTgxJThDJUU4JTgwJTgzJUUzJTgxJTg4JUUzJTgxJTlGSFRNTCUyRkNTUyUyMCVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyU4NyVFMyU4MiVBMyVFMyU4MyVCMyVFMyU4MiVCMCVFOCVBNiU4RiVFNyVCNCU4NCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MDA0MWM5MGUzZDdiOGZmMzRlN2I3OTFkODlmMmJjNzU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBreXV0YXJvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNGM1ZjUwNTVlODQ2YjkxNzhhMjM4Nzk0OGZiOWFiNA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df2da33132f8b77c80eefe2d8f535f37d)
textlint 10.0.0 リリース
textlint 10.0.0をリリースしました。 Release textlint 10.0.0 · textlint/textlint 変更点 textlint 10.0.0の主な変更点です。 🆕 Features @textlint/ast-node-typesがTxtNodeの型定義を持つように @textlint/ast-node-typesという内部的に使ってるものがtextlintのパーサが作るTxtNodeの型定義を持つようになりました。#358 textlintのASTを扱いたいTypeScriptユーザーはこれを利用できるので、textlint pluginを作りたいとかしたい人は便利かもしれません。 詳しくはTxtNodeのドキュメントを見てください textlintがTypeScriptで扱えるように #248 以前の9.0.0のリリースでtextlintのコアエ
Accessibility Through Semantic HTML
Working on Better, a tracker blocker, I spend an awful lot of my time with my nose in other people’s page sources. I’m mostly there looking for harmful tracking scripts, but often notice the HTML on some of the world’s most popular sites is in a sad state of neglect. What does neglected HTML look like? Here’s an example of the markup I found on a news site just yesterday. There’s a bit of text, a
2017年度・自分なりのWebサイト制作向けCSS設計論 - Qiita
株式会社アンティー・ファクトリーXAチーム（マークアップエンジニアチームの名称）の Advent Calendar 1日目担当の@kokushinです。 業務ではWebサイトのマークアップに加え、JavaScriptを用いた演出・機能実装などを行っております。 プライベートでは、Vue.jsを使ったWebアプリやCSSフレームワークなんかを自作して遊んでおり、最近だとサーバーサイド言語にも手を出し始めました。楽しいです。 CSS設計に関してはまだ苦手意識がありますが、OOCSS・SMACSS・BEM・FLOCSSなどの設計論や、Atomic Designといった考え方が登場したことで昔よりかは随分と良くなりましたね。 弊社では主にFLOCSSを取り入れて業務に活かしているのですが、プライベート開発のときは「独自のCSS設計を考えて実際に使ってみよう」と決めていたので、Webサイトのソースや
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
HTML & CSS Editing Apps For Windows Designers
Our recent roundup of HTML and CSS editing apps for Mac users proved to be really popular, but the Windows-based designers were feeling a little left out. This week’s roundup pulls together the most popular editing application choices for PC users. These HTML & CSS editing apps for Windows users will help designers build standards-compliant websites with the help of powerful tools features such as
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 5.2