HTML

すぐに使える!フレックスボックスを使って作れるパーツを紹介

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

レスポンシブページでのテキストの改行はどうする?

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

お問い合わせフォームを作ってみる -実装編④:入力内容送信後の自動返信メール機能実装-

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

お問い合わせフォームを作ってみる -実装編③:エラー時の処理と値を保持する処理の実装-

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

SNSシェアボタンをオリジナルスタイルで設置する方法2021

こんにちは、ナカムラです。 今回はSNSシェアボタンの設置方法について書こうと思います。 (この記事は2021年1月27日時点での情報になります) よく設置するTwitter、Facebook、LINEについてです。 オリジナルのスタイルで設置する方法と、 シェアの際に本…

お問い合わせフォームを作ってみる -実装編②:入力内容のバリデーション-

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

vue.jsでHTMLの流し込みを簡単に!コンポーネント化でパターン違いも簡単!

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

お問い合わせフォームを作ってみる -実装編①:入力・確認・完了画面の作成-

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

お問い合わせフォームを作ってみる -要素・機能編-

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

rel=“noopener”とは?

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

2019年 HTMLメールを作る時の注意点

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

canvasを使って行ったり来たりするアニメーションを作ってみた

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

HTML・CSSを組む時の工夫〜動的なページ編〜

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

HTML・CSSを組む時の工夫 〜レスポンシブ編〜

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