2021Web制作の基礎から学べる「スマートフォン時代のWebコーディングスクール」5月に初回体験レッスン開催!渋谷でも動画でも受講可能です。現在は状況が異なる可能性がありますのでご注意ください。資料制作をお手伝いして頂いているemiさんによる寄稿記事です。emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。手順や流れでよくある矢印before/afterでの矢印セクショニングコンテンツの区切りで斜めになっている背景Webブラウザーでの表示サンプルセクショニングコンテンツの区切りで斜めになっている背景を実現するには、画像とCSSのどちらで実装すると汎用性が高くなるでしょうか。2つの方法で比較してみます。画像で実装した場合まず画像を用いた場合を見てみます。画像を使う場合は背景画像での実装が考えられますが、その場合も2つのパターンが考えられます。以下のようなCSSとした場合、PNG形式の画像ファイルで三角のパーツを透明にしていると、想定していたよりも長い文章が入った場合、長方形で塗られたようになってしまいます。#ebebeb;PNGを使用した場合のサンプルJPEG形式の画像ファイルでは上部のコンテンツの背景色が変更になったり、指定した色コードと同じ色を使用しているはずなのに見た目は違って見える。三角形のパーツが背景色で塗られることがないように、擬似要素を使用します。レスポンシブ対応が必要になるので、Webブラウザーの幅が変化したときの対応をあらかじめ考えておかなくてはなりません。その上で実装時にどうすればいいかを考えます。Webブラウザーの幅に合わせて画像を拡大・縮小させるのか画像のサイズはそのままに常に画像の中心が表示された状態にするのかWebブラウザーの幅に合わせて画像を表示する場合Webブラウザーの幅に合わせて画像を表示する場合では、以下のことが想定されます。微妙なWebブラウザーの幅でも画像の中心を表示しておく場合は、以下のことが想定されます。画像の幅とWebブラウザーの幅が合わないので、不要な横スクロールバーが表示されないように対応する必要がある思うような角度で表示されない可能性があるので、background-positionで細かい調整が必要になるPCで表示したものと同じ画像ファイルを使用すると角度にならない可能性があるので、タブレットやスマホサイズとデバイスごとで三角形の画像を作り直す必要があるこのように画像を用いる場合は、どちらの場合も画像を都度調整する必要があります。CSSで実装した場合CSSを使用した場合です。HTMLとCSSをみてみます。z-index:5;}HTMLでは斜めの表示をしたい箇所で.section-bg-nanameというclass名を指定しています。CSSを見るとtransform:skewY(-3deg);という指定があります。このように斜めに表示するために、section全体を斜めにし、section内のdivで斜めにした分を戻すことで実現しています。この実装方法では角度が変更になった場合も、数値を修正するだけで簡単に対応できます。section自体に角度を指定しているので、レスポンシブ対応のためにデバイスごとに画像を作り直す必要もありません。Fallback※上記埋め込みの[Result]内はスクロール可能です。CODEPEN]をクリックすると、別のタブとして大きく表示できます。手順や流れなどで使用する矢印Webブラウザーでの表示サンプル手順や流れなどでよく使われている矢印の実装では画像とCSSどちらの実装方法が向いているでしょうか。PNGやSVGの画像ファイルを使用して実装した場合この場合、三角形のパーツのみなのでCSSを見たときに画像で実装されているということがわかりやすくなりますが、画像ファイルで実装すると色を変更したい場合には画像ファイルを書き出し直す必要があります。SVGを使用する場合、画像がファイルとして書き出すのではなく、background-imageでSVGのコードを指定すると、色コードを変更するだけで簡単に変更できます。コードの変更箇所が多少わかりづらい、Webブラウザーによっては表示されないことがあるのがデメリットです。Fallback画像を使用せずにCSSのみで実装した場合CSSで実装する場合は、borderを使用して三角形を表示します。HTMLとCSSをみてみます。transparent;}このようにCSSを使用するとborderの値を変更するだけで三角形の大きさ、色を調整できます。Fallbackbefore/afterでの矢印Webブラウザーでの表示サンプル画像ファイルを使用して実装する場合は、前項の『手順や流れなどでよくある矢印』と同様にPNGやSVGの形式の画像ファイルで実装することになります。色を変更したい場合には画像ファイルを都度書き出し、SVGコードを使用した場合はわかりづらく、Webブラウザーによっては表示されないことがあります。CSSで実装した場合CSSで実装する場合です。HTMLとCSSをみてみます。#ebd700;}施工前・施工後のパーツをそれぞれdivで囲み、施工前に.before、施工後は.afterとclass名をつけています。CSSを見ると.before::afterではなく、.beforeの中にある.img-areaに擬似要素を指定しています。これは、.beforeで擬似要素を指定すると、このように枠全体の上下中心になってしまうため、画像のエリアで擬似要素としています。線のように見えている箇所は::beforeと::afterを使い、サイズ違いの矢印を重ねて実現しています。重ねている三角のサイズを変更すると、線の太さを調整できます。Fallbackまとめこのように実装方法によって、わかりやすいコードになったり、汎用性の高いコードになります。Webブラウザーで表示されればOKではなく、修正作業があることも想定しながら実装作業をしていきましょう。Web制作の基礎から学べる「Webコーディングスクール」を渋谷で開催します!Web制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい社会人向の方に向けたスクールです。渋谷の教室でも、ご自宅での動画受講も可能です。これからWeb制作をはじめたい方向けに最新のHTMLとCSSの基礎からSass、JavaScriptの基礎まで、初歩から一通り学べるWeb制作スクールです。5月の土曜日に初回体験レッスン(1000円)も開催、動画受講も可能ですのでぜひお気軽にどうぞ。ページをご覧ください。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。outlook.comなどMicrosoftのメールサービスには届かないことが多いため、別のメールアドレスをおすすめします。Twitterでは、Web制作に関する最新情報をツイートしています。CSS3AboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷でWeb制作の基礎から学べる「Webコーディングスクール」の講師をしています。新着記事Web制作の基礎から学べる「Webコーディングスクール」を渋谷とオンラインで開催しますWeb制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを学べる社会人向けのスクールです。Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。...画像で分かる、新しいCSSこの記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。ブログや技術記事で使いやすい画像素材を配布します今メルマガ登録頂くと、毛糸風の画像素材を配布します。220枚以上あり、ブログや技術記事などで使いやすいと思います。Bardを試すなら、ぜひ試して頂きたいことが2つあります。それは回答の右上に表示されている[他の回答案を表示]をクリックして別の回答案を見ることと、数時間前の情報についてまとめて解説してもらうことです。デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法デザインシステムの基本原則を学び、Figmaで効率的なWeb制作方法を初心者にもわかりやすく解説する記事です。2023年4月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。資料制作をお手伝いして頂いているemiさんによる寄稿記事です。