Webエンジニアのブログ

MacやWindows PCで手軽にテスト用の開発環境が準備できるMAMP。利用するにあたり少し気になる設定が、PHPソフトウェアのバージョンかと思います。 MAMPはリリースされた時のバージョンによって、利用できるPHPバージョンがメジャ...
続きを読む>>

CSSでWebデザインのレイアウトを調整していく中、レスポンシブWebデザインではよく利用していくビューポート単位（vwやvh等）ですが、表示領域の幅を指定するvw単位において、WindowsとMacで少し表示が異なることがあります。 それ...
続きを読む>>

Webサイトにアクセスした際に、オープニングビデオのように動画を流してから、動画再生後にフェード効果でメインコンテンツを表示するなど、動画を活用することで文字情報だけでなく、動きのある映像で豊富な情報をわかりやすく伝えることができます。 フ...
続きを読む>>

Webサイトを利用しているユーザーが現在どのページ（カテゴリ）のコンテンツを閲覧しているのかを、ナビゲーションメニューのリンクの色を変更するなどして、わかりやすくデザインしていくこともあるでしょう。現在表示しているWebページのリンクだけス...
続きを読む>>

image-set()はCSSの関数で、画像オプションをセットして背景画像を適応させることができる便利な関数になります。ユーザーの端末にあった解像度の画像や、軽量化したフォーマット（形式）の画像の適応など、Webに最適化した画像を適応させる...
続きを読む>>

Braveブラウザでは、Webサイトやブログ、Twitter、YouTubeなどを閲覧しているなかで、応援したいクリエイターに対してチップ（投げ銭）を送ることができます。 検索バー右のBATアイコンからBrave Rewardsの情報が確認...
続きを読む>>

Braveブラウザは、Brave Software社によって開発されているウェブブラウザで、デフォルトで広告やトラッカーをブロックする機能が搭載されており、そのため安全に高速ブラウジングが可能となり快適にネットサーフィンができます。また、ブ...
続きを読む>>

Webサイトのスマートフォンやタブレット端末に対応したメニューは、よくある3本線アイコンのハンバーガーメニューで、グローバルナビゲーションの表示・非表示を切り替える仕様で、主にCSSとJavaScriptまたはJavaScriptライブラリ...
続きを読む>>

通常、Webページは縦にスクロールしながらコンテンツを閲覧していくといった既成概念がありますが、縦幅を固定して横スクロールで魅せていくWebページも、デザインによっては面白いWebサイトに仕上がるのではないでしょうか。 ここでは、横スクロー...
続きを読む>>

主に画像などのコンテンツをギャラリーとして見せていく場合によく利用されるグリッドレイアウト。格子状に分割してブロック内に要素を配置するなかで、各要素はブロックごとで決められたサイズとなりますが、要素の内容によってバラバラのサイズのレイアウト...
続きを読む>>