こんにちは、ナカムラです。 先日11月11日に開催された「アクセシビリティカンファレンス福岡」に参加しました。 Youtube配信を見ていただけですが参加と言う。見るだけでも大事です。 アクセシビリティの向上は障害者のためだけではなく、みんなが使いやす…

こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…

こんにちは、ユアサです。 今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。 何もないはずのところにクリック領域がある テキストや画像、あるいはhtmlタグ…

こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…

こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…

こんにちは、ユアサです。 アームズでフロントエンドの見習いとして活動し始めて1ヶ月ほどが経ちます。まだまだ勉強することは多いですが、一つひとつを焦らず段階を踏んで学んでいけたらと思っています。 今回は、自分が勉強していく中で知ったCSSのフレッ…

こんにちは、ナカムラです。 レスポンシブなページではユーザーの環境によって表示される幅が様々です。 スマホのような幅の狭い画面には縦並びに、PCのような幅が広い画面では横並びにするなど、ユーザーに最適なレイアウトに調整していきます。 レイアウト…

こんにちは、ユアサです。 前回の記事では、エラー時の処理と値を保持する処理を実装しました。今回は、最後の機能である自動返信メール機能を実装します。 ↓前回の記事 tech.arms-soft.co.jp PHPMailerのインストール PHPMailerはComposerを使用してインス…

こんにちは、ユアサです。 前回までの記事ではValitronを使用した入力内容のバリデーションを実装しました。今回は、前回予告した通りバリデーションでエラーが発生した際に入力画面に戻り、エラー内容が表示される処理を実装していきます。 また、バリデー…

こんにちは、ナカムラです。 今回はSNSシェアボタンの設置方法について書こうと思います。 （この記事は2021年1月27日時点での情報になります。2023年9月22日：Twitterの部分に追記しました。） よく設置するTwitter、Facebook、LINEについてです。 オリジナ…

こんにちは、ユアサです。 前回までの記事では、入力画面・確認画面・完了画面を作成しました。今回は、このシリーズで紹介したライブラリであるValitronを使ってバリデーション機能を実装していきます。 ↓前回の記事 tech.arms-soft.co.jp ↓前々回の記事（…

こんにちは、ナカムラです。 スタティックのHTMLページを作成している中で、商品情報など、 同じレイアウトを繰り返すコンテンツがあります。 数が少なければ手作業で書き込めば良いですが、10件、20件ともなるとなかなか大変な作業になります。 そこで今回…

こんにちは、ユアサです。 前回までの記事では、お問い合わせフォームを作成していく上で実装したい入力項目やライブラリを紹介しました。今回はそれらを使って、土台の部分となってくる入力画面、確認画面、完了画面を作成していきたいと思います。 ↓前回の…

こんにちは、ユアサです。 今回は、簡易的ではありますがお問い合わせを想定したフォームの作成をしていきます。 フォーム作成のお手伝いはしたことがありますが、一人で作成したことがなかったので一つひとつ順を追って作成していきたいと思います。 まずは…

こんにちは、中村です。 今回はこちらの記事で紹介されている「rel="noopener”」という属性について確認していきたいと思います。 「Firefox 79」が正式リリース ～Windowsで新レンダラー「WebRender」の適用を拡大 - 窓の杜 記事の内容はFirefox79の仕様でr…

こんにちは、中村です。 今回はWebサイトから少し離れて、HTMLメールについてです。 HTMLメールはあまり作る機会がなく、数年前に作ったきりだったので作り方の注意点が変わっていないか確認していきたいと思います。 主な注意点 ・WEBブラウザ以上に仕様が…

遅ればせながらcanvasを勉強し始めました。 「ちょっと動きが欲しいんだけど」にサクッと応えたい。 そもそもcanvasってなんなんだ？というところからのスタートです。 単純なアニメーションならtransitionやanimationなど、CSSだけである程度は動かせますが…

こんにちは、ナカムラです。 前回はレスポンシブページを作る時の工夫していることをご紹介しました。 今回は動的なページを組む時の工夫についてご紹介します。 動的なページとは、プログラムによってテキストなどの要素が出力されるページです。 このブロ…

こんにちは、ナカムラです。 今回はHTML・CSSを組む際に工夫しているところを紹介しようと思います。 コンテンツ幅を一定にするならデザインと同じようにできていれば問題ありません。 レスポンシブの場合はウィンドウサイズの異なるデバイスに対応するため…