話題の Portals を使った画面遷移 UX の未来 | ウェブボウズ
ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭（スキンヘッド）にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素
[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。 角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
![[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox](https://cdn-ak-scissors.b.st-hatena.com/image/square/1dd910b325a6cc2c3c080f26dc7ac70824dc0015/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110701.png)
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
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
Dropify — Override your input files with style.
Before Basic HTML input file Now Your so fresh input file — Default version You can add a default value You can set the height You can combine options You can disabled the input Also with a default file You can add a max file size You can disable remove button You can use events You can destroy it Init/Destroy Multiple options are available Only portrait or square images, 2M max and 2000px max-hei
+BLOG
+BLOG ヤバイ！AMAZONプライムデーでこれ買った！ベスト1 2023/7/12 地元民が選ぶ名古屋グルメおすすめ12選 2022/7/22 モンブランクレープが食べられる『IVY’s GELATO&Coffee』 2022/7/8 2022/7/11 洗車後のコメダ新作『ミルクロネージュ』が身体に染みた 2022/7/3 真夏日PM3:00地獄のジムニー洗車 2022/7/2 『ブルーボトルコーヒー』でワッフルコーヒータイム 2022/7/1 灼熱地獄で食べるレッドチリスモーキーワッパー 2022/6/30 毎年恒例のすき家でニンニク祭してきた 2022/6/29 2022/6/30 小袋ナッツどれがいいんだ問題を解決する 2022/6/28 買うべき名品！ドンキの『ナッツ&デザート』 2022/6/27 +BLOGは名古屋のフリーランス個人ブログです！ 人気記事 ヤバイ！AMAZ
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
Wysihtml editor
THIS is the typewriter for the modern web.Go on, start typing here ... 1. get scriptsbower install wysihtml or download the latest release from Github. 2. include the scripts in your HTML<!-- wysihtml core javascript with default toolbar functions --> <script src="bower_components/wysihtml/dist/wysihtml-toolbar.min.js"></script> <!-- rules defining tags, attributes and classes that are allowed --
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
HTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイト「DevDocs」 | ライフハッカー・ジャパン
「DevDocs」はHTML5やCSS3、JavaScriptなどのドキュメントを高速検索できるサイトです。MacにDashというドキュメントを高速に横断検索できるツールがありますが、それに似たサービスですね。オンラインで検索できるので、便利です。検索するとリアルタイムに検索結果が絞りこまれ、必要なドキュメントの内容が表示されます。 使うには、まずDevDocsへアクセスしましょう。左側のメニューに検索対象の言語が並んでいます。 プルダウンを開くとカテゴリごとにドキュメントが整理されています。左上の検索ボックスから対象のタグやメソッドを入力すると絞り込むことができますよ。高速に検索できるので、必要な情報がすぐに手に入るのがうれしいですね。ウェブ開発をしている方はドキュメントを読むことが頻繁にあると思います。DevDocsをブックマークしておくと、いざというときに便利ですよ。 DevDocs
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
The HTML Landscape
This document captures the differences between various HTML specifications. Overview This document describes the perceptible differences between three HTML specifications: WHATWG HTML LS — The HTML Living Standard as maintained by the WHATWG W3C HTML 5.1 — The HTML Nightly document, targeted for standardisation by W3C in 2016. W3C HTML 5.0 — The HTML 5.0 document, currently in Candidate Recommenda
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents
http://htmlarrows.com/
The Blog | Welcome to Adobe Blog
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
TEMPLATED - Free HTML and CSS Website Templates
HTMLテンプレート素材まとめ
CodePen - Front End Developer Playground & Code Editor in the Browser
