デザインを3パターンを紹介しています。前回の記事をまだやっていない方は、まずはそちらをやってからチャレンジしてみてください。デザインまとめAboutデザイン1:シンプルなデザインプロフィール部分をシンプルなデザインに仕上げました。class="about-title">About</h2>にしています。class="career-inner">ここにキャッチコピー</span><br>ここに/スキルを/書く</div>「ここにキャッチコピー」の部分を変更します。60%;}}前回の記事(ポートフォリオサイト:HTMLを使ってサイト制作)のCSSをごろっと変えています。基本的に横並びさせるためにCSSのfloatを使用しているので、使い方を間違わなければ、サンプル通りのデザインになります。floatって何?という方は下記の記事で復習してくださいCSS:floatの使い方と解除方法Aboutデザイン2:背景に画像を入れるプロフィール部分の背景に画像を入れてみました。画像によってサイトそれぞれの個性がでますね。class="career-inner">「日常を、シンプルに。class="img"></div>を加えています。このclassのimgに背景画像を指定するCSSを次で書いていきますので、必ず書きましょう。60%;}}新しいCSSbackground-〇〇で背景に画像を挿入します。url(../images/profile.jpg);を書き換えます。background-imageを書く際に注意してほしい部分が2つありますポイント「../」を必ず入れるurl()を書き忘れないこと上記の2つは基本的に「書く必要がある」と覚えておきましょう。background-repeat背景画像(background)をリピート(repeat)をするか?という意味です。no-repeat;=「リピートしませんよ。」と言っているわけですね。repeat縦横に背景画像を繰り返して表示します。repeat-x横方向にのみ背景画像を繰り返して表示します。repeat-y縦方向にのみ背景画像を繰り返して表示します。no-repeat背景画像を一回だけ表示して繰り返しません。background-repeatbackground-size背景画像(background)のサイズ(size)をどうする?という意味です。cover;を指定しましょう。table;}オリジナリティを出したい方はここで背景色や文字色を変えてみてください。色」と検索すると参考になるものがたくさん出てきますよ。Workデザイン1:作品横並び作品を横並びに表示します。href="page-work.html">詳しくみる</a></div></section>HTMLは特に変えていません。class="works"></div>の部分になります。#ccc;}前回の記事(ポートフォリオサイトのCSSを追加【基本も紹介】)から少し変更しています。cover;';を書く必要があります。ここはいじらず記入しておきましょう。画像が崩れた場合もしかしたら今回の変更で画像が崩れたかもしれません。src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script><script>objectFitImages();</script></body></html>書く場所は上記の通り、</body>のすぐ上に書いてください。これでうまく表示されるはずです。デザインまとめ今回は3パターンですが、さらに増やしていく予定です。気に入ったデザインが決まり次第、ここの記事に追加していくのでその際はTwitterで発信します。PROFILEかれめIKIDISHIKIの中の人+とにかく色々やってみる人+WEBサイトいじりが好きな人+このテーマはオリジナルです。ARTICLEIT業界がつまらない人がやるべき3ステップ【すぐに行動しよう】IT業界が合わない人は職種を変えるべき【離れたい...】IT業界は未来がない。TWSのレビュー】格安だけど使用感は問題なしPROFILEかれめIKIDISHIKIの中の人+とにかく色々やってみる人+WEBサイトいじりが好きな人+このテーマはオリジナルです。ARTICLEIT業界がつまらない人がやるべき3ステップ【すぐに行動しよう】IT業界が合わない人は職種を変えるべき【離れたい...】IT業界は未来がない。IKIDISHIKI.。