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

2018年7月28日 CSS Bootstrap, css, HTML, デザイン

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

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

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

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

header .top-sns{
  position:absolute;
  top:5px;
  right:10px;
  display: flex;
}

header .top-sns > div{
  padding:0 10px;
  font-size:24px;
}

header .top-sns{

position:absolute;

top:5px;

right:10px;

display: flex;

}

header .top-sns > div{

padding:0 10px;

font-size:24px;

}

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

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

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

.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;
}

.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にしました。

投稿一覧部分を修正する

.posts-area > div {
  width: 48%;
  border:1px solid #D8D8D8;
  position: relative;
  margin-top:30px;
  background:#fff;
}

.posts-area > div {

width: 48%;

border:1px solid #D8D8D8;

position: relative;

margin-top:30px;

background:#fff;

}

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

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

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

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...

Could not find a valid gem sass エラー

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

2018年7月28日

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

Bootstrap css HTML デザインワードプレス

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

2018年6月27日

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

css デザイン

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

2018年8月27日

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

css

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

2018年8月20日

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

css HTML

KYO