過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。
これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました
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の色も変えました。
今まで作ってきたパーツを組み合わせて作ってみると面白いですね。
いろんなパーツを用意しておけば、サクサクっと作れそうでいい
突然ですが私には目標があって、エンジニアを9人くらい集めてモーニング娘。みたいにチームを作りたいと思っています。
そんで、日本の未来をうおーうおーさせるようなコトがしたいなと思っています。
Mac環境で sudo gem install sass ERROR: Could not find a valid gem 'sass' (>= 0), here is why: みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが gem sour...
今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...
ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。 記事一覧部分を作る まずはBootstrapを使って作るパターンと、Bootstrap...
ソースコード ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...
cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン .box{ padding:30px 60px; margin:100px 100px; color:#333; text-align: center; display: i...