アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik
ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時、モックアップが必要な時などに便利です。BootstrapやTailwind CSSが使用されているので、勉強用にもいいですね。 Free HTML templates for websites and landing pages -Inovatik Inovatikの特徴 HTMLテンプレートのダウンロード Inovatikの無料HTMLテンプレート Inovatikの特徴 Inovatikはフロントエンドデベロッパーが実装した、ランディングページや小規模Webサイト用のHTMLテンプレートを無料でダウンロードできます。 すべてのHTMLテンプレートはMITライセンスで、
Sublime Textをもっと快適で便利にする、フロントエンドのWeb制作に役立つプラグインのまとめ
Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。 エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。 Sublime Text 3 Plugins for Frontend Web Development キャプチャは、Sublime Text 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 Sublime Textの管理系プラグイン Sublime Textの一般系プラグイン Sublime TextのJavaScript関連のプラグイン Sublime TextのHTMLとCSS関連のプラグイン Sublime Textのリンター関連のプラグイン Sublim
【プロが解説】Webデザイナー必見！評価されるポートフォリオの作り方
転職や独立を考えているWebデザイナーにとって、ポートフォリオは必須の資料。スキルをアピールするためには欠かせません。しかし、いざ作ろうと思ったときに、どのような内容を盛り込むべきか、作品はいくつ載せればよいのかなど気になることは多いはず。 そこで本記事では、Webデザイナーのためにポートフォリオサイトの作り方を解説します。例を交えながら詳しく解説するので、実務未経験でこれからポートフォリオを作る方はもちろん、すでにポートフォリオを持っている方も参考にしてみてください。 ＜この記事に関連する記事＞ おしゃれなポートフォリオサイトのおすすめ20選！参考にしてかっこよく作ろう ポートフォリオ作成ツールのおすすめ5選！作り方のコツも紹介！ 【プロが教える】Webデザイナー必見！受かる職務経歴書の書き方【フォーマット付き】 目次 Webデザイナーにとってポートフォリオが重要な理由とは？ Webデザ
WEB＆メール系のおすすめアプリ超まとめ！ - wepli.2
2015-11-04 WEB＆メール系のおすすめアプリ超まとめ！ アプリ超まとめ 本日から何回かに分けて、『アプリ超まとめ』なる記事を書いていきたいと思います。記念すべき第１回目の『アプリ超まとめ』は『WEB＆メール系のおすすめアプリ』でいきたいと思います。定番アプリからおすすめアプリまで一挙に大公開です。各分野から選りすぐりのアプリをピックアップしました。ブラウザアプリや、RSSリーダーアプリ、メールアプリなどをお探しの方はぜひ読んでみて下さいね。 ※ アプリ超まとめでは基本的におすすめの無料アプリをご紹介します。 おすすめのブラウザアプリ Chromeブラウザ ドルフィンブラウザ Sleipnir Mobile Puffin Web Browser ゼロパケットブラウザ おすすめの検索アプリ Google Goggles 画像検索 超画像検索 おすすめのRSSアプリ feedly gR
パーミッションについて
「６」とは「４＋２」に分解され、上の表に照らし合わせてみれば、「読み出し可能」で「書き込み可能」という意味になります。オーナーとはファイルの所有者のことですから、読み出す（=4）こともできなければなりませんし、ファイルを適宜修正できなければなりませんし（書き込み可能=2）。.htaccessはCGIのように実行する必要はありませんので、「７」＝「４＋２＋１」にする必要はありません。また、.htaccessはブラウザが解釈できないといけませんので、必ずnobodyに権限を付与し読み込み可能（+4）にする必要があります。もし、ここで間違って、「その他（nobody）」に対しても書き込み可能（+2）にしてしまえば、（同じサーバ内にあるＣＧＩファイルなどにセキュリティホールがある場合）.htaccessファイルや.htpasswdファイルがブラウザ経由でも修正削除が可能になり大変なことになります。
レンタルサーバーナレッジ
Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。
2011年3月11日、なぜ「Twitter」は落ちなかったのか？ 多くの人が知らない、意外な真実。 | TABI LABO
東日本大震災から4年。 新聞、テレビをはじめ多くのメディアが当時を振り返り、未曾有の災害がもたらした被害を忘れまいと結んでいる。しかし、ここで振り返るのは、災害そのものや被災地についてではない。2011年3月11日、アメリカでの出来事だ。 あの日、 Twitterがライフラインだった 震災直後、電話やメールがつながらない状況下で、大きな役割を果たしたのがSNSだった。とくにTwitterは、被災地の状況や安否確認などにおいて重要な役割を果たした。 一説によると、震災から1週間で投稿されたツイートは約1億8千万。震災を機に、多くの人がTwitterをはじめたという記録も残っている。 ここでひとつ、素朴な疑問。電話回線がパンクし、ケータイメールも送受信できない中で、どうしてTwitterだけが機能したのだろう？ 爆発的に利用が増えたのだから、サーバーがダウンしてもおかしくなかったはずだ・
正義感で個人情報を晒すことを許容していると、またスマイリーキクチ氏の中傷被害事件と同じようなことが起きると思います: 不倒城
この記事で書きたいことを最初にまとめておくと、 ・川崎の殺人事件の件で、容疑者や容疑者家族の情報がWebで晒されまくっているという話を観測しました ・当該事件の犯人は法によって厳正に裁かれるべきですが、「個人が」「容疑者に」害意を向け、それを実行するのは単なる私刑であり、もっというと犯罪です ・加害者と被害者のプライバシーのバランスの問題は、「被害者のプライバシーが守られるようになる」という方向で行われるべきであり、「加害者のプライバシーを侵犯する」という方向性で行われるべきではありません ・こういうことが起きると、スマイリーキクチ氏の中傷被害事件を思い出しますですよ ・当該事件も、「根拠が明確でない情報を」「主観的な正義感を持った人たちが勝手に信じ込み、拡散して」起きた点で、今回の件と通底する部分があり、場合によっては将来的にまた似たようなことが起きてしまう可能性すらあると思います ・そ
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
「サーバーってなに？」～初心者でもよくわかる！VPSによるWebサーバー構築講座(1) | さくらのナレッジ
サーバーの扱いに慣れていない初心者の方を対象に、VPS(Virtual Private Server)を使ってWebサーバーを構築し、WordPressサイトを運用できるようになるまでの連載を始めます。 サーバーの構築方法については、中・上級者向けの情報は多く見つかりますが、 「初めてVPSに触れる方が、Webサイトを構築して運用できるようになるまでのノウハウ」 を体系的に解説しているサイトはあまり多くありません。 ネット上に存在している情報では断片的だったり、分からない専門用語が出てきたりして、途中であきらめてしまった方も多いのではないでしょうか？ 本連載では、初心者の方でも「これさえ読めばVPSを構築できる！」ように、初歩から丁寧に解説します。 「今までレンタルサーバーを使っていたけど、一歩進んでVPSに挑戦してみたい」という方のお役に立てれば幸いです。 本連載は以下の構成で5回に分け
jQueryを中心としたJavaScript
�フレームワークを利用した�シングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
早稲田大学のサイトリニューアルがなぜこんなにひどいのか。 - 隣り合わせの灰と青春
久しぶりにセミナー以外でブログ書きます。 このたび早稲田大学のWebサイトがリニューアルされました http://www.waseda.jp/top/ が、かなり論議になりそうなリニューアルなので、 情報設計専門家として内容を見てみます。 1.なにがグローバルなサイトなの？ 今回のリニューアルではIE10以降を対象外としていて、 普通に使っているIE7や8では見ることができません、 これはアクセシビリティ上かなり問題だと思います、 多くの人が目にする大学というサイトでノンアクセシビリティを貫くというのは、 いまの時代にそぐわないのではないでしょうか。 わざわざIE10にアップデートまでしてみるサイトでもないですしね。 ぜんぜんグローバルじゃありません。かっこ悪いです。 2.レスポンシブデザイン？ スマートフォン、タブレットに対応したサイトになったみたいですが、 そもそものとこ
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
超簡単！WordPressのContact form7でスパムメールをブロックする方法
Contact form7を使ってるとスパムメールが多い… こんにちは、Webマーケッターの荒木です。 Contact form7を使っていると、スパムメールがめちゃくちゃ来ませんか？ このサイトでもContact form7を使っているのですが、スパムメールが毎日のように来てました。 多い時には30通くらい来る時があって、これを処理するだけでも非常にストレスです。 面倒くさくなって放置していると、たまに大事なメールもあったりして、焦るときがあります。 同じようなストレスを感じている方もいると思いますので、今回はContact form7でスパムメールをブロックする方法をご紹介します。 超簡単ですので、是非やってみて下さい。 まずContact form7の設定画面を開きます。 「フォーム」の[タグの作成]をクリックして、[承認の確認]を選択します。 表示されているショートコードを左のフォ
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ
CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【リンクあり】webディレクターだけど、初心者に役立つサイト教える：キニ速
Lv1から始めるWebサービスのインフラ構築
クラブ好きな新米エンジニアが1週間でWebサービスを作ってみたよ