Webエンジニアのブログ

Flexboxでは手軽に横並びのレイアウトを構築することができますが、flexアイテムの子要素のコンテンツ量によっては、見た目の高さが揃わないこともあります。ここでは、Flexboxの横並び要素のflexアイテムの見た目の高さを調整する方...
続きを読む>>

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

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

CSSのbackgroundプロパティでWebP画像を利用する場合、WebPをサポートしていないWebブラウザに対して、サポートしている形式の画像を表示できるように対応する必要がありますが、JavaScriptライブラリ「Modernizr...
続きを読む>>

WordPressは世界的に人気のあるCMSとして、Web制作の現場で広く使われていますが、少しだけHTMLやCSSを理解していたり、PHPスクリプトが書けるという方は、ご自身でデザインをカスタマイズしていくことでしょう。 WordPres...
続きを読む>>

CSSファイルや、JavaScriptを記述して読み込んでいる外部ファイル（JSファイル）は、半角スペースや改行、コメントなど、無駄を省くことでファイルサイズを軽くすることができます。ファイルを圧縮・軽量化（Minify）することで、ファイ...
続きを読む>>

多くのデバイスに対応させるWebサイトの制作では、CSSのメディアクエリを使ってレスポンシブWebデザインを実装していきますが、Sassを使ったWeb制作でも、ベースとなるスタイルの後にメディアクエリを使う、またはネスト（入れ子）でメディア...
続きを読む>>

Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造（フォルダ・ファイル構成）をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。ここでは、Sassファイルを分割管理する方法について、Dart...
続きを読む>>

人気のプログラミング言語「Python」。Pythonプログラミングの学習や、Pythonでのアプリケーション開発を進めていくには、パソコンに開発できる環境を準備していく必要があります。ここでは、Windows PCにPythonをインスト...
続きを読む>>

Webデザインの1つとして重要な、写真やイラストなどの画像の読み込み。PCやタブレット端末、スマートフォン等のデバイス幅や、Retinaディスプレイでの表示のほか、Webブラウザで対応しているWebP等の画像フォーマットなど、HTMLで画像...
続きを読む>>