Webエンジニアのブログ

Webで扱える画像フォーマットが増え、Webページの構築でマークアップしていく際も、用途に合わせて画像を準備していくことでしょう。多くの画像フォーマットが作られる中でさらに、劣化が少なく画像を軽量化できる画像フォーマット「AVIF」が開発さ...
続きを読む>>

昨今、多くのデバイスやブラウザの対応によって、Webサイトも目に優しいと言われているダークモードのデザインが求められるようになりました。 ダークモードとなると暗い色調のデザインをCSSで用意していくことになるので、既存のWebサイトでは対応...
続きを読む>>

Web制作において、コンテンツの横並びには、flexboxやfloatプロパティを利用していくと思います。 flexboxを利用する場合には、横並びの他にもいろんなオプションで変化を加えることができます。またシンプルに横並びを実装する場合は...
続きを読む>>

Processingでは主に、総合開発環境のエディタでプログラムを書いてアートやデザインを実装していきますが、プログラムが長くなってくると、スクロールする動きが大変に感じることもあります。ソースコードが長ければ長いほど大変です。 Proce...
続きを読む>>

Processingでデジタルアートやデザインを作っていく中で、いろんなフォントを活用することもあります。loadFont()やcreateFont()でフォントを取り込んで利用していきますが、お使いのパソコンにインストールされているフォン...
続きを読む>>

Webページで載せる画像が多いと、画像の数だけ読み込み処理が発生するので、表示速度に大きな影響を与えます。画像のファイルサイズの大きさもそうですが。ファーストビュー（above the fold）の可視範囲だけでも素早く表示するために、スク...
続きを読む>>

CSSで普通にビューポートでウィンドウの高さに調整すると、アクセス時のファーストビューではツールバーの高さ分だけ重なって表示されません。デザイン上あまり影響なければいいですが、気になる方にここでは、CSSでツールバーを除いた高さで全画面表示...
続きを読む>>

WordPressでWebサイトを運用する中で、お問い合わせを受けるコンタクトフォームを、Contact Form 7というプラグインで実装されることが多いでしょう。 Contact Form 7を利用する中で、実際にWebページにフォーム...
続きを読む>>

Webサイトからのお問い合わせは、コンタクトフォームなどを設置して対応されるサイトが多いのではないでしょうか。人気で利用が多いWordPressなどでは、プラグインを使って手軽にコンタクトフォームが設定できたりします。 ただ、迷惑メール対策...
続きを読む>>

Webページのコンテンツの見せ方として、アニメーションの動きを加えることもユーザーの目を引く一つのデザインです。スクロール時のアニメーションはいろんなデザインで採用されています。ここでは、jQueryのみでスクロール時に要素が可視範囲に入っ...
続きを読む>>