あれはどうだったかな？ という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな？ CSS FlexboxやGridの挙動がまとめて知りたい、CSSのプロパティの値や対応ブラウザは？ Vue.js, React.jsのよく使用するイベントや構文、ブラウザごとのバグやハックはあるのか、がまとめられています。

概要 ▶ フォームに入力して「送信」ボタンを押し、ページが切り替わったと思ったら「入力ミスがあります」と表示されるのは誰だって嫌なもの。HTML5なら送信前のフォームのチェックはスクリプト不要でできるのです。 このブログのフッター部分にはメッセージを送るフォームがあります。 このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。 ページが移動して（画面が遷移して）エラーが表示されます。 「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。 こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。 一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。 属性は5秒以内で

htaccessのリダイレクト機能を使用すれば、サーバーの移転やページ構成の変更などを行った後に、元のページへのアクセスを新しいページに自動転送することができます。 また、ステータスを指定することで、検索エンジンに対しても”引越し”の通知を行うことができます。

スマートフォンが発売され、今では珍しくなってきたかも知れない「フィーチャーフォン」。 「ガラケー」といった方がピンと来るかも知れませんが利用者もまだまだ居るかと思います。 今Webサイトを作成するにあたってフィーチャーフォンに対応したサイトをテストするとしたら実機が用意できなくて困るかもしれません。 そんな場合に携帯電話エミュレーターで実験しましょう。 iモードHTMLシミュレータII https://www.nttdocomo.co.jp/service/developer/make/content/browser/html/tool2/index.html DoCoMo携帯の公式エミュレーターでインストールして利用するタイプです。 アプリの起動はできないという制限もありますがWebサイトを表示するには問題ありません。 １ページ辺りの携帯電話が表示できるメモリ量に実機と同じ制限があるなど

スマートフォンの普及に伴ってモバイル端末向けコンテンツの充実の重要性が唱えられており、特にページの読み込みと表示に時間がかかってしまうと離脱されるリスクが高いことから、ページに最適化を施して素早く表示することが重要といわれています。対象となるページがどれぐらいモバイル向けに適しているかをURLを入れるだけで検証できるサイトが、Googleの「Mobile Website Speed Testing Tool」です。 Mobile Website Speed Testing Tool - Google https://testmysite.thinkwithgoogle.com/intl/en-us/ テストの方法は非常に簡単で、画面にURLを入力するだけ。例えば、日本で最も多くアクセスされているサイトであるYahoo! JAPANのURLを入れて「TEST NOW」をクリックすると…… ペ

毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと