HTML・CSSでのコンテンツ作成
こんにちは。アートトレーディングの野菜です。
今回はコンテンツをHTMLとCSSで実際に作成する方法をご紹介していきたいと思います！
第一弾としてリストや一覧表示を中心にご紹介していきます。
数値や色などをアレンジして色々ご活用いただければと思います！
メディアクエリ
メディアクエリとは、cssの記述の一つで、出力する媒体などに応じて適用するcssを切り替えたりするのに利用します。
画面サイズ（解像度）などで切り替えてPC版・SP版それぞれに適切な表示になるように使う事が多いです。
他には、ディスプレイの出力とプリンター出力のデザインを切り替えてインクを適切に利用させたり、などという事も出来ます。
記述方法は『@media』という記述に切り分け条件を付けて設定していきます。
例えば『screen』だとPCやスマートフォンなどディスプレイ、『print』だとプリンターなどという記述になります。
また端末ごとの特性を条件として設定することも可能です。これで画面幅などを指定することができます。
例えば『(min-width: 660px)』と記述した場合は画面幅660px以上の場合のみという記述になります。『and』を使い複数の条件を組み合わせることも可能です。
現在はレスポンシブデザインでサイトを作る事が殆どだと思いますのでメディアクエリはほぼ必須で記述することになるかと思います。
例えば『h1』見出しのフォントサイズを画面幅660pxまでは1.8rem、それ以上は2.2remと切り替える場合は以下のような設定になります。
h1{
font-size: 1.8rem;
}
@media screen and (min-width: 660px) {
h1{
font-size: 2.2rem;
}
} 『@media』の『{ }』で括ったものが指定条件に当てはまったときに設定されるという記述方法になります。
なお、『(max-width:659px)』とした場合は659px以下、『 (min-width: 379px) and (max-width: 660px) 』とした場合は379px～660pxという指定になります。
この切り替えタイミングの画面幅数値は『ブレイクポイント』と言い、目安はその時よく利用されているスマートフォンやタブレット、PCのディスプレイ解像度を基準に検討すれば良いです。
また、カラムコンテンツなどの場合は、内容やレイアウトが綺麗に収まるかどうかを基準に検討しても良いと思います。
リセットcss
リセットcssとは、ブラウザがそれぞれ持っているデフォルトの装飾を打ち消すためのcssです。
各ブラウザごとに初期装飾が違うので、chromeでは綺麗に見えたのにEdgeでは見栄えがおかしい…なんていう事が発生したりします。
そういった差異を極力なくして、白紙（無装飾）状態からサイトを組み上げていくために使うのがリセットcssです。
これは自作することも可能なのですが、結構たくさん書く事が出て大変です。
いくつか配布サービスがありますので、そちらを貰って適用する形で良いかと思います。
どこまで白紙にするかは好みやデザイン次第にもなりますし、白紙ではなく装飾を揃えていくことを重視したノーマライズcss、サニタイズcssというものもあります。
使い勝手が良いと思われるものを探してみてください！
以下のサイトなどはテスターもあるので試しやすいかと思います。
個人的には装飾は何もない状態になっている物から作る方が逆に悩まなくて良い派なので強めにリセットされるものを利用しております。
今回ご紹介する以下のコード例もほぼ白紙状態から作るものになっておりますので、場合によって加筆修正する形で参考にしていただければと思います。
リスト（マーク・番号）
箇条書きは利用する機会の多いレイアウトかと思います。
まずはマークの箇条書きの場合から。
ブラウザデフォルトのデザインだと行頭文字の微調整に限界があったりしますので、そのあたりを変更したい場合に利用してみてください。
とりあえず見本として上記のような箇条書きを設定してみましょう。
タグは特段の注意事項は無いです。『ul』で以下のような形になるかと思います。
今回はとりあえず全体に『mk_list』というclassを付けました。この辺りはお好みで大丈夫です。
また、今後例に挙げるcssの細かい数値などもお好みで調整いただければと思います。
<ul class="mk_list">
<li>リスト項目01</li>
<li>リスト項目02</li>
<li>リスト項目03</li>
<li>リスト項目04</li>
<li>リスト項目05</li>
<li>文字数の長いリスト項目06この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</li>
<li>リスト項目07</li>
<li>リスト項目08</li>
</ul>前提として、ページ全体（body）の行間『line-height』を『1.8』としています。
リストの項目が改行する際、リスト内改行の間隔よりリスト項目ごとの間隔が開いている方が読みやすいと思いますので、その調整をしていきます。
body{
line-height: 1.8;
}
.mk_list{
border: 1px solid #999999 ;
padding: 10px;
}
.mk_list li{
line-height: 1.4;
}
.mk_list li:not(:last-child){
margin-bottom: .4em;
}1.8の行間に対して『li』は『1.4』の行間と少し狭くします。
その上で残りの『.4』を文字単位『em』で下余白『margin-bottom』に設定。
『li』の『:not(:last-child)』ですが、『:last-child』というのは疑似クラスの一つで兄弟要素のうち最後の要素、という意味になります。
『:not』はその否定をする否定疑似クラスというもので、『:not(:last-child)』と記述すると兄弟要素のうち最後の要素以外に適用されるようになります。
今回で言えば『リスト項目08』以外が対象という事です。
あえて最後の項目を外しているのは、『ul』全体の内余白を統一しやすくするためです。
最後の項目に下余白が付いていた場合『ul』の下の内余白だけ.4emをマイナスしないと統一されない事になります。
※『ul』も『li』もmarginのみの場合は以前の記事でもご紹介した相殺が発生するので気にしなくて良い場合もありますが、paddingなど相殺されない装飾がある場合やmarginが相殺されても余ってはみ出す場合などは気にしておきましょう。
ここまでの設定でこのような表示となります。
あとは好みの行頭文字を追加します。
body{
line-height: 1.8;
}
.mk_list{
border: 1px solid #999999 ;
padding: 10px;
}
.mk_list li{
line-height: 1.4;
padding-left: 1em;
text-indent: -1em;
}
.mk_list li:not(:last-child){
margin-bottom: .4em;
}
.mk_list li::before{
content: "";
display: inline-block;
border-radius: 50%;
width: .6em;
height: .6em;
margin: 0 .2em;
background-color: currentColor;
vertical-align: .08em;
}『li』の『padding-left: 1em; text-indent: -1em;』は改行が発生した場合に、行頭文字以外の文字の先頭位置が揃うように左余白を入れて、同じだけ1行目だけを右にズラしている（字下げの逆に動かしている）記述です。
今回はそれを『1em』で調整しているので『li::before』にそのサイズで収まる丸印（幅.6em、余白が.2emずつ、で計1em）を作りました。
『border-radius: 50%;』が角丸を要素の50%ずつ、という事で丸にする記述です。
『background-color』の『currentColor』は文字の色と同じという意味の値になります。
『vertical-align: .08em;』は行内の位置揃えで値は『middle』が中央なのですが、行間や文字サイズやfont-familyによってズレる場合があり、その場合は数値で微調整してください。
今回は丸印にしましたが、任意で背景画像や絵文字を当てても良いと思います。
注意事項として、『text-indent』は継承されますので、『::before』をそのままにするとズレっぱなしです。絵文字などフォントを入れる場合は、必ず『0』に戻す記述を追加してください。
次にもう一つ、ナンバリングの箇条書きをあわせてご紹介します。
このようなリストを作成してみましょう。
基本的な部分は記号のリストと変わらないです。
<ol class="no_list">
<li>リスト項目01</li>
<li>リスト項目02</li>
<li>リスト項目03</li>
<li>リスト項目04</li>
<li>リスト項目05</li>
<li>文字数の長いリスト項目06この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</li>
<li>リスト項目07</li>
<li>リスト項目08</li>
<li>リスト項目09</li>
<li>リスト項目10</li>
</ol>HTMLコード例は上記です。
body{
line-height: 1.8;
padding: 10px;
}
.no_list{
border: 1px solid #999999 ;
padding: 10px;
counter-reset: list;
}
.no_list li{
line-height: 1.4;
padding-left: 1.7em;
text-indent: -1.7em;
counter-increment: list;
}
.no_list li:not(:last-child){
margin-bottom: .4em;
}
.no_list li::before{
display: inline-block;
text-indent: 0;
content: counter(list)".";
width: 1.5em;
height: 1em;
margin-right: .2em;
text-align: right;
}cssについてはこのような記述になります。
行間や行頭文字後の文字揃えなどは記号のリストと同様です。
ポイントは『ul』にかけた『counter-reset: list;』と『li』の『counter-increment: list;』、『::before』の『content: counter(list)".";』です。
行頭文字のナンバリングはcssカウンターと言ったりするのですが、『counter-reset』は設定するカウンター番号を初期化する属性です。
初期化しないと、もしそれ以前にカウンター設定がある場合は継続してしまうので、ナンバリングの一纏まりで初期化するようにしておきます。
『counter-increment』がカウントアップで、『content』で『::before』疑似要素にコンテンツを作り、表示内容を『counter(list)".";』で設定していきます。
それぞれに出てくる『list』は任意の名称でOKですが、共通させないとそれぞれの設定が連動しなくなります。
また、安易に命名して被ってしまうと、連動させたくない別モノが連動するようになってしまうので注意してください。
今回は数字と『.』のナンバリングで設定しています。
後はお好みの装飾を付ければ良いのですが、ナンバーが2桁まであるので『::before』にはきちんと収まる『width』とそれに合わせた『li』の『padding-left』『text-indent』が必要です。
また、数値は右揃えが綺麗かと思うので『text-align: right;』に設定しています。
なお、半角文字なので基本的には1文字.5em前後になるはずですが、これはフォントや設定によって微調整が必要になるかと思います。
『::before』の『margin-right: .2em;』は『.』の右の間隔ですが、これは完全に好みで良いかと思います。
ただし、付けた場合は『padding-left』『text-indent』の数値はこれも含めて調整してください。
画像一覧
画像をタイル状に並べるギャラリーです。
今回利用した元の画像は下のように比率がまちまちのものですが、中心部からトリミングして正方形で並ぶようにしています。
また画面幅が変わっても対応するようにスマホでは2列、タブレット程度以上で4列の表示になるようにしました。
画像を並べるところだけをご紹介していますが、例えばリンクを張って拡大画像へ遷移するとか、下にコメント入力欄を設ける形で、ブログ記事などのサムネール＋コメントの一覧表示をつくるなど、色々アレンジ頂けるかと思います。
<div class="gallery">
<span><img src="img_01.jpg" alt="亀1"></span>
<span><img src="img_02.jpg" alt="亀2"></span>
<span><img src="img_03.jpg" alt="亀3"></span>
<span><img src="img_04.jpg" alt="猫1"></span>
<span><img src="img_05.jpg" alt="猫2"></span>
<span><img src="img_06.jpg" alt="猫3"></span>
</div>HTMLコードについてはこのような記述です。
タグはとりあえず『div』と『span』を使っていますが、状況に応じて『section』と『a』だとか、リストタグにするとか、適したものを利用してください。
ポイントとしては、『img』タグだけでは伸縮するトリミングサイズが設置しきれませんので必ず何らかのタグで括る必要がある、というところです。
cssはスマホ版をベースに設定していきます。
スマホ版は、画面が小さかったり、接続速度が遅い場合があるなど、制限がかかりやすいのでレイアウトなどが必要最小限になりやすいです。 その為スマホ版をベースに設置していくほうが無駄が省けやすいケースが多いです。 メディアクエリを使用してレスポンシブサイトを作っていると、コードが冗長になってしまったり、不必要な上書きを繰り返したりしてしまう事が多くなりやすいので特に気を付けてください。
このような作成手順の概念をモバイルファーストといいます。
また、最近ではモバイル環境での接続の方がユーザー数が多い場合が殆どになってきましたので、その意味でもスマホ優先の設定はオススメだと思います。
もちろん、スマホでしか利用しないコードはそのメディアクエリのみに書けば良いので、記述するコードが、共通、PCで変更、PCのみ、SPのみ、のどれに当たるのか意識しながら設定すると良いです。
.gallery{
max-width: 642px;
display: flex;
flex-wrap: wrap;
gap:10px;
}
.gallery span{
position: relative;
height: 0;
width: calc((100% - 10px) / 2);
padding-top: calc((100% - 10px) / 2);
}まずは画像を表示するためのレイアウトの設定から。
全体の『div』に『display: flex;』と『flex-wrap: wrap;』を設定します。
『display』属性を『flex』にすると、子要素をフレキシブルに配置していくことができるようになります。
『gap:10px;』は配置する子要素同士の間隔です。
『flex-wrap: wrap;』は配置する子要素を改行できるようにする、という設定です。これを設定しない場合、初期値では子要素は1行内に収まるように伸縮します。また初期値の並びは左からの横並びです。
この『display: flex;』、設定次第で逆順にできたり、縦並びにできたり、揃えられたりと色々つかえてとても便利。個人的に大好きです。
『span』には画像を表示するエリアサイズなどを設定していきます。
今回スマホ版では2列表示にしたいので半分としていきますが、隙間『10px;』にしているのでその分を調整して『width』を『calc((100% - 10px) / 2)』とします。
これで横は画面幅に沿って余白付き半分サイズになりました。
今度は高さですが『height』は『0』にしてあります。
高さの設定を画面幅で可変させる方法はいくつかあるのですが、今回は以前cssの記事でご紹介したpaddingの上下余白を%で指定する場合、基準は親となる要素の横幅、という特性を利用してみたいと思います。
横幅の設定は親要素が基準なので『padding-top』を『width』と同じ『calc((100% - 10px) / 2)』とすると同じ大きさになって正方形になります。
これに別途高さが存在したりすると大きさが崩れるので『height』は『0』。
また、『padding-top』に設定しましたが『padding-bottom』でも大丈夫です。ただし両方に付けてしまうと縦が倍の長方形になるので気を付けてください。
.gallery{
max-width: 642px;
display: flex;
gap:10px;
flex-wrap: wrap;
}
.gallery span{
position: relative;
height: 0;
width: calc((100% - 10px) / 2);
padding-top: calc((100% - 10px) / 2);
}
.gallery span img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}レイアウトが決まったので、配置する『img』の設定を追加していきます。
『span』の高さは余白のみで表示されないと崩れてしまいます。
画像がそのまま配置されていると高さの邪魔をしますので、『position』で浮動させます。『absolute』を追加しましょう。
親『span』と同じ大きさにしたいので右上基準で幅高さ100%『top: 0; left: 0; width: 100%; height: 100%;』とします。
『span』は位置の基準にならないといけませんので『position: relative;』を忘れないようにしてください。
このままだと縦横の比率が崩れてしまいますので、最後にトリミング設定を追加します。
『object-fit』は同じセレクタに指定されたサイズ（『width』と『height』）に画像などをどうはめ込むかを決める属性です。
『cover』は比率を維持した状態でエリアいっぱいに隙間なく表示されるように拡大縮小します。はみ出す部分は切り取られますので、これで正方形にトリミングされる、という設定です。
値は他にもあり、例えば『contain』とすると比率を維持してすべてが表示されるようになりますので、短い辺には余白ができることになります。
画像全体を表示してリストで綺麗に並べたい場合（例えばロゴとかバナーなど）は切り替えて使ってみてください。
なお、位置の基準の初期値は中央です。（『object-position』で変更も可能）
.gallery{
display: flex;
gap:10px;
flex-wrap: wrap;
}
.gallery span{
position: relative;
height: 0;
width: calc((100% - 10px) / 2);
padding-top: calc((100% - 10px) / 2);
}
.gallery span img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
@media screen and (min-width: 390px) {
.gallery span{
width: calc((100% - (10px * 3)) / 4);
padding-top: calc((100% - (10px * 3)) / 4);
}
}
最後に大きめスマホサイズくらいから列数を変える設定を追加しましょう。
今回は390pxを基準に『@media screen and (min-width: 390px) 』としてみました。
並び方（横並びにするとか改行されるとか余白とか）は特に変更無し、画像表示エリアの大きさだけ変更すればよいので半分から1/4に調整します。
1/4だと隙間は10pxが3回ありますので、『width』と『padding-top』を『calc((100% - (10px * 3)) / 4)』として完成です。
アイコン付きボタンリスト
最後にもう一つ横並びのコンテンツをご紹介したいと思います。
アイコン画像を付けたボタンのリストで、画面幅に応じて文字サイズを調整したり、アイコンを消したりしてレイアウトが崩れないように設定してみたいと思います。
<ul class="btn">
<li><a><img src="img_01.jpg" alt="">亀1</a></li>
<li><a><img src="img_02.jpg" alt="">亀2この文章はダミーです。</a></li>
<li><a><img src="img_04.jpg" alt="">猫1</a></li>
<li><a><img src="img_05.jpg" alt="">猫2</a></li>
</ul>HTMLコードについてはこのようにしました。
アイコン画像は伸縮なし固定サイズとし、トリミングだけして揃えます。なので特別何かで括らなくて大丈夫です。
※『a』の『href=""』や『img』の『 alt=""（今回はアイコンマークとしての利用なので空が適切かと思います）』などは見辛くなるので省略しました。
.btn{
display: flex;
justify-content: space-between;
}
.btn li{
width: 24%;
}まずはボタンを並べるところから。
画像リストと同じく『ul』には『display: flex;』を設定します。
今回は改行しないので『flex-wrap』は無しです。
『justify-content』は『display: flex;』の子要素をどう配置するかの設定になります。今回は初期値左からの横並びのままでいくので横軸の配置が設定されます。『space-between』は等間隔の両端揃えです。例えば『center』とすると中央揃えになります。
『li』は『width』を指定して横幅を決めます。今回は親の『div』に等間隔並びの設定をしているので、余白が出るよう4分割の25%より少し小さくしてエリアを余らせました。
今回は改行していないので、行によって子要素の個数が違う、という事が発生しません。なので細かい余白設定を個々に入れず自動調整で問題ないという使い分けです。
前述の画像リストでこの設定にすると、タブレット以上の4並びで最終行の余り2個が両端揃えになって真ん中に空白ができてしまいます。（それでレイアウト的に綺麗な場合は使ってよいと思いますし、個数が余らないSP版の場合も問題ないです）
.btn{
display: flex;
justify-content: space-between;
}
.btn li{
width: 24%;
}
.btn li a{
display: flex;
align-items: center;
height: 3em;
padding: 0 .5em;
line-height: 1.2;
font-size: 1.1rem;
border: 1px solid #999999 ;
}
.btn li a img{
flex: none;
width: 2em;
height: 2em;
margin-right: .5em;
object-fit: cover;
}続いてボタンのデザインを設定します。
『a』にも『display: flex;』です。
flexは子要素の縦位置も揃えられるので、文字列とアイコンをボタンの中の縦中央に配置します。
縦位置揃えは他のやり方もありますが、ボタンによって改行したりしなかったりなど、今回のようなレイアウトだとこれが便利だと思います。
『justify-content』の横に対して『align-items』が縦位置揃えです。今回は中央に揃えましょう。
『height: 3em;』は改行して2行になるものがあるので少し余裕を見て3行。
『padding: 0 .5em;』は左右がぎっちりくっつくのも何なので少し余白を。
『line-height: 1.2;』は改行する場合にあまり離れすぎないように少し小さめにしました。
『font-size: 1.1rem; 』はSP版で収まる程度で視認性を考えて調整してください。
今回は『border』を付けましたが、他色などボタンの見た目は好みで良いと思います。
アイコン部分は前述の画像リストの応用です。
今回は画面幅に対するサイズ変更はしないので『img』の『width』と『height』は表示したい数値をそのまま設定します。
今回は上下余白を左右とあわせようと思いますので、ボタン高さから左右余白を引いた数値にしました。
また、アイコンと文字列の間に余白を入れたいので、ボタンの余白と同じく『.5em』を『margin-right』に設置しました。
ポイントは『flex: none;』です。属性『flex』は『display: flex;』の子要素の拡大率、縮小率、基本のサイズ（ショートハンド記述です）が設置できます。
文字列に『width』の指定はありませんので、初期値のままだと幅は自動調整されそれぞれのバランスを維持して収めようとする動きが発生します。
下図のように2つ目の文字列が長いものは、その分アイコンが割を食って縮んでしまう訳です。
それを『none』で『width』のサイズで拡大も縮小もしない、という設定に変更します。
『img』については画像一覧と同様ですね。
違いは今回はサイズが『width』『height』で設定されているので浮動化させる記述が不要という点です。
.btn{
display: flex;
justify-content: space-between;
}
.btn li{
width: 24%;
}
.btn li a{
display: flex;
align-items: center;
height: 3em;
padding: 0 .5em;
line-height: 1.2;
font-size: 1.1rem;
border: 1px solid #999999 ;
}
.btn li a img{
flex: none;
width: 2em;
height: 2em;
margin-right: .5em;
object-fit: cover;
}
@media screen and (max-width: 580px) {
.btn li a{
justify-content: center;
}
.btn li a img{
display: none;
}
}今回は画面幅が狭まって収まりきらなくなるところでアイコンを非表示にしますので、その記述を追加しましょう。
ボタン内容的に580pxくらいが切り替えタイミングとして良さそうだったので『@media screen and (max-width: 580px) 』を追加していきます。
アイコン非表示、ですので『span』には『display: none;』
同じタイミングで文字を中央揃えにしたいと思います。
文字揃えは通常『text-align』ですが、『display: flex;』の子要素の位置揃えは『justify-content』になります。
『justify-content』はコンテンツの配置が設定されるのですが、文字列の場合改行は端までいって発生するものなのでエリア幅と文字列コンテンツ幅がイコールの状態です。
そのため『justify-content: center;』だと親エリアより文字が短い場合だけ中央揃えとなり、最終行左寄せの文字列を設定できるようになります。
ちなみに文字も中央揃えとしたい場合は『text-align: center;』もかけてください。
『text-align: center;』だけをかける場合は、エリアの中での中央となるため、改行が発生している場合だけ中央（下図参照）という状態になります。
.btn{
display: flex;
justify-content: space-between;
}
.btn li{
width: 24%;
}
.btn li a{
display: flex;
align-items: center;
height: 3em;
padding: 0 .5em;
line-height: 1.2;
font-size: 1.1rem;
border: 1px solid #999999 ;
}
.btn li a img{
flex: none;
width: 2em;
height: 2em;
margin-right: .5em;
object-fit: cover;
}
@media screen and (max-width: 580px) {
.btn li a{
justify-content: center;
}
.btn li a img{
display: none;
}
}
@media screen and (min-width: 430px) {
.btn li a{
font-size: 1.3rem;
}
}最後に文字サイズがずっと『1.1rem』のままだと画面が大きくなった場合に小さすぎる感じがしたので、はみ出さない程度に少し大きく調整しました。
こちらはレイアウトのバランスを見てお好みで良いと思います。
『@media screen and (min-width: 430px) 』くらいで切り替えると良さそうだったので『a』に『font-size: 1.3rem;』を追加して完成です。
まとめ
いかがでしたでしょうか？
今回ご紹介したサンプルは装飾的な要素は省き気味でシンプルにしてあります。
リンク（aタグ）などには『:hover』設定を追加してロールオーバー効果を付けたりなど、追加の余地がありますので、色々追加変更したり組み合わせたりしてアレンジしてみてくださいね！