<body></body>
htmlに関するnullpobugのブックマーク (34)
-
nullpobug 2023/11/14
-
スクリプトの非同期読み込み(async, deferの違い) - わくわくBank
スクリプトの読み込みを非同期にすることで、画面表示を速くすることができます。スクリプトを非同期で読み込む方法には、「async」と「defer」があります。ここでは、その違いについて整理します。
-
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
-
HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
-
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
-
いまさらだけどContentEditableをいじって、キャレットの扱いがしんどいということがわかったよ - 算譜王におれはなる!!!!
WYSIWYGエディタに憧れてContentEditableをいじってみると、けっこうな底無し沼だと。気づいたときにはどっぷり浸かってるやつ。 ググればそれなりに知見が見つかるし、良い感じのライブラリもある。けど僕がやりたかったことは、自分でコードを書いて実現するのが早いんじゃないかなーと思って、沼にダイブした。 やりたいことは、ワープロソフトみたいなやつというよりも、編集しているテキストのスタイルがリアルタイムに変化するMarkdownエディタっぽいやつ。 つまりユーザがスタイルを当てるんじゃなくて、ユーザが入力したテキストに応じてスタイルを当てたい。 より正確には、テキストの見た目をおしゃれにするだけではなくて、もっと高度な何か、Reactのコンポーネントとか、を埋め込むとかしたかった。 Draft.jsやEditor.jsのような、ContentEditableを扱いやすくしてくれる
-
JavaScriptのWeb Audio APIで録音してみる - saitodev.co
先日、 パソコンの前で手を叩いたら、その音をキッカケにして動作するアプリは作れないかな？ という意見が挙がった。 というわけで、早速調べてみたところ、 HTML5のAPIでWeb Audio APIをいう仕様を見つけた。 Web Audio API - Web API インターフェイス | MDN というわけで、 早速、上記のURLと下記のURLを参考にして録音アプリを作ってみた。 ユーザーから音声データを取得する | Web | Google Developers 実際に書いたコードは下記の通り <h1>Web Audio APIのサンプル</h1> <p>実行と同時に録音がはじまり、10秒後に音声データを生成します</p> <a id="dl">ダウンロード</a> <script> //様々なブラウザでマイクへのアクセス権を取得する navigator.getUserMedia
-
Solving anything in VCL
Andrew Betts Web Developer, The Financial Times at Fastly Altitude 2016 Running custom code at the Edge using a standard language is one of the biggest advantages of working with Fastly’s CDN. Andrew gives you a tour of all the problems the Financial Times and Nikkei solve in VCL and how their solutions work.Read less
-
-
-
Google モバイル検索が Accelerated Mobile Pages に対応しました
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
-
-
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
注意事項：◆このツールは「＜」「＞」マークを元に、HTMLを見やすく整形してくれる単純なツールです。 ◆不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能を追加しました。 ◆一行の長さは8000バイト以内してください。制限を超えると応答が帰らない場合があります。 ◆当ツールへのご意見、ご要望は "Pika's home"へお願いします。
-
-
Kindle 電子書籍の作り方 (Kindlegen) - 言語ゲーム
前回 Mobipocket Creator を使った mobi ファイルの作り方について書きました。 今回は Kindlegen http://www.amazon.com/gp/feature.html?docId=1000234621 を使って電子書籍を作る方法です。Kindlegen は Window と linux で動くコマンドラインツールで、原始的なだけに mobi ファイルの作成には何が必要なのかという事がより理解しやすいと思います。題材として短い方が良いと思うので Daniel H. H. Ingalls の Design Principles Behind Smalltalk を使います。 $ mkdir ingalls $ cd ingalls $ wget -m -np http://www.cs.virginia.edu/~evans/cs655/readings/
-
-
授業内課題
課題作品集 過去クラスの作品 前回クラスの作品 今回クラスの作品 HTML課題 HTML課題１ HTML課題２ HTML課題３ HTML課題4 HTML課題5 HTML課題6 HTML課題7 HTML参考サイト（ウェブランサー） XHTML1.0の基本構造 HTML5の基本構造 CSS課題（初級） CSS課題１ CSS課題２ CSS課題３ CSS課題4 CSS課題5 CSS課題6 CSS課題（中級）その1 CSS課題7 CSS課題8 CSS課題9 CSS課題10 CSS課題（中級）その2 CSS課題11 CSS課題12 ・見出しデザイン練習 見出しデザイン ・縦型ナビゲーション練習 縦ナビ１ 縦ナビ２ 縦ナビ３ ・横型ナビゲーション練習 横ナビ１ 横ナビ２ ・テーブルデザイン練習 テーブルデザイン ・絶対配置(positionプロパティ)練習 絶対配置 ・定義リストデザイン練習 定義リスト
-
機能（システム）とデザインと画面とバージョン管理 : まりっぺぶろぐ
ここ最近のデザイン業務の様子など。 弊社は『プログラマ中心の集団』なのですが、私は（今現在）唯一のデザイナーとして自社webサービス制作メインで働いています。 今まで何か改修をする時は、Mercurialで機能ごとにbranchを作って、branch（機能）に対応するデザイン（及びHTML/CSSコーディング）のみをやっていました。 バージョン管理が全くわからないデザイナーとかにわかりやすく言うと、サイトのHTML/CSSを、機能の数だけディレクトリごと全部一式コピーして、一式コピーその1（≒branch1）は「お気に入りリスト機能」に関する変更だけを、一式コピーその2（≒branch2）は「検索機能」に関する変更だけをして、最終的にはそれぞれの差分がうまく合わさる…みたいな感じ…？ 何故機能単位なのかというと、複数の機能の中でリリースの順番が入れ替わったり、ある機能だけがリリース出来なく
-
Hype
Animate in a Snap Tumult Hype’s keyframe-based animation system brings your content to life. Click “Record” and Tumult Hype watches your every move, automatically creating keyframes as needed. Or, if you’d prefer to be more hands-on, manually add, remove, and re-arrange keyframes to fine-tune your content. It is easy to create natural curves by clicking and dragging on an element's motion path to
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました