SEO対策に強いホームページ制作|BringFlower
「HTML&CSS」カテゴリーのBringFlower記事一覧
-
HTML&CSS
CSSで画面の幅に応じてフォントサイズを変える
画像やdiv要素の幅はブラウザの幅に応じて変えられても、フォントサイズはメディアクエリ―を使うしかないと思ってませんか?ブラウザの幅に対してのサイズ指定が可能なvwという単位は、フォントサイズに対して…<続きをみる>
-
HTML&CSS
CSSのみでタブパネルを作る方法
タブパネルをCSSのみ(JavaScriptなし)で作成する方法についてご紹介します。JavaScriptで作成するタブパネルもご紹介していますので、それと比較しながらご説明します。 デモ/タブパネル…<続きをみる>
-
HTML&CSS
img要素をdiv要素で囲う意味:横に文章がある画像をブラウザの幅に応じて伸縮させる方法
img要素をどうしてdiv要素で囲うのだろう?ごちゃごちゃするだけじゃない?と思ったことありますか?意味もなく慣習的に行っている場合もあれば、ブロックの単位を分かりやすくするため、という場合もあると思…<続きをみる>
-
HTML&CSS
Googleマップをレスポンシブ対応でいい感じにホームページに表示する方法
会社、事業所、お店などの場所をホームページに地図で示すのに、いまやほとんどはGoogleマップが使われていることでしょう。ストリートビューで細かく確認もできますからね。それをレスポンシブデザインの状態…<続きをみる>
-
HTML&CSS
flexboxに関するiOSのバグと回避方法
flexboxは比較的新しい仕様で、調べると仕様として登場したばかりの数年前までは各種ブラウザでバグが見られたようです。今は、少なくとも当方開発環境であるWindows×Chromeの組み合わせで、目…<続きをみる>
-
HTML&CSS
固定背景をiOSでも実現する方法(background-attachment:fixedがiOSで効かない件)
background-attachment:fixedと指定することで、その背景が固定表示されるという「素晴らしい」仕様があるのですが、iOS、すなわちAppleさんが言うことを聞かない様子です。その…<続きをみる>
-
HTML&CSS
スライドショーをCSSのみで作る/ボタン付きの場合の解説も
ズームイン、ズームアウトしながら画像が切り替わるスライドショーと、流れるスライドショーについて、jQueryなどのライブラリはおろかjavaScriptなしで作る方法についてご紹介します。一部は本サイ…<続きをみる>
-
HTML&CSS
CSSで角丸(1箇所だけなども)、円形をborder-radiusとclip-pathそれぞれで
CSSで角丸にする方法を、4箇所すべての場合と、1箇所だけ、2箇所だけ、3箇所だけにする場合、それぞれについてご紹介します。IEのサポートを考えなくて良い今は、border-radiusを使う方法とc…<続きをみる>
-
HTML&CSS
CSSでimg要素の大きさ調整とobject-fit属性のシミュレーター
CSSでimg要素の画像の大きさ調整をする際、どういう場合にどうなるのかをシミュレーションできるようにします。 img要素の大きさ調整とobject-fitシミュレーター まとめ 正直、このページは色…<続きをみる>
-
HTML&CSS
親要素の幅を超えてブラウザの横幅(画面幅)いっぱいにするCSS
コンテンツの幅について、ブラウザの画面幅いっぱいではなく、1100pxなど一定にすることはよくあると思います。ただ、その中で画像など一部の要素のみブラウザの画面幅いっぱいにしたいこともあります。そうい…<続きをみる>