★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita
こんなsectionは○○だ 1.見出しが無い 見出しが無い/用意できない = 章や節ではない = sectionじゃない 2.段組みのためだけに使う sectionはdivの代わりじゃない セマンティクスを意識しよう nav サイトナビゲーションセクションを表す。 <nav> <ul> <li><a href='/'>サイトトップ</li> <li><a href='/about'>このサイトについて</li> <li><a href='/contact'>お問い合わせ</li> </ul> </nav> こんなnavは○○だ 1.nav要素を大量に使っている nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。 多くても３つくらい たとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav 検索ボックス、リンク集は非nav 2.リストじゃない セマンティ
![[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e046ca639b0ef553e0aaa08942c2f4b9b300ac6b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSFRNTDUlNUQlMjAlRTYlOTYlQjAlRTglQTYlODElRTclQjQlQTAlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODAlOTAyMDE0JTJGMiUyRjE0JUU3JTg5JTg4JUU1JThCJUE3JUU1JTkxJThBJUU1JTgwJTk5JUU4JUEzJTlDJUUzJTgwJTkxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZmYyMjZjMDYyZmM0OTZlNzBiZDc4ZDA4MjUwNTgzYQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFjY290c2FuJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mZjJmMjZkMTc0MTUyYjFiMTZlZTZjODNiYTlhZDEyMg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D61e64db1c2b5e89c255a4b15721526f6)
HEX色コードよりも短くなる色キーワード
おおまかに6文字以下なら短くなるんだけど、一部blackなどは#fffとHEX色コードを省略できるため、色キーワードの方が長くなる。更に例外としてredのみ#f00よりも短くなる。 実装すること自体はそんなに面倒でもない。けどこれを実装すると、色キーワードを切り出してHEX色コードにするとか逆もやらなくちゃならなくなりそうで面倒くさい。 追記 HEX色コードから色キーワードだけはとにかく実装した。rgb() (hsl())→HEX色コード→色キーワードもちゃんと機能するので、rgb(240, 230, 140)とかhsl(54, 76.9%, 74.5%)と書くとkhakiに変換されるようになった。 最初、色変換に使っているone-colorパッケージが内部に持っている色キーワードのリストを変換して変換テーブルを生成しようかと考えていたんだけど、プライベートな変数でアクセスできなかった……
HTML［meta要素］ビューポートを設定する - TAG index
width の既定値は、ブラウザにより異なる場合があるようです。 複数のプロパティを指定する場合は、カンマ（ , ）で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width （端末画面の幅に合わせる）を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。（
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ - 聴く耳を持たない(片方しか)
このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって？ まずコードゴルフとはなにか？の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
Plastic Prison - Diary - HTMLにおける画像の拡大縮小
使ってる人がいるかは知りませんが、まな板(旧名:ドット絵掲示板(辛口))には投稿されたドット絵をその場で拡大縮小する機能があります。 その場でやっている以上、サーバーサイドのテクニックではなく クライアントサイドのテクニック、すなわちJavaScriptを用いているわけですが、 今日はJavaScriptを用いた画像の拡大縮小の僕の個人的なメモ的なお話です。 JavaScriptで拡大縮小をする方法はそんなに多くはなく、 imgタグのwidthとheightを弄るのが最もメジャーであると思います。 100x100の画像に対して二倍表示したい場合はwidth=200、height=200を設定してやれば良いのです。 まな板もつい最近までこれによって画像の動的拡大縮小を実装していました。 dotllectなんかも同じようにやってるようです。 ですが、この方法には一つ問題があります
【楽しく学ぼう】第5回スマートフォン用ページの作成：アフィリエイト リンクシェア
スマートフォン用ページの作成 今回からは、テンプレートやページの自動変換サービスを利用するのではなく、自分でページをコーディングして作成したい！という方のために役立つ知識やツールをご紹介していきたいと思います。 ページ制作時に意識すること スマートフォン向けページを制作するのと、パソコンや携帯電話で閲覧するページを制作するのとでは一体何が違うのでしょうか？ページを制作するにあたり、意識すべきことをまとめました。 (1)画面の大きさ かつて携帯電話の主流な画面サイズは、QVGA（横240x縦320ピクセル）と今よりもだいぶ小さめでした。 一方スマートフォンの画面の大きさは機種やOS（iPhone,Android）によって様々ですが、主なサイズは横320ピクセル～、縦480ピクセル～となっています。 携帯電話とスマートフォンはパソコンサイトに比べ画面はずっと小さく、コンテンツの量や文字の
iPhone / iPad サイズ別 apple-touch-icon.png 作成
アイコン（PNG）を指定するには、linkタグで指定する方法と、特定のファイル名で保存する方法の2種類があります。 アイコン画像をlinkタグで指定する 全てのデバイス共通のアイコンを指定するには、次のコードをHTMLのheadタグ内に記入します。 <link rel="apple-touch-icon" href="apple-touch-icon.png" /> さらに、デバイス別にアイコンを変更するには、「sizes」属性でサイズを指定します。iPhone 4（Retinaディスプレイ）の記入例は次のとおりです。 <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" /> このようにして3種類のサイズのアイコンを指定すると、次のようなコードになります。 <link rel="a
Android のユーザーエージェントの検出について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Hop step XHTML -- Section 20
本節では，メタ情報に関して，少し細かい点にも踏み込んで説明していく。また，メタ情報の与え方の枠組みとして，Dublin Core を紹介する。 head 要素には，profile 属性がある。これには URI を与え，メタ情報を与える枠組み，メタ情報に何を与えてどのように解釈するべきかを指定する。このプロファイルが，スキームと大きく関わることがある。 次項で，ひとつのプロファイルの例として Dublin Core とその XHTML における利用を簡単に述べる。 Dublin Core（ダブリンコア）は，標準化されたメタ情報の与え方のひとつである。 Dublin Core の書き方に基づくメタ情報を XHTML に書き込む場合，head 要素の profile 属性を次のように指定することになる。 <head profile="http://dublincore.org/documents
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
yahooとyimgを別ドメインにする理由 | beroの日記 | スラド
初耳です。HTTP1.1仕様であるRFC2086には「サーバやプロキシへ最大で 2 接続」とありますが ドメインは無関係です。（サーバとドメインの違いについてはココでは解説しません） リンク先記事 の元ネタは Yahoo!パフォーマンスチーム、最新高速化ルール20を発表 Split components across domains - Maximize parallel downloads - But not more than 2-4 domains, because of the DNS lookup penalty - www.example.org - HTML content - static.example.org - HTML components とあるので、ここでいう「domains」は所謂「ドメイン」ではなく、サブドメイン含む「サーバ」のことだと思います。（原文も悪い
Yahoo!パフォーマンスチーム、最新高速化ルール20を発表 | エンタープライズ | マイコミジャーナル
Webアプリケーション開発に欠かせないFirefoxエクステンションであるFirebugをベースにして開発されたWebページのパフォーマンス計測ツールにYSlowがある。2007年12月上旬にはパフォーマンス分析能力を向上させたYSlow 0.9がリリースされた。紹介にもあるように、手軽に導入できるうえにかなり効果的に分析ができるところに特徴がある。 YSlowの強みとなっているのはYahoo! Exceptional Performanceチームが分析した評価基準をベースにしている点にある。Yahoo!が実際に分析した結果をベースにしているだけあって効果が確実なものとして効いてくるわけだ。 そのYahoo! Exceptional Performanceチームから最新の調査結果およびパフォーマンスブレークスルーのための新しいルールが発表された。既存の14のルールに加えて、新しく20のルー
t32k.com - このウェブサイトは販売用です！ - t32k リソースおよび情報
このウェブサイトは販売用です！ t32k.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、t32k.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
昨日はじめたばかりのダイアリー初心者が最初に覚えたい「5つのはてな記法」 - シナトラ千代子
自分の経験からくるものなので、あくまでサンプルということで。 最近、知り合いのはてなダイアリー初心者にいろいろと教えることがあって、まずなにを覚えたらいいか、そのあたりを簡単にまとめてみました。 「とりあえず書ければええねん、デザインとかはあとで考えたらええねん」というかたのためのものです。これがベストではありませんが、あとは少しずつ覚えていけばいいかと思います。 はてな記法ってなに？ はてなダイアリーで使用できる「省略化されたHTML」と考えてください。 いろいろあります。 →●はてなダイアリーのヘルプ - はてな記法一覧 どれから覚えるべきかを簡単に説明します。 最初に覚えるべき5つの記法 まずは以下の5つです。 見出しをつける（見出し記法） 改行タグを挿入する（改行記法） リンクを簡単に記述する（http記法、mailto記法） 引用ブロックを作る（引用記法） はてなフォトライフに登
Bonn-note > XHTML & CSS リファレンス [WEB ARCHIVES より]
はじめに 以下のリファレンスはフライソンさんが作られたものです。 以前、フライソンさんのサイト[WEB ARCHIVES]には、このリファレンスが掲載されていました。 しかし、ある日サイトにアクセスすると...おつかれ 煮るなり焼くなりご自由にと書いてあり、このリファレンスが入った圧縮ファイルが置いてありました。 なお、現在[WEB ARCHIVES]は完全に閉鎖されているようです。(ちなみにURLはhttp://fls.moo.jp/) このままではこの素晴らしいリファレンスがもったいないと言うことで、Bonn-noteで掲載することにしました。 そんなわけで、以下の事をご留意下さい。 最近検索して分かったんですが、結構いろんなところで公開されてるみたいですね。とりあえずこのまま置いておくつもりですが... 注意 以下のリファレンスはフライソンさんが作られたものです 掲載するにあたって許
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
*.htmlを*.html.gzに圧縮しても*.htmlのままでアクセスできるようにしてディスク容量を節約する
文字実体参照