[B! HTML5] o_hiroyukiのブックマーク

いざという時に使える13のHTML&CSS Tips集 | BUILD Journal

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するいざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。CS

o_hiroyuki 2022/05/11

css

リンク

あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita

こんにちは、たかとーです🧑‍🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース︵2008年1月︶以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt

o_hiroyuki 2020/09/24

html5

リンク

HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社

概要原著者の許諾を得て翻訳・公開いたします。英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。画像は元記事からの引用です。初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。私は毎日のように、重要なユーザー情報をlocal storageに保存す

o_hiroyuki 2019/10/12

リンク

実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した﹁CSSでここまでできるのか！﹂の続編です。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu

o_hiroyuki 2019/07/23

html5

リンク

HTML5 入れ子チートシート | 吉川ウェブ

HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であることかつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であることルート要素＆文書メタデータ html 親子 head 親子 title 親子 base 親子 link 親子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親子※he

o_hiroyuki 2018/07/03

html5

リンク

Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた

Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた白石俊平︵HTML5 Experts.jp編集長︶こんにちは、編集長の白石です。この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。今回は、﹁Nintendo SwitchとWeb﹂という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！白石簡単に自己紹介をお願いで

o_hiroyuki 2017/11/06

game
HTML5

リンク

テクニックではなく、今、本気で取り組むべきWebパフォーマンス

民法債権法改正が国会で成立し、品質保証が請負やサービスなど、全てに適用されるようになります。私達が、普段、商品や食品に対して品質保証を求めるように、Webサイト制作や、Webサービスにも品質保証が要求されるのです。﹁自分達を損害賠償から守るために品質保証をしなくては﹂というよりも、﹁自分達の仕事の価値、提供するサービスの価値を高め、差別化するための品質保証﹂として積極的に活用しませんか？今まで、﹁テクニック﹂として語られる事が多かった﹁Webパフォーマンス﹂ですが、﹁品質管理﹂として本気で取り組みませんか？このセッションでは、Webサイト制作や、Webサービスの現場で、DevOpsの三本柱の一つである﹁品質保証﹂を実行していくために必要な、Webパフォーマンス管理・改善に必要な基礎知識を解説します。 HTML5 Conference 講演資料

o_hiroyuki 2017/09/27

リンク

おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

タイトルに含まれる語に関する補足おじさん‥ 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。なぜ﹁モテ﹂なければいけないのか﹁モテる﹂とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた︵と思う︶。ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、﹁モテる﹂ための方法をいくつかかいつまんでまとめてみた。セマンティックなコーディングは、開発者の課題理解度を図り、意

o_hiroyuki 2017/05/29

HTML5
css

リンク

HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog

こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか?近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"

o_hiroyuki 2016/04/29

リンク

Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA

JavaScriptライブラリー﹁ParticleJS﹂を公開しました。﹁ParticleJS﹂は大量の粒子︵パーティクル︶の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。また、﹁Particle Develop﹂という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを﹁ParticleJS﹂にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ

o_hiroyuki 2016/03/04

リンク

GitHub - BabylonJS/Babylon.js: Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

o_hiroyuki 2015/04/08

リンク

ウェブパフォーマンスの基礎とこれから

ウェブパフォーマンスの基礎と今後の動向について、Web標準周りを中心に解説しています。GREEのMini Tech Talkで発表時の資料です。Read less

o_hiroyuki 2015/03/24

リンク

AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ

これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！Yoshinori Kobayashi

o_hiroyuki 2015/03/21

リンク

Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player

o_hiroyuki 2015/03/04

HTML5の動画プレイヤー

動画
HTML5

リンク

第4回　HTML5を使った実際の開発の進め方

みなさん、こんにちは。hifive開発チームの横山です。第2回と第3回では、HTML5で実現可能な表現や機能について詳しく解説しました。これらを用いると、業務システムに従来のWebシステムでは実現できないレベルの高い操作性を持たせることができます。直観的に操作できるUIにより誤操作を防止しやすくなり、ユーザー教育のコストも減らせるのではないか---。そんな期待を持った人も多いのではないでしょうか。しかしながら、そうしたリッチなUIを備えた業務システムの開発は、単純な画面遷移を繰り返すことで業務を進めていく従来型Webシステムと比べて、開発プロセスを適切に管理し、予定通りの工数で開発を進めることが難しくなりがちです。そこで今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる﹁成功させるために考慮すべき点﹂や﹁失敗しないための開発の進め方﹂﹁役に立つツールや

o_hiroyuki 2015/02/26

HTML5
開発

リンク

Service worker が拓く mobile web の新しいかたち

This document discusses using Rails as a backend for front (BFF) layer in a microservices architecture. It describes how Rails was used to build the BFF layer for an e-commerce site called HPB, acting as an API gateway between the client and various backend services. Key points discussed include using Puma to improve throughput, caching APIs to reduce response time, and implementing an API gateway

o_hiroyuki 2015/02/26

リンク

HTML5で音を扱う3つの方法

自己紹介藤澤伸 (のびー) fnobi.com カヤック社員ページ HTMLファイ部最近のおしごと Lobi-SDK(Android・Unity・Cocos2d-x) NARUTO－ナルト－展公式サイトハイブリッドに技術を使うものや、わいわい動くLPが得意

o_hiroyuki 2015/02/19

audio,sound,音

HTML5
api

リンク

HTML5 and CSS3 - Adobe - The Expressive Web - Beta

The Expressive Web is an Adobe-curated resource website for the advocacy, support, and advancement of HTML5 and CSS3 web development.Copyright © 2011 Adobe Systems incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of User and Online Privacy Policy. Resources About Adobe and HTML5

o_hiroyuki 2015/02/19

HTML5
CSS3

リンク

HTML5 Conference 2015 講演資料まとめ #html5j

1月25日に開催された「HTML5 Conference 2015」の中継動画や講演資料をまとめました。 ※リンクミスや追加情報などありましたら、コメントまたは@unsoluble_sugarあてにお知らせいただけるとありがたいですオープニングセッション（10:00-10:50）基調講演

o_hiroyuki 2015/01/26

リンク

“マークアップ”するということ～ HTML5勧告に寄せて～

HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化著作権表示のマークアップ small要素 footer要素とsmall要素p要素とdiv要素 footer要素とp要素スタイリングとの兼ね合いマークアップするということ HTML5での変化コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は

o_hiroyuki 2014/12/29

markup

HTML5

リンク

はてなブックマーク

タグ

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

HTML5に関するo_hiroyukiのブックマーク (436)

お知らせ

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

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

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス