jQueryを使わずにスライドメニューを実装しようスマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成まずは HTML と CSS で「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定などで、特に変わったことはしていません。 H
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
はじめに WordPress テンプレートはパズルのピースのように組み合わせられ、サイト上で Web ページを表示します。一部のテンプレート（例: ヘッダー・フッターテンプレート）はすべての Web ページ内で使用される一方、他のテンプレートはある条件の下でのみ使用されます。 このドキュメンテーションの目的 このドキュメンテーションは、次の疑問に答えてくれるでしょう。 ある種類のページを表示するとき、どのテンプレートファイルが使われるのか？ このドキュメンテーションの使い方 WordPress 1.5 で「テーマ」機能が導入されて以来、テンプレートはますますカスタマイズしやすくなりました。WordPress テーマを作成するには、WordPress がブログ上の各種ページを表示するためにどのようにテンプレートファイルを選択するのかを正しく理解する必要があります。すでにあるテーマをカスタマイ
CSSのグリッドレイアウトを利用して、ステップ・バイ・ステップでWebページを作成・アレンジしていく一冊です。 はじめに 本書について サンプルについて もくじ はじめに ボックスを並べることしかできなかったWebページのレイアウトが、ついに変わろうとしています。 もちろん、これまでもポジション（position）やテーブル（table）を使って自由なレイアウトを行う試みは繰り返されてきましたが、どれもスマートなものではなく、一般的なテクニックとして浸透していくことはありませんでした。 しかし、今、目の前にあるCSSのグリッドレイアウト（CSS Grid）では、DTPのような自由なレイアウトが可能になります。もちろん、コンテンツの増加に合わせて追従するような設定や、レスポンシブWebデザインの設定も可能です。 そこで、本書ではできるだけグリッドレイアウトの可能性を垣間見られるようなサンプル
2014年7月13日のブラウザエンジン先端観測会での発表内容です。 http://atnd.org/events/52121
HTML Media Capture W3C Recommendation 01 February 2018 This version: https://www.w3.org/TR/2018/REC-html-media-capture-20180201/ Latest published version: https://www.w3.org/TR/html-media-capture/ Latest editor's draft: https://w3c.github.io/html-media-capture/ Test suite: https://w3c-test.org/html-media-capture/ Implementation report: https://www.w3.org/2009/dap/wiki/ImplementationStatus Previous
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
社内向け勉強会で作ったスライド ※Bracketsの拡張機能「Shizimily Multiencoding for Brackets」は最新Bracketsにはいらないようです！
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
湖池屋が、新商品「スゴーン」を発表しました。“すんごいスコーン”だから「スゴーン」とのことですが、公式サイトがデータ置き場用に誰かが5分で個人制作したような大変雑なデザインとなっています。管理人さんはhtml初心者さんかな？ 雑ぅ！ 下の方はこんな感じ。シンプル トップにはノートに鉛筆で手書きした商品紹介をそのままコピー機で印刷したような画像（やや斜めってる）が1枚ベターンと貼られており、その下にはテキストでリンクが5つ置かれているのみ。実に分かりやすく、ユーザビリティが高いですね。型落ちのスマホでも一瞬で開ける軽さが、古（いにしえ）のネットユーザーの心にスーッと染み入ります。 湖池屋いわく、「『スゴーン』の完成度を高めることに注力しすぎたため、Webサイトまで手が回りませんでした。しかしながら、何とか間に合い、『すんごくないサイト』を2017年6月22日よりオープンします」とのこと。これ
現場.fm 現場.fm https://genba.fm/ 第0回: https://genba.fm/react-vs-angular/ RSS: https://genba.fm/podcast.xml Podcast(審査中): https://genba.fm/podcast.xml mizchi(主にReactの人) と armorik83 (主にAngularの人) でフロントエンドで現場の肌感などを話すラジオです。混沌としたフロントエンドの雰囲気などでみなさんのやっていく気持ちなどをサポートしたいという意図。 Jxck さんの mozaic.fm が未来の仕様とかを話すのに対して、こっちは現場の愚直な話がメインとしています。 Podcast は死ぬほど雑なアイコン(Atomのスクショ)にしたので怒られて再審査かも。 このメンバーの意図 React vs Angular、みんな
2017年4月19日 著者の安田さんには別途、Facebookの方でコメント付けておきましたが（これを書いている時点では反応は頂けておりません）、プロの編集者が意識する「ドキュメント構造」――HTML仕様の欠点にひきずられちゃダメ！を読んで感じた違和感を記録の意味で覚え書きしておきます。一言で言えば、この記事が指摘している所の「HTML仕様の欠点」とは何か、が自分には理解できませんでした。 HTMLは、見出しは指定できるものの、「章（または節や項）がここからここまで」というのを必ず示す仕様にはなっていません（HTML5のsectionもあまりそうした利用はされていません）。そのため、マークアップの段階で「あ、ここの段落は浮いてるな」というように気づきにくいのです（docbookなど他の文書マークアップ言語では、セクションの範囲を示すものがあります）。 あまりそうした利用はされていません、と
A11yc アクセシビリティ チェック サービス ver.4.0.4 URL URL User Agent ドキュメントルートURL (ex: http://example.com) 外部CSSチェック
2016年12月21日 忙しさにかまけているうち、すっかり投稿のタイミングを逃してしまって、既に旧聞に属する話ではあるけれど、少し前に話題になったh1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い - Togetterまとめについて、アクセシビリティおじさんとして反応しておきたい。 各所で指摘されている通り、h1要素を複数回使うことについて、是か非かでいえば明確に「是」ですね。W3Cの策定する「HTML5」を使おうと、WHATWGの策定する「HTML Standard」を使おうと。ちなみにSEO上でも問題ないらしい。従い、この話題で論じられるべきは、アウトラインアルゴリズムを前提として見出し要素をマークアップすべきか否かでしょう。HTML 5.1の4.3.10.1. Creating an outlineには、以下の注記があります： There ar
（この記事は2022年9月29日に更新されました） こんにちは。 京都のWebプランニング会社「ウェブライダー」の松尾です。 某社のレンタルサーバーからCPIのサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 現在、ウェブライダーでは、CPIの専用サーバーと共用サーバーのふたつを借り、さまざまなWebサイトを運営しています。 さて、このコラムでは、Web集客を成功させるためのレンタルサーバーの選び方について、いろいろな視点からお話ししていきます。 今回は、Webサイトにアクセスが殺到した際、ページが見られなくなる「503エラー」についてのお話です。 あなたはどこかのWebサイトを見ようとした際、「503 Service Unavailable」「Service Temporarily Unavailable」などのエラーメッセージが表示されているのを見たこ
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
ITの制作現場では、どんな職種でもコードや開発言語などの話題は避けて通れません。ただでさえカタカナ用語の多い業界ですが、プログラミングやコーディングの用語などはカタカナですらなく英語表記ですし、中には読み方が不明確なものもあります。 チームメンバーもさることながら、他社の人と話すときに間違った読み方を使っていたら恥ずかしいですよね。今回は間違いの多いと言われる用語や、議論を読んでいる言葉をピックアップしてみました。 ※更新：米国英語の発音記号を追加しました Webデザイン系 width【wídθ, wítθ】 正：ウィズス、ウィドゥスなど 誤：ワイズなど HTML/CSSの幅指定で使う「幅」という単語です。よく使うものの、発音の仕方に自信が持てない人も多そうです。 height【hάɪt】 正：ハイト 誤：ヘイト 上記とセットで間違えられやすい単語。「高さ」という意味で、ウェブでなくとも「
2016年5月9日 著 大藤さんのKindle版リフロー型電子書籍の第2弾、『わかりやすい「HTML5」仕様解説書』は、今年3月18日16時頃から3月19日16時頃まで、Amazonのサイトにおいて誰でも無料でダウンロードできたタイミングで入手していました。仕様の解説、という題名に偽りは無いのですけど、大藤さんと言えばかつて個人的に大変お世話になった『HTML&XHTML&CSS辞典』のイメージが強いこともあって、本書もその類書というか、タグ辞典と呼んだ方が相応わしく思える内容・構成でした。実際、それは第1章「HTML5の基礎知識」で 2014年10月28日にW3C勧告として公開されたHTML5の仕様書における「HTML構文（MIMEタイプ「text/html」で配信するHTML文書）」での要素と属性の使い方について解説しています。 と明記されている通り。しかし、HTML 5.1が今年9月
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
