このシリーズの5番目のパートでは、コードビューとCSSデザイナーを使ってホームページのスタイルを設定し、要素の周囲にスペースを空け、デバイスごとに自動的にサイズが変わる画像を追加します。
make-website-pt5-css-style_1000x560

注意:

このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。

入門

このチュートリアルシリーズのパート5では、Dreamweaver 2015を使ってシンプルでレスポンシブなwebサイトを作成する方法について説明します。前のパートでは、最初はコードビューを、次にCSSデザイナーを使用して、Bayside Beatサイトのホームページのスタイル設定を始めました。CSSデザイナーを使用する利点は、ライブビューに結果がすぐに表示されることです。このパートでは、要素の周囲のスペースを調整し、画面の解像度に合わせて自動的にサイズが変わる画像を追加することにより、デザインが次第に形として見えるようになってきます。

パディングとマージンを使って水平と垂直のスペースを制御する

CSSには、要素の周囲の水平と垂直のスペースを制御するプロパティとして、paddingmarginがあります。どちらを選んでも問題ないケースがあります。どちらも要素の周囲にスペースが追加されます。しかし、重要な違いがあります。マージンは、要素の幅と高さには含まれません(図1を参照)。これは、デフォルトのボックスモデルを使っている場合も、パート4で作成したスニペットでそのモデルを上書きしている場合も、同様です。

fig01
図1. 要素のマージンは幅と高さの外側に取られる

パディングとマージンが様々な機能に与える影響を、次の表にまとめました。

機能 パディング マージン
背景 要素の背景は、パディングにも拡張されます 親要素の背景が透けて見えます
ボーダー パディングはボーダーの内側 マージンはボーダーの外側
相殺 相殺されません 隣接するマージンと相殺されます

paddingmarginはどちらも要素の周囲の空白を増やしますが、marginは少し違う動作になります。

図2では、2つの要素が上下に並んでいます。最初の要素の下margin20pxで、2番目の要素の上マージンは30pxです。

fig02
図2. 隣接する2つのマージンについて予想されること

この2つの要素間の垂直距離は、両方のマージンを足したもの(つまり、50px)になると予想するのは自然なことです。しかし、実際にはそうなりません。隣接する上下のマージンは相殺つまり大きい値に包合されます。したがって、この2つの要素間の垂直距離は、両方のマージンのうち大きいもの(つまり、30px)になります(図3を参照)。

fig03
図3. 実際には隣接する垂直マージンは相殺される

それに対して、パディングは相殺されません。この例で、下マージンと上マージンを同じ大きさのパディングで置き換えると、この2つの要素は50px離れます。

パート4で作成したスタイルルールでは、bodyとwrapper <div>の両方に上マージン0を設定しました。それでは、画面の上端に間隔が空いているのはなぜでしょうか? これは、ブラウザーが、見出しを含む一部の要素に対してデフォルトのマージンを適用するからです。

<h1>見出しのデフォルトの上マージンがwrapper <div>0という上マージンと結合されたことで、<h1>見出しに設定される上マージンによってwrapperがページの上端から押し下げられます。マージン部分では常に親要素の背景が透けて見えるので、本文の薄青色の背景色が表示されます。それに対して、パディングは相殺されません。また、要素の背景はパディングにも拡張されます。この特徴を使用して問題を解決しましょう。まずは、論より証拠です。

ページの上端の間隔を削除し、見出しのスタイルを設定する

ページ上端の間隔に関する問題を解決するには、主見出しの上マージンを、同じ大きさのパディングに置き換える必要があります。同時に、他の見出しのスタイルを設定します。

  1. ライブビューでメインの<h1>見出しを選択し、CSSデザイナーのソースパネルでresponsive.cssを選択した状態にします。次のセレクターは#wrapperの後に入れる必要があるので、セレクターパネルで"#wrapper"を選択した状態にします。プラスボタンをクリックして、新しいセレクターを作成します。
  2. 見出しが選択されているので、Dreamweaverからセレクターとして"#wrapper header h1"が提案されます。これは非常に限定的な子孫セレクターで、IDとしてwrapperを持つ要素の内側にネストした<header>要素の内側の<h1>要素を検索します。セレクターの限定度を下げるには、上向き矢印キーを1回押します。提案が"header h1"に変わります。これでもまだ限定度が高いので、上向き矢印キーをもう一度押して、提案を"h1"にします。これで、ページ内の任意の場所にある<h1>要素が対象になります。同じルールを<h2>要素にも適用するには、入力フィールドでh1の右側をクリックし、コンマとh2を入力します。セレクターは次のようになるはずです。

    h1, h2

    上向き矢印キーを使ってセレクターの限定度を下げる機能は、Dreamweaver がセレクターの名前を初めて提案した時にのみ機能します。必要であれば、セレクターをダブルクリックして編集フィールドを開き、グループ セレクターを手動で入力することもできます。

  3. プロパティペインの上部にあるアイコンをクリックし、新しいセレクターに対して次のテキストプロパティを設定します。
color: #1E1E1E 
font-style: normal
font-weight: 400

見出しはメインの本文より濃いグレーになり、太字ではなくなります。

  1. 主見出しと"h1, h2"セレクターを選択した状態のまま、セレクターペインのプラスボタンをクリックし、上向き矢印キーを2回押して、h1のセレクターを作成します。アイコンをクリックして「レイアウト」セクションに移動し、次のプロパティを設定します(図4を参照)。
margin-top: 0px
margin-bottom: 0px
padding-top: 20px
padding-bottom: 20px
fig04
図4. 主見出しの上下の間隔をパディングに置き換える

これにより、見出しの上下に、マージンではなくパディングによって間隔をあけることができました。背景として親要素(wrapper)に設定されている白色が用いられるため、上部に生じていた薄青色の帯を消すことができました。

  1. 「テキスト」セクションで、次のプロパティと値を設定します。
font-size: 2.5em
text-align: center
text-transform: uppercase

text-alignプロパティとtext-transformプロパティはアイコンを使って設定します(図5を参照)。各アイコンの意味を確認するには、マウスポインターを合わせてください。

fig05
図5. いくつかのプロパティ値はアイコンを使って設定する

これで、主見出しは、文字サイズが大きくなり、中央揃えになり、すべて大文字になります。

  1. <h2>見出しの1つを選択し、セレクターを作成します。上向き矢印キーを2回押してセレクターの限定度を下げ、h2セレクターを作成します。次のプロパティと値を設定します。
margin-top: 0.5em
font-size: 2.25em

単位としてemを使うと、テキストや上マージンのサイズが、親要素のテキストに比例したサイズに変更されます。

wrapperの内側に水平方向のパディングを追加する

wrapper <div>内のテキストは、境界の端までいっぱいに表示されます。両端にゆとりを持たせるためには、水平パディングを追加することができます。ただし、そうすると、ゴールデンゲートブリッジの画像を後で挿入した時に、画像がhero <div>の横幅いっぱいに表示されなくなります。そこで、"main, aside"というグループセレクターを作り、次のプロパティと値を設定します(図6を参照)。

margin-left: 4%
margin-right: 4%
fig06
図6. グループセレクターを使って、<main>要素と<aside>要素に水平マージンを設定する

変更を加えた後は、ファイル/すべての関連ファイルを保存を使って作業内容を忘れずに保存してください。

CCライブラリから画像を挿入し、キャプションを付ける

ページに画像を追加してページを飾ってみましょう。このセクションでは、CCライブラリから画像をダウンロードし、その画像にキャプションを付けてindex.htmlに挿入します。このとき、<figure>要素を使います。同時に、画像の形式を選択し、画像のサイズを変更します。

  1. 基になるHTMLの様子を確認できるように、分割ビューを開きます。必要なら、関連ファイルツールバーで「ソースコード」をクリックします。その後、ライブビューで、"Riding the Cable Cars"という見出しの後にある2番目の段落を選択します。"The cable cars rely"という語句で始まる段落です。

  2. 挿入パネルを開き、HTMLカテゴリーの「Figure」をクリックします(図7を参照)。
fig07
図7. 挿入パネルのHTMLカテゴリーから「Figure」を選択する
  1. 配置を支援するダイアログで「後」に配置するように選択します。<figure>要素は、選択した段落の後に挿入されます。新しい要素では、内側に<figcaption>がネストしています。両方の要素にプレースホルダーテキストが入っています(図8を参照)。
fig08
図8. <figure>要素が2つの段落の間に挿入される
  1. <figure>要素を選択した状態のまま、CCライブラリパネルでcable_car1というラベルの画像を右クリックします。コンテキストメニューから「リンクされていないアイテムを挿入」を選択します。配置アシストダイアログが表示されるので、画像を挿入する位置を指定します。「ネスト」をクリックして、<figure>要素の内側にネストします。

  2. ダイアログボックスが表示されますので、サイト内でファイルを格納する場所、画像形式およびサイズを指定します。srcフィールドには、このチュートリアルシリーズのパート1でデフォルトのイメージフォルダーとして設定した画像フォルダーに画像を保存することが自動的に提案されます。提案される画像の名前は、CCライブラリで使用されている名前をベースにしています。この2つは問題ありませんが、PNG 32形式で保存するとファイルが大きくなります。ダイアログボックスの右側にあるドロップダウンメニューを開き、「JPEG」を選択します(図9を参照)。
fig09
図9. ダウンロードした画像を保存する場所と形式をDreamweaverで指定する

こうすると、srcフィールドのファイル名拡張子が.jpgに変更されます。

  1. 幅が3000pxを超えているので、この画像は大きすぎます。Wフィールドの値を400に変更します。デフォルトでは、W(幅)フィールドとH(高さ)フィールドの間にあるリンクアイコンが選択されているので、Hフィールドの値が自動的に266に変更されます。

    ダイアログボックスの値が図10と一致していることを確認してから、「OK」をクリックします。
fig10
図10. 400 x 266ピクセルのJPEG画像としてファイルがダウンロードされる
  1. 画像は<figure>要素の内側に挿入され、Dreamweaverによって自動的に、基になるHTMLでwidthおよびheightが設定されます。ここでは、この画像をレスポンシブなレイアウトとして作成するので、これらの値は削除する必要があります。

    画像を選択した状態のまま、エレメントディスプレイのハンバーガーアイコンをクリックしてクイックプロパティインスペクターを開き(図11を参照)、widthフィールドとheightフィールドの値を削除してから、インスペクター以外の場所をクリックして、インスペクターを閉じます。
fig11
図11. クイックプロパティインスペクターで画像のHTML属性を閲覧している
  1. <figure>要素のプレースホルダーテキストをダブルクリックして編集モードに入り、そのテキストを選択し、Deleteキーを押して画像およびキャプションのプレースホルダーだけを残します。

    Dreamweaverによって、基になるHTMLの<img>タグからalt=""も削除される場合があります。その場合、出力パネルに、alt属性に値を指定する必要があるという警告が表示されます。alt属性の目的は、目の不自由なユーザー向けのスクリーンリーダーなど、音声ブラウザーに対して代替テキストを提供することです。画像にキャプションが付いている場合や、純粋に装飾のための画像である場合、alt属性は不要であるため、この警告は無視して構いません。

  2. キャプションのプレースホルダーテキストをダブルクリックし、"The cable car terminus near Union Square"に置き換えます。

  3. index.htmlを保存します。

CCライブラリパネルのコンテキストメニューには、リンクされたアイテムとリンクされていないアイテムの挿入およびダウンロードというオプションがあります。リンクされていないアイテムの場合は、自分のサイトに画像のローカルバージョンが作成されるだけです。それに対して、リンクされたアイテムの場合は、Creative Cloudのライブラリ内で画像が変更されると、ローカルバージョンの画像が自動的に更新されます。さらに詳しくは、Creative Cloudでのアセットの同期を参照してください。

CCライブラリから画像をドラッグ&ドロップする

index.html内のもう1つの画像は、heroというIDの<div>内にネストする必要があります。このセクションでは、CCライブラリパネルから直接ドラッグ&ドロップすることで画像をページに挿入する方法を説明します。このテクニックは、初めての場合はマスターするのを難しく感じます。そのため、実際に操作してみる前に、この後の指示を読み通して概要を理解してください。

  1. 分割ビューを閉じるために、ドキュメントウィンドウの左上にある「ライブ」ボタンをクリックします。その後、黒丸リストの直後の"Bayside Beat keeps"で始まる段落が見えるようにします。

  2. DOMパネルで、ネストした子アイテムを持つ要素の大部分を折りたたみますが、図12のとおり、div #hero要素は展開した状態にしてください。こうすると、画像を正しい場所に配置しやすくなります。
fig12
図12. DOMパネルで、画像をネストさせる<div>を展開する
  1. CCライブラリパネルで、golden_gateというラベルの画像を選択し、ライブビューにドラッグし始めます。ページ上を移動すると、画像の挿入先を示す緑色の横線が表示されます。
    緑色の横線が黒丸付きリストと段落の間に合ったらドラッグを止めますが、まだマウスのボタンを放さないでください。数秒待つと、マウスポインターの右下に小さな</>アイコンが表示されます(図13を参照)。
fig13
図13. マウスポインターの横にあるアイコンは、ドラッグ&ドロップの際に要素の位置を正確に決めるために役立つ
  1. マウスボタンを押したまま、マウスポインターをこのアイコンの上に移動すると、フローティングDOMパネルが表示されます。フローティングパネル上でドラッグを続けて、緑色の横線がdiv #hero要素とその後のpの間に表示されるようにします(図14を参照)。適切な場所で、マウスボタンを放します。
fig14
図14. フローティングDOMパネル内で適切な位置まで画像をドラッグする
  1. ダイアログボックスが表示されますので、ローカルサイトでファイルを格納する場所と画像形式を指定します(前のセクションの図9と図10を参照)。

    画像形式をJPEGに変更し、widthheightをそれぞれ1000547に設定します。「OK」をクリックします。

  2. ゴールデンゲートブリッジの画像が、黒丸付きリストと段落の間に挿入されたはずです。挿入した場所が間違っていても、心配ありません。後で、簡単に修正できます。

    画像が選択された状態で、ハンバーガーアイコンをクリックして、クイックプロパティインスペクターを表示します。

  3. altフィールドに"The Golden Gate Bridge"と入力し、widthフィールドとheightフィールドにある値を削除します。この画像にはキャプションを付けないので、音声ブラウザー向けにalt属性が必要です。画像のサイズは画面の解像度に応じて自動的に変更されるので、サイズを設定する必要はありません。

  4. DOMパネルで、img要素がdiv #heropの間にあり、pと同じレベルにインデントされていることを確認します(図15を参照)。
fig15
図15. 画像はhero <div>の内側で段落の上に正しくネストしている
  1. 画像の位置が間違っている場合は、DOMパネル上で画像をドラッグし、緑色の横線をdiv #heroとその後のpの間に移動します。その後、マウスボタンを放します。

  2. index.htmlを保存します。

ライブビューとDOMパネルでのドラッグ&ドロップは、webページ内のHTML要素やアセットを再編成するための強力な手段です。それで、このテクニックを自分で快適と感じられるまで練習することをおすすめします。

マウスを使わない操作がお好みの場合は、ゴールデンゲートブリッジの画像を、前のセクションと同じ方法で挿入することができます。まずhero <div>を選択し、コンテキストメニューから「リンクされていないアイテムを挿入」を使用します。配置アシストダイアログが表示されたら、「ネスト」を選択します。

画像をレスポンシブにする

ゴールデンゲートブリッジの画像は横幅が1000pxで、サイト内のもう1つの画像は横幅が400pxです。HTMLからwidth属性とheight属性を削除したとはいえ、ブラウザーには画像の元々のサイズで表示されます。利用可能な画面スペースに対してレスポンシブな画像にするには、CSSで少しの工夫を施す必要があります。

  1. ライブビューのスクラバーを左にドラッグして、ライブビューの幅を狭くします(図16を参照)。ライブビューの幅が1000pxより狭くなると、水平スクロールバーが表示され、ゴールデンゲートブリッジの右端が隠れます。
fig16
  1. ライブビューでゴールデンゲートブリッジの画像が選択された状態のまま、CSSデザイナーで新しいセレクターを作成します。上向き矢印キーを1回押して、提案されるセレクターを"#hero img"に変えた後、Enter/Returnキーを押して変更を確定します。

    これにより、子孫セレクター(2つ以上のセレクターをスペースで区切ったもの)が作成されます。このセレクターは、heroというIDの要素の内側にある画像を対象にします。

  2. 次のプロパティと値を設定します(どちらも「レイアウト」セクションにあります)。
max-width: 100%
display: block

max-widthプロパティを100%に設定すると、画像が親要素(この場合は、hero <div>)の幅を超えないようになります。

  1. ライブビューのスクラバーを左右にドラッグします。ゴールデンゲートブリッジの画像が、使用可能な水平スペースに合わせて自動的にサイズ変更されます(図17を参照)。
fig17
図17. hero画像が自動的にサイズ変更される
  1. ライブビューでケーブルカーの画像を選択し、上向き矢印キーを1回押します。選択範囲がHTML階層で1つ上がり、親<figure>要素が選択されます。

  2. figureセレクターを作り、次のプロパティを設定します。
width: 400px
max-width: 92%
display: block
margin-left: auto
margin-right: auto
padding-top: 20px
padding-bottom: 20px
  1. 必要なら、ライブビューを400pxより狭くしてみます。<figure>要素のビジュアルガイドを見ると、max-widthプロパティの92%という値が幅を超えてしまい、要素は水平方向で中央に配置されますが、画像は右にはみ出していることがわかります(図18を参照)。
fig18
図18. 画像が親コンテナからはみ出している
  1. <figure>要素にネストされている画像のスタイルを設定するには、子孫セレクター"figure img"を作成する必要があります。その上で、max-widthプロパティを100%に設定します。

    これにより、画像が親コンテナからはみ出すことがなくなります。ライブビューの幅が435pxより広い場合、画像は元々のサイズである400pxで表示され、水平方向で中央に配置されます。

  2. <figure>内のfigcaption要素にセレクターを作成し、次のプロパティと値を設定します。
display: block
margin-top: 0.5em
font-size: 0.75em
text-transform: uppercase

CSSフィルターを使用して画像のスタイルを設定する

最新のほとんどのブラウザーは、公式にはまだ実験段階ですが、CSSフィルターをサポートするようになりました。画像をグレースケールに変換し、マウスを合わせるとカラー版が表示される、というシンプルなスタイルを作成してみましょう。

  1. ライブビューでケーブルカーの画像を選択し、imgエレメントディスプレイのプラスボタンをクリックします。入力フィールドに".grayscale"と入力し(先頭はドットです)、TabキーまたはEnter/Returnキーを押して、画像にクラスを割り当てます。

    表示されるポップアップでresponsive.cssが選択されていることを確認してから、ポップアップ以外の場所をクリックして、ポップアップを消します。

  2. CSSデザイナーのセレクターパネルで、Dreamweaverによって作成された.grayscaleセレクターを選択し、プロパティペインの上部にある「セットを表示」チェックボックスを選択します。

  3. プロパティの追加」フィールドと「値の追加」フィールドに、次のプロパティと値を設定します。
-webkit-filter: grayscale(100%)
filter: grayscale(100%)

画像が白黒写真のように表示されます(図19を参照)。

fig19
図19. CSSフィルターを使用して画像がグレースケールに変換される
  1. セレクターペインで、.grayscaleセレクターを右クリックし、コンテキストメニューから「複製」を選択します。Dreamweaverによってスタイルルールのコピーが作成されます。このとき、新しいセレクターの名前は編集可能状態のままになります。次のように、名前の末尾に":hover"という擬似クラス名を追加します。

    .grayscale:hover

    擬似クラスについてさらに詳しくは、このチュートリアルシリーズのパート6で説明します。

  2. プロパティペインで、各プロパティの値をダブルクリックし、値を「grayscale(0%)」に変更します。

  3. ライブビューで画像にカーソルを合わせます。今度は画像がカラーになります。

  4. 作業内容を保存するため、ファイル/すべての関連ファイルを保存を選択します。

ブラウザー間の互換性のため、-webkit-filterfilterの両方を使用する必要があります。どちらのプロパティも認識しない以前のバージョンのブラウザーでは、このスタイルルールは無視され、画像はカラーで表示されます。

段落に独自のスタイルを設定する

前のセクションでは、クラスを割り当てることによって、ケーブルカーの画像にhero画像とは異なるスタイルを設定しました。ただし、要素のスタイルを変えるためにいつもクラスを使用する必要はありません。ゴールデンゲートブリッジの画像と最初の<h2>見出しの間にある段落は、hero <div>の内側にネストしているため、子孫セレクター"#hero p" を作成すれば、他のすべての段落とは異なるスタイルを設定できます。

  1. ライブビューで、ゴールデンゲートブリッジの画像のすぐ下にある段落を選択します。

  2. 関連のあるスタイルルールはまとめて配置するとよいので、CSSデザイナーのセレクターペインで"#hero img"を選択してハイライトしてから、プラスボタンをクリックします。Dreamweaverからセレクターとして"#wrapper #hero p"が提案されます。上向き矢印キーを1回押して、提案を"#hero p"に変更します。

  3. プロパティペインの右上にある「セットを表示」チェックボックスの選択を解除し、アイコンをクリックして「テキスト」セクションに移動します。

  4. CCライブラリパネルにあるピンク色のスウォッチをクリックして16進数値#F68979をクリップボードにコピーし、その値をcolorプロパティの値として貼り付けます。hero <div>内の段落のみ、ピンク色に変わります。他のすべての段落はダークグレーのままです。

  5. font-weight600に設定します。

  6. font-sizeの右側を1回クリックし、単位としてemを選択します。パート4で説明したとおり、Dreamweaverによって値はいつも0に設定されるため、いったんテキストが消えます。

    1.5emに設定する必要があります。これをおこなうには、次の2つの方法があります。

    • 入力フィールドに直接1.5と入力し、Enter/Returnキーを押して値を確定します。
    • マウスポインターを値のすぐ下に合わせてしばらく待つと、カーソルが双方向の矢印に変わります。その後、Ctrlキー(Windows)またはCmdキー(Mac)を押しながらマウスボタンを押し、マウスを右側に移動します。すると、値が0.1ずつ増えていき(図20を参照)、その効果をライブビューですぐに確認できます。増やしすぎた場合は、左側に戻します。値以外の場所をクリックして、値を確定します。このテクニックは、特定の値を設定するのではなく、マウスを左右に動かしてライブビューで結果を目で見ながら判断する場合に便利です。
n
fig20
図20. CtrlまたはCmdキーを使うと、0.1単位で値が変化する

Shiftキーを押しながらマウスを左右に動かすと、10単位で値が変化します。修飾キーを押さずにマウスを左右に動かすと、1単位で値が変化します。

  1. テキストを大文字に変換するために、text-transformプロパティの大文字アイコンをクリックします(図21を参照)。
fig21
図21. いくつかのプロパティ値はビジュアルアイコンを使って設定する
  1. プロパティペインの上部にあるアイコンをクリックして、「ボーダー」セクションに移動します。borderプロパティは、タブ付きパネルとしてグループ分けされています(図22を参照)。最初のタブで値を設定すると、要素の4つの辺すべてに同じボーダーを適用できます。その他のタブでは、toprightbottomおよびleftのボーダーを個別に設定できます。
fig22
図22. すべての辺を設定するタブと、個々の辺を設定するタブがある
  1. 下側のボーダーのタブを選択し、widthを3px、styleを「solid」に設定します。色を指定する必要はありません。ボーダーのデフォルト色は、現在の要素のテキストから継承されます。

  2. この段落のスタイルの最終設定として、プロパティペインの上部にあるアイコンをクリックし、レイアウトプロパティに移動します。パディングのビジュアルツールに移動し、左と右の値を4%、下の値を20pxに設定します(図23を参照)。
fig23
図23. 3つの辺にパディングを設定する
  1. テキストの上端とゴールデンゲートブリッジの画像の間隔が大きすぎます。マージンのビジュアルツールを使って、上マージンを10pxに設定し直します。

これで、段落に独自のスタイルを設定できました(図24を参照)。

fig24
図24. 子孫セレクターを使ってhero段落に異なるスタイルを設定する

フッターのスタイルを設定する

ここまでの操作で、セレクターとスタイルルールの作成について十分に経験を積みました。最後に、フッターのスタイルを設定しましょう。コードビューを使って、スタイルシートの末尾にスタイルの定義を直接設定してみてください。コードは次のようになります。

footer {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #1E1E1E;
    color: white;
    font-size: 0.8em;
    text-align: center;
}

完了したら、忘れずにファイルを保存します。ブラウザーでページを表示すると、図25のように見えるはずです。デザインが着々と向上してきました。

fig25
図25. 1カラムのレイアウトはほぼ完了

Bayside Beatサイトのスタイル設定が半分終了しました。

03/16/2020

提供元:David PowersTom Alex Buch

このページは役に立ちましたか。