＞CSS＞パーツを組み合わせてレスポンシブなサイトを作った
パーツを組み合わせてレスポンシブなサイトを作った
2018年7月28日
過去の３つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。
これらの３つの記事の応用で一つのレスポンシブなサイトを作ってみました
Bootstrapとフレックスボックスで記事一覧部分のデザインを作る
記事やコンテンツが流れていくスライダーのアレを作ってみた
オーバーレイをかけたスライドメニューを作った[簡単]
レスポンシブなサイトを作る
作ったデモサイトです
ヘッダー部分のレイアウトを変えました。
前回の記事では、常にボタンが表示されたままでしたが、画面幅によってボタンを表示させるレスポンシブなデザインにしました。
|
1 2 3 4 5 6 7 8 9 10 11 |
header .top-sns{ position:absolute; top:5px; right:10px; display: flex; } header .top-sns > div{ padding:0 10px; font-size:24px; } |
ページ上部にsnsリンクボタンを付けました。
ロゴ部分と、リンクメニュー部分もflexを使ってレイアウトしています。
画面幅によって横並びのレイアウト崩したりしやすいので、本当に便利です。
ジャンボトロンを編集する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.jumbotron { background-image: url("back.jpg"); background-size: cover; background-position: center 60%; color:#fff; border-radius: 0; padding:8rem 1rem; text-align: center; text-shadow: 2px 2px 5px black, -2px 2px 5px black, 2px -2px 5px black, -2px -2px 5px black; } |
bootstrapのジャンボトロンのスタイルを変更します
背景画像を入れてるのでテキストに影をつけています。
あと、デフォルトでは微妙にborder-radiusが設定されているので0にしました。
投稿一覧部分を修正する
|
1 2 3 4 5 6 7 |
.posts-area > div { width: 48%; border:1px solid #D8D8D8; position: relative; margin-top:30px; background:#fff; } |
投稿一覧部分は背景色をホワイトにしました。ついでにborderの色も変えました。
今まで作ってきたパーツを組み合わせて作ってみると面白いですね。
いろんなパーツを用意しておけば、サクサクっと作れそうでいい
突然ですが私には目標があって、エンジニアを９人くらい集めてモーニング娘。みたいにチームを作りたいと思っています。
そんで、日本の未来をうおーうおーさせるようなコトがしたいなと思っています。
