KYO

パーツを組み合わせてレスポンシブなサイトを作った

2018年7月28日 CSS , , ,

過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。
これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る
記事やコンテンツが流れていくスライダーのアレを作ってみた
オーバーレイをかけたスライドメニューを作った[簡単]

レスポンシブなサイトを作る

作ったデモサイトです

ヘッダー部分のレイアウトを変えました。
前回の記事では、常にボタンが表示されたままでしたが、画面幅によってボタンを表示させるレスポンシブなデザインにしました。

ページ上部にsnsリンクボタンを付けました。

ロゴ部分と、リンクメニュー部分もflexを使ってレイアウトしています。
画面幅によって横並びのレイアウト崩したりしやすいので、本当に便利です。

ジャンボトロンを編集する

bootstrapのジャンボトロンのスタイルを変更します
背景画像を入れてるのでテキストに影をつけています。
あと、デフォルトでは微妙にborder-radiusが設定されているので0にしました。

投稿一覧部分を修正する

投稿一覧部分は背景色をホワイトにしました。ついでにborderの色も変えました。

 

今まで作ってきたパーツを組み合わせて作ってみると面白いですね。
いろんなパーツを用意しておけば、サクサクっと作れそうでいい

 

突然ですが私には目標があって、エンジニアを9人くらい集めてモーニング娘。みたいにチームを作りたいと思っています。
そんで、日本の未来をうおーうおーさせるようなコトがしたいなと思っています。


関連記事

ERROR: Could not find a valid gem ‘sass’でsassがインストールできない

2018年8月2日

Mac環境で sudo gem install sass ERROR: Could not find a valid gem 'sass' (>= 0), here is why: みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが gem sour...

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る

2018年7月28日

ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。 記事一覧部分を作る まずはBootstrapを使って作るパターンと、Bootstrap...

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日

ソースコード   ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン .box{ padding:30px 60px; margin:100px 100px; color:#333; text-align: center; display: i...

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...