みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

HTMLのマークアップでアクセシビリティーを向上させる方法として、WAI-ARIA（ウェイ・アリア）があります。HTML要素の属性に aria-* を追加することで音声読み上げの精度を高められます。 WAI-ARIAの特徴として、状態を示す属性が存在します。たとえば、aria-selected 属性。名前の通り、該当のHTML要素が選択状態であるかを示すことができます。ウェブサイトのUIパーツにはタブやアコーディオンなど動的なものがあります。こういった動的なパーツの「状態」はHTMLのマークアップだけでは示すことが難しく、JavaScriptの実装が不可欠です。 ▲本記事で解説するサンプル。タブの切り替えによって、aria-selected属性を動的に切り替えている。JavaScriptの制御が必要である。 よく利用される例としてタブ型のユーザーインターフェイスを題材とし、流行りのJSライ

Dockerデスクトップのアイコンにアップデートの通知が来ていたので実行したら、どうも何かの拍子に不具合があったようで、しばらくしても更新されたような表示にならず、起動中を示すアイコンまで消えたままになってしまった。 そこで、Docker.appのアイコンをクリックして実行してみると次のような表示が… アプリケーション“Docker”は、破損しているか不完全である可能性があるため開けません。 今回は、この問題の解決方法を見ていきましょう。 Docker.appが開けない時の解決方法 Docker.appをクリックした時に出てきた表示は、ちなみにこちら。Macです。intelの。 アプリケーション”Docker”は、破損しているか不完全である可能性があるため開けません。 私の操作としては、最初にも書いた通り、アップデートをした時にこうなりました。私の個人的な経験なのですけど、アップデートの時

Dockerビルドを繰り返すとイメージがどんどん増えていきます。名無しのボリュームもどんどんと増えいつの間にかDockerのメモリや容量を圧迫している、、なんてことがあります。 これを簡単に解消する方法として、不要なデータをまとめて削除する方法とDockerの設定を変更してメモリやCPUの能力を増やす方法についてまとめています。

CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】 object-fitってすごい便利なCSSなんですけどIEでは効かないんですよね... この記事ではobject-fitをIEで効くようにできるJavaScript、object-fit-imagesをご紹介します。 Sassを使用してる方向けにもmixin化したものも紹介します。 CSSだけではobject-fitをIEに対応させることは出来ないので、JavaScriptのobject-fit-imagesを使用します。 インストール方法 スクリプトタグとNPMの2種類を紹介します。 各自環境に合った方法をご選択ください。 スクリプトタグ 以下よりダウンロードしてください https://github.com/fregante/object-fit-images C

PHP8では、それまで警告で済んでいたものがエラーになるものが多くあります。 （エラー例外をスローする。） 個々の変更点では説明されてたんですが、まとまったものがありませんでした。やっと見つけたので、エラー、警告、通知の変更点のレジュメをご紹介します。 2020年11月26日、5年ぶりにPHPのメジャーバージョンが上がりました。PHP8です。 メジャーアップデートだけに変更点も大きいです。ログ出力されるエラー、警告、通知も見直され変更されました。 PHPの公式ドキュメントでは、個々の変更点で『警告からエラーに変わる』『エラー例外をスローする』と説明されますが、エラー、警告、通知の変更の全体像が見えません。 これらのエラーまわりの概要（レジュメ）をWordPressのPHP8対応ドキュメントで見つけました。 今回はそれを和訳してサンプルコードを付けてご紹介します。 PHP公式のRFCもありま

CSSのobject-fitプロパティって便利ですよねぇ。 画像を並べるページではもうほとんどコレに頼り切りで、このプロパティがないなんて考えられないくらいです。 がしかし、この便利なobject-fitさん、IE11は対応してないんですよね…。 そもそもobject-fitって何？ 例えば、下記のような縦長写真と横長写真が混在する場合、普通に並べるとこんなふうにデコボコになりますよね。 幅200pxで揃えたら上下にデコボコになりますし、 高さ200pxで揃えると大きさが不揃いになりますし、 幅200px 高さ200pxを指定すると被写体が歪んでしまいます。 左のワンちゃんは潰れていますし、右のワンちゃんは細長くなっちゃいましたよね？ これを解決してくれるのが object-fit:cover; です。 こんなふうに指定した範囲内で画像をトリミングして表示してくれるんですね。 ■objec

このサイト内に掲載している多くの動きは、jQueryというライブラリをベースにして動かしています。 「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」 といった代表的な「動くきっかけ」の記述の仕方を理解していきましょう。 動くきっかけを指定する基本的な記述

ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

ShapeDividers.com The easiest way to add vertical, responsive or animated Shape Dividers to your websites. This tool is available only from a desktop computer. We recommend that you email yourself this page and come back from your computer! While you are here, have a look at the features! Features ➔

function is_IE() { $ua = mb_strtolower( $_SERVER['HTTP_USER_AGENT'] ); //すべて小文字にしてユーザーエージェントを取得 if ( strpos( $ua,'msie' ) !== false || strpos( $ua, 'trident' ) !== false ) { return true; } return false; } <?php if ( is_IE() ) : ?> <div class="ie_alert"> <span>Internet Explorer、ダメ絶対！</span> <p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br> 言ってしまえば、百害あって一利なしの老害です。<br> 世界中で、多くのWEB制作者があなたの

現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS

2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し

みなさん、こんにちは。さくらインターネット株式会社 技術本部ミドルウェアグループの前佛 雅人（ぜんぶつ まさひと）と申します。Dockerに関するドキュメント翻訳や、Docker紹介用の各種スライドを公開・発表しています。また、かつてはDocker公認トレーナーとして、業務を通してDockerの普及および啓蒙に携わりました。 Dockerの話はみなさんどこかで訊いたことあるかもしれません。しかし、まだまだ使っていない、あるいは、使う段階ではないとお考えの方も多いかもしれません。私は正直、勿体ないと思っています。この現状を打破すべく、"本当はこんなに使いやすいDocker" をテーマに、会社のメディアを通した記事連載の機会を頂戴しました。どうぞみなさま、お手柔らかにお願いいたします。 コンテナが当たり前のように存在する時代に私たちは この世界にDocker（ドッカー）が登場したのは、2013