Webエンジニアのブログ

Webデザインのレイアウトでは、コンテンツを画面の中央に配置したり左右中央寄せや上下中央寄せなど、要素の配置を調整していくことはよくあります。 CSSで要素の配置を調整する方法としては、Flexbox（フレックスボックス）やGrid Lay...
続きを読む>>

Webページ内でウィンドウの開閉アニメーションを実装していきたい時には、JavaScriptやJavaScriptのライブラリであるjQueryなど、プログラミングを駆使して実装していくことになりますが、aタグ（アンカー要素）と併用してCS...
続きを読む>>

Webで利用する画像に対して立体感を表現する際は、画像自体にドロップシャドウの視覚効果がなくても、CSSのbox-shadowプロパティを利用して、画像に影をつけて表現することもできます。後から微調整や修正ができたりしますので、CSSで効果...
続きを読む>>

昨今のWebサイトは内容が変化するような動的なサイトが多く、CSSで装飾してWebサイト制作していく中、対象の要素を持っているかどうかで、スタイルを変更していきたいこともあります。 なかなかCSSのみでは実装できない部分ですが、今後はCSS...
続きを読む>>

Webサイトによくあるニュースやお知らせ、ブログ記事投稿の一覧では、見出しの文字テキストが長い場合に、「…」で文字を省略していくこともあります。 文字テキストの省略というと、多くのWebサイトで採用されているWordPressでは、PHPス...
続きを読む>>

JavaScriptを簡易的に記述できるjQueryでは、便利なメソッドがいろいろ用意されており、手軽にWebページに動きを加えることができます。ただ、Webデザインでよくある複数の画像を切り替えて表示するスライドショーは、jQueryのプ...
続きを読む>>

WordPressのテーマ開発でよく利用するget_template_part()は、利用中のテーマのテンプレートファイルを呼び出す時に使う関数です。ただ、子テーマで利用していく際は少し注意が必要です。 get_template_part(...
続きを読む>>

CSSのレイアウト構築で便利なFlexbox。とくに横並びのレイアウトではよく利用され、横並びになった要素同士も高さが揃ってくれます。 しかし、コンテンツの量の違いで、横並びの要素とコンテンツの高さと見た目が揃わないこともあります。Webデ...
続きを読む>>

WebサイトとYouTubeを連携して、WebページにYouTube動画を埋め込んでコンテンツを作っていくことがありますが、そのままの埋め込みのデザインでWebページに載せていってもいいですが、ご自身のWebデザインに合わせて、動画のサムネ...
続きを読む>>

レスポンシブWebデザインで、背景色を敷いた要素とテキストの重なり具合においては、リキッドデザインのようにWebブラウザの幅に合わせて可変する場合には、要素同士の重なり具合に合わせてデザインを調整していくことも出てきます。また、画像の上に重...
続きを読む>>