コーディング作業が爆速に！ すぐ使える便利なHTML5スニペット15個まとめ
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
試してみたらすごかった！PNG画像を最適化し、ファイルサイズを大幅に減らす無料アプリ -Crunch
無駄な損失が多いPNG画像を最適化し、画像品質の穏やかな部分を利用して、ファイルサイズを大幅に軽量化するmacOS対応の無料アプリを紹介します。 アプリの性質上、得意な画像と不得意な画像がありますが、ほとんどがファイルサイズ半分以下に軽量化されました。 Crunch -GitHub Crunchで最適化した画像 Crunchのインストール・使い方 Crunchで最適化した画像 Crunchで最適化する際の得意な画像と不得意な画像を見てみましょう。 「DSSIM類似スコア」は、0に近いほど画像が類似している値です。 ※DSSIMは人間の知覚をシミュレートして、画像の類似度を比較するツールです。 元画像（size: 325.6 KB） 最適化した画像（size: 124.3 KB） DSSIM類似スコア: 0.001481 Crunchの得意なタイプの画像です。 目で感知できない部分を減少させ
ブラック企業は少ない!? アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第2回目となる本記事ではウェブ業界に関する「学習方法」「HTMLのコーディングスタイル」「JavaScriptのコーディングスタイル」「労働時間」「フォント」の5分野のアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 HTMLやCSSを学ぶとき、何で勉強をはじめましたか ウェブ制作の初学者はどのような手段で勉強しているのでしょうか。従来は解説書や会社/学校で学ぶことが多かったと思いますが、最近は動画学習サイトが充実しています。2013年以降に学び始めた方へ質問しました。 208件の回答があり「本」が34%、「学校/会社/スクール」が31%、
Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果（業務時間やコードの書き方、Web技術について） - ICS MEDIA
Web業界は何時まで働くのか？ HTMLコーダーへのアンケート結果 （業務時間やコードの書き方、Web技術について） ウェブ制作者の就業時間やコーディングスタイルなど、皆さんは気になったことはありませんか？ 同業者と交流の少ない職場だと、常識だと思っていることが業界多数の傾向と異なっているかもしれません。 そこで、Twitterアカウントから実施していたWeb業界に関するアンケートをまとめました。この記事では「Web業界の働く時間」「トレンドの技術」「コーディングスタイル」「フォント」の4つのアンケート結果を紹介します。 Web業界は何時まで働くのか？ 当サイトICS MEDIAのアクセスは18時を超えると急激に下がります。このことから、Web業界で働く大半の方々は18時に仕事を上がっているのではないかと考えるようになりました。このことをツイートしたら意外性があったらしく多くの注目を集めま
HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
【iPhoneX対応】webサイトのSafe Area対応（iOS11.1とiOS11.2） - Qiita
iPhoneXが発売されしばらくたち、iOS11のリリースやバグで世間は賑わっているようです。 iPhoneXで新しく導入されたSafe Areaにコンテンツがどのように表示されるのか、ざっと検証してみました。 今回検証したポイント 固定フッター（スマホサイトでよく見られるページ下部にメニューなどがfixedで固定されているデザイン）がどのような見え方になるのか iOS11.1とiOS11.2の記述方法の違い 関連ワード Safe Area, viewport, css, constant(), env() 検証に利用した基本コード・修正前（一部を抜粋） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
Designing Websites for iPhone X
The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. The inset area is filled with the
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
コードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツール
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> function googleMap() { var latlng = new google.maps.LatLng(,);/* 座標 */ var myOptions = { zoom: , /*拡大比率*/ center: latlng, mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById('map1'), myOptions); /*アイコン設定*/ var ic
[jQuery] スマホでアクセス時にリンク先を切り替える
通常のサーバーではそもそもそんな事は必要無い様に作ればいいだけなんですが、大手ECサイトに出店している場合はそうもいかない時が多々あります。 例えば都度行われるキャンペーンサイトへのリンクはイベント毎にURLが都度決まりますが、サイト毎に仕様が違います。 ヤフー 一つのURLでリダイレクト 楽天 デバイスごとに違うURL こう見るとYahooショッピングは優秀ですね！ 楽天の場合は、各ページをデバイス毎に用意している事が多いです(2016年1月時点) まぁスマホでPC用のリンクで飛んでも、スマホ用ページを見るボタンがヘッダーに追加されてるので、それを押せばいけるので問題無いっちゃなさそうですが、そもそもスマホで来てるのに、わざわざPCページに一回飛んで、スマホページに飛ぶ。という2段階リンクは、無駄に1ページ分読み込まないといけないので、非常にナンセンスですよね。 そこでリンクする際に、ス
![[jQuery] スマホでアクセス時にリンク先を切り替える](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4cf09916d98ff422b0c3205403feb7793a0b107/height=288;version=1;width=512/https%3A%2F%2Fhyp.llc%2Fwp-content%2Fuploads%2F2016%2F02%2Ftips-urlchange-cover.png)
【imageswitch】jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
レスポンシブWebデザインではおもにウィンドウサイズによってレイアウトを変更していきますが、画像はHTMLとCSSだけでは最適化するのが難しいです。 backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。また、srcset属性を使えばウィンドウサイズや解像度によって画像を切り替えることができますが、IEはまったく対応していないので専用のプラグインを読み込む必要があります。 そこで使用しているのが、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。 ウィンドウサイズを検知して画像ファイル名を置換する HTML側は.js-image-switchのついているimg要素のファイル名を以下のように変更して表示を切り替えていきます（ここでは仮に768pxとします）。.js-image-switchにはCSSでス
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
blog.鶯梭庵/links/改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その１
二〇一七年 卯月 卅日 日曜日 ■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その１ [/links] この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。 もう３年近く前になるが、「たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる」という記事を書いた。その内容に大きな間違いはないのだけれど、３年前と今とでは状況が変わっているし、あらためて読み返してみると我ながらわかりにくい記事だと思った。 一方、Google で「meta viewport」と検索して上位に出てくるページを見る限り、３年たってもまだ理解していない人が多いようだ。たとえば「もう逃げない。HTMLのviewportをちゃんと理解する」は、残念ながら理解が中途半端だ。そんなわけで、改訂版を書くこ
Web制作で気になることのアンケート結果（2017年版）
Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。 アンケートの実施期間は2017年1月〜8月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100〜300件前後で、私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、コンピュータープログラミングなどとなっています。 性別（推定）は 73% が男性、27% が女性となっています。 IE対応について Web制作者
compass使う人こそ、TincrでのCSSコーディングがかっこいい - Qiita
わりと最近までCSSは、chromeの「Sources」タブで、 リアルタイムに変更を見ながら書くのが最高だと思ってました。 が、compass/Sassを覚えるとやっぱりこれも捨てがたい。 というわけで、compassで書きつつもリアルタイム確認ができるツール探したら、ありました。 chrome拡張機能Tincrです。 Tincr Chrome Extension http://tin.cr/ Chrome ウェブストア - Tincr https://chrome.google.com/webstore/detail/tincr/lfjbhpnjiajjgnjganiaggebdhhpnbih こいつをインストールすると、おなじみchromeの開発者ツールに「Tincr」タブが追加されます。 タブごと追加するというあたりイケメンですね。 http://gyazo.com/3566609
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]YouTube動画をサイトに埋め込む方法2(ブラウザの高さにfit) | ぱたこぼ-ブログ-
Styling Wizard: Google Maps APIs
Riku Design Apps
