これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎
弊社では全ての新規サイトの構築で、CSSフレームワークをtailwindcssに切り替える意思決定を行い、実際に1年くらいが経過しました。「案件によって、tailwindが向いてそうなものは使う」ではなく「全ての案件で使用」です。使えば使うほどメリットの大きさを感じていますが、同時にtailwindcssの世界観が世間の常識とあまりにも違うため、社内のスタッフには少なからず戸惑いがまだ残っているように思います。 そこで、改めて「なぜtailwindcssを使うと効率的にサイトが構築でき、メンテナンス性が上がるのか」反対に「tailwindcssを使う上で、やってはいけないことは何か」についてまとめたいと思います。 tailwindcssとは tailwindcssとは、2020年11月にバージョン2.0がリリースされたばかりの、今注目のCSSフレームワークです。CSSフレームワークといえば
HTML Cheat Sheet- List of HTML Elements by Category
Disclosure: Our content is reader-supported, which means we earn commissions from links on Digital. Commissions do not affect our editorial evaluations or opinions. Hypertext markup language (HTML), has come a long way since Tim Berners-Lee invented it in 1991. The rise of e-commerce websites in the previous years resulted in the continuous innovation of the programming language. HTML5 is the late
ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ
平尾誠@ARUTEGA.Inc @Makopontass コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。 吉本 集 / aru inc. @tsuDoi220 いやー、実際そうなんですよねー。 ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。 後、速度とちゃんと納期守ること。 当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st…
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦
Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
CSSだけで画像を上下中央に配置する « SRC Blog -samurai-rok.com-
久しぶりすぎて若干死に掛けたブログですが たまにはWEB屋らしい情報を 「CSSのみで画像を上下中央に配置する方法」 イメージ的にはこんな感じ HTML5やCSS3の話題で盛り上がってる中今更なネタですが 調べてみると中々バッチリとした答えが見つからないので 書いときます 一応仕様としては 1.HTMLを汚さない、余計なタグは書かない 2.ハックを使わない 3.IE6、IE7、IE8、その他モダンブラウザ対応 4.imgはどんなサイズでも囲うdivの上下中央に配置する こんなとこですかね で早速答えは 【HTML】 <div><img src=”images/src.jpg” alt=”img” width=”100″ height=”50″ /></div> 【CSS】 div { width:300px; height:200px; display:
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
印刷にも対応！imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや？という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス： https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト？ 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう！ CS
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
deck.js » Modern HTML Presentations
<div class="deck-container on-slide-1"> <section class="slide deck-previous"> <h1>My Presentation</h1> </section> <section class="slide deck-current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck-next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
WEBサイトを英語圏向けにローカライズする際、「<input type="file">の「参照...」ボタンのラベルはどうやったら」『英語に』「変更できるのでしょうか？…
WEBサイトを英語圏向けにローカライズする際、「<input type="file">の「参照...」ボタンのラベルはどうやったら」『英語に』「変更できるのでしょうか？※javascriptで<input type="file">をテキストボックスとボタンで置き換えると言う方法 」 を教えていただけると助かります。 「」内は以下の質問から引用しました。 http://q.hatena.ne.jp/1213745013 この質問への回答によると、ブラウザ（または OS?) が英語版なら問題にならないとのことですが、英語版でないブラウザでも英語表記にしたいので、お答えくださいませんか。 変更前のコードは以下のとおりです； <input type="file" class="input_file" name="upfile_1" size="40" /> よろしくお願いします。
javascript初心者です。 下記の要件で、実装のコードを教えて下さい。…
javascript初心者です。 下記の要件で、実装のコードを教えて下さい。 【要件】 ①４つのボタンがあり、どれか一つを選択可能。選択すると選択された画像になる (http://agtsmartphonedesign.com/300/ こちらのページの上の方にある 「TOP」「コレクション」「ランキング」。。。のようなボタンです） ②選択されたボタンは<select name="hoge">内で各々の値を持つ。 ③iphoneでの実装を想定 ④html javascriptで実装 説明が明確ではなく申し訳ないのですが、質問の意図、ご理解頂ける方いましたら ご回答宜しくお願いします。
携帯サイトはfont size=-2ということについて長々と。 - webの人 @ryryo
あまり触れられることの少ないことなのですが、 携帯のコーディングをされている方の多くは、 基本的にすべてのfont sizeを-2に指定していることが多いです。 (px等で指定する場合を除く。) では、なぜ-2にするのか。 まずそもそもフォントサイズを小さくしようとするのかというと、 一行あたりの文字数を増やつつ、文字列の高さも低くしたいためです。 私の携帯基準(ドコモ N906i)で話すと、 標準サイズの場合、一行あたりの文字数は12文字です。 そして-2にした場合、一行あたりの文字数は15文字になります。 数字にすると大して変わらないじゃないか、と思われがちですが、 実際にコーディングをしていると、この3文字の大事さを知ることになります。 メニュー⇒着うた/占い/デコメ と一行に収まるのか、 メニュー⇒着うた/占い/デ コメ と二行に渡ってしまうのか、ということで。 どう文言を削っても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita
Components · Twitter Bootstrap
http://designaholic.cc/2011/03/webweb21.html
