Webエンジニアのブログ

Webサイトではコンテンツ幅に対するテキスト量や、左揃え、中央揃え、右揃えとテキストの配置によって、テキストの折り返し位置が変わり、場合によっては見栄えが悪い表示となることもあります。 CSSのtext-wrapプロパティを使って「bala...
続きを読む>>

文章中のとある文言にわかりやすい説明が必要な時は、定義リストを意味づけするdl, dt, ddといったHTMLタグを使って情報を載せていくことでしょう。GoogleやBing、Yahoo、またAIチャットボットなどの検索エンジンに、しっかり...
続きを読む>>

様々なWebブラウザでPopover API（ポップオーバー API）がサポートされ、これまではJavaScriptを使って実装していた、ポップアップやオーバーレイと呼ばれるポップオーバーUIを、HTMLのみで実装することができるようになり...
続きを読む>>

WordPressの管理画面で登録したユーザーのプロフィール情報（自己紹介文）は、投稿ページでの投稿者の紹介であったりプロフィール紹介のページであったり、または企業やユニットであれば各メンバーを紹介する際に活用していくこともあるでしょう。 ...
続きを読む>>

WordPressでユーザーを追加する際には、ユーザー名と一緒にユーザーIDの番号が連番で振られますが、サイトのトップページのURLの最後に「/?author=1」のように番号をつけてアクセスすると、対象のユーザー情報（アーカイブページ）が...
続きを読む>>

AI（人工知能）のチャット機能が搭載された検索エンジンBingでは、チャット機能での会話だけでなく、文章のテンプレート作成など様々な用途に合わせて活用できる機能があります。AIツールは仕事からプライベートと、様々な場面で私たちをサポートして...
続きを読む>>

WordPressでの投稿に記事を書いた著者の情報を掲載することで、メディアとしてだけでなく個人としてのブランディングにも繋げることができます。 WordPressのユーザー情報から、投稿者に合わせてユーザーの情報を取得して表示させることは...
続きを読む>>

Sassで記述していくことができたネスト構造ですが、ブラウザでのCSS Nestingのサポートが進み、主要ブラウザではChromeやEdge、Safariなどで、ネイティブなCSSでネスト構造を書くことができるようになります。ここでは、ネ...
続きを読む>>

OpenAIが提供しているChatGPTをはじめ多くのAIクローラーは、インターネット上の膨大な情報を収集して、学習をしながら情報を処理していますので、Webサイトの情報もAIの学習に使われています。 Webサイトに掲載している情報の中では...
続きを読む>>

Webページで番号付きリストを作成する際は、olタグを使って項目の順序付きリストとして番号を表示していきますが、シンプルな数字のほか、type属性の設定でのローマ数字やアルファベットくらいしか表現方法がありません。 CSSのcounters...
続きを読む>>