レスポンシブwebデザイン
レスポンシブwebデザインを学ぼう
レスポンシブ対応する方法
Webサイトをレスポンシブ化するためには以下の工程が必要です。
表示領域の設定をする
画面サイズによってCSSを切り替えるための設定をする
画面サイズごとに適用するCSSを記述する
表示領域を設定する方法
レスポンシブ対応をするためには、画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。
この表示領域をviewportと呼びます。
viewportの指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり非常に見づらくなってしまいます。
viewportを設定するためには、htmlファイルのheadタグ内に以下の記述を追加します。
例
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TECH CAMP DEMO</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
contentプロパティにwidth="device-width"を指定することで、ブラウザの大きさをPCやスマートフォンなどの機器の大きさに合わせることができます。
initial-scaleは、画面の拡大率を指しています。拡大率は「1.0」に設定しているため、拡大は行われません。
これで表示領域の設定が完了しました。
次に、画面サイズによってCSSを切り替える方法を学びましょう。
先に例を出したほうがわかりやすいので、以下を見てください。
例えば、「画面幅が500px以下の時にのみ、pタグのfont-sizeを10pxにしたい」という場合は以下のように記述します。
@media (max-width: 500px) {
p {
font-size: 10px
}
}
見慣れない記述ですが、「max-width: 500px」の部分は「画面幅が最大500pxのとき」という意味になるので、すなわち「画面幅が500px以下のとき」という意味になります。
max-widthに対してmin-widthも存在します。その場合は「画面幅が最低500pxのとき」という意味になるので、すなわち「画面幅が500px以上のとき」という意味になります。
最後に画面サイズごとにcssを適用する方法を学びます
メディアクエリを書いたら、実際にCSSをその中に書いていきます。
例えば、以下はPC表示時はpタグのフォントサイズを30px、タブレット時は25px、スマホ時は20pxにするという記述です。
/* PC表示時 */
p {
font-size: 30px
}
/* タブレット表示時 */
@media (max-width: 1000px) {
p {
font-size: 25px
}
}
/* スマホ表示時 */
@media (max-width: 500px) {
p {
font-size: 20px
}
}
他にもPC表示時は横並びのレイアウトをスマホ時には縦並びにしたり、marginの値を小さくしたりすることがあります
レスポンシブwebデザイン
画面に今回はPC表示時のレイアウトを実装します。
それに先立ち、レスポンシブWebデザインとは、端末の画面幅に応じて表示が変わるWebデザイン設計のことをおさえておきます。
PCの完成イメージは以下です。
次に以下のフォルダ・ファイルを作成します。
いままでのフォルダ内に作成はしません。
responsiveimages
cssstyle.css
reset.css
index.html
次にindex.htmlを以下のように編集します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TECH CAMP DEMO</title>
</head>
<body>
</body>
</html>
デフォルトのcssをリセットします
* {
box-sizing: border-box;
}
html,
body,
ul,
li,
h1,
h2,
p,
div {
margin: 0;
padding: 0;
}
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN W3", sans-serif;
color: #3b4043;
}
li {
list-style: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
a {
text-decoration: none;
color: #3b4043;
}
本来、このリセットCSSは自作するのではなく、世界中の有志のエンジニアが作成したファイルを読み込むことが一般的です。
cssを読み込む為index.htmlを以下のように編集します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TECH CAMP DEMO</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
</body>
</html>
フォントを設定するため、index.htmlを編集します
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
次に画像をダウンロードしておき、imageフォルダにいれておく
PCのレイアウトの実装に入ります。
最初にマークアップします。
index.htmlの11行目以降に下記を追加します。
<header class="header">
<div class="inner">
<img src="./images/logo.png" alt="" class="logo" />
</div>
</header>
<!-- /.header -->
<main class="main">
<div class="inner">
<h1 class="page-heading">記事一覧</h1>
<div class="card__wrapper">
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
</div>
</div>
</main>
<!-- /.main -->
<footer class="footer">
<p class="copyright">Copyright © 2020 TECH CAMP DEMO All rights reserved.</p>
</footer>
<!-- /.footer -->
</body>
</html>
ここでブラウザで確認しましょう。
画面に収まらないので縮小した場合のものを表示します。
最後にスタイリングをします。
style.cssを以下のように編集します。
.header {
background-color: #f1f8fe;
margin-bottom: 48px;
padding: 10px 0;
}
.inner {
width: 1024px;
margin: 0 auto;
}
.logo {
width: 100px;
}
.page-heading {
font-size: 30px;
margin-bottom: 28px;
}
.card__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.card {
width: calc((100% - 50px) / 3);
margin-bottom: 40px;
}
.card__img {
margin-bottom: 16px;
}
.card__title {
font-size: 24px;
margin-bottom: 8px;
}
.card__summary {
font-size: 18px;
}
.footer {
background-color: #999;
padding: 10px 0;
}
.copyright {
text-align: center;
color: #fff;
font-size: 10px;
}
ブラウザで確認しましょう。
正しく実装すると以下のようになります。
Ruby on Rails(PicTweet)
投稿検索機能を実装しよう
検索フォームを作成しよう
検索の入力欄とボタンには、フォームを使う
ここではルーティングを書いていないのでエラーがでる
これから詳細を設定していく
ルーティングを設定してあげる
tweet.rbでwhereメソッドとlike句を使用して検索の処理をつくる
tweets_controller.rbの3行目に:searchを追加する
そしてsearchメソッドを定義する
ded search
@tweets = Tweet.search(params[:keyword])
end
app/views/tweetsのディレクトリの配下にsearch.html.erbを作成し下記を書く
Ruby on Rails(PicTweet)
ツイートにコメントを投稿しよう編
まずターミナルでコメントのモデルを作成する
生成されたマイグレーションで下記を追加する
t.integer :user_id
t.integer :tweet_id
t.text :text
そしてマイグレーションを実行する
アソシエーションを定義する
belongs_to :モデル単数系で、アソシエーションを定義する。今回はTweetとuserとする
複数のコメントを所有できるhas_many:モデル複数形でコメントを組み込む
app:models/user.rbにも追記する
createアクションのルーティングを設定する
routes.rbを下記のように書き換える
commentsコントローラーを作成する
comments_controller.rbを編集する
createアクションを定義し、ストロングパラメーターも利用する
そしてコメントを保存したのち、コメント完了画面を表示させるのではなく、コメントしたツイートの詳細画面へリダイレクトさせる
コメント投稿フォームを投稿詳細に追加しよう
app/views/tweets/show.html.erbの23行目以降を追加する
コメント表示欄を投稿詳細に追加する
tweets_controller.rbのshowアクションを編集する
下記を追記する
@comment = Comment.new
@comments = @tweet.comments.includes(:user)
下記を追記することでもし@commentsが空だった場合でもエラーが起こらないようにする
Ruby on Rails(PicTweet)
複数ページで利用する表示の一部をまとめよう
部分テンプレートとは、ビューファイルで繰り返し使用するコードを切り出し、再利用する仕組みのこと
app/views/tweetsに_tweet.html.erbを作成する
そしてindex.html.erbの3〜26行目を⌘+xで切り取る
そして⌘+vで先程作成したファイルに書く
先ほど切り取った箇所で、部分テンプレートを呼びだす
<%= render partial: "tweet", locals: { tweet: tweet }%>
次に部分テンプレートを適用する
すでに部分テンプレートは作成してあるので、使用するファイルを呼び出すだけである
app/views/users/show.html.erb
フォーム部分もまとめる
_form.html.erbをapp/views/tweetsに追加
new.html.erbの4〜8行目を切り取り新ファイルに追加
そして1行目を下記に置き換える
<%=form_with(model: tweet, local: true) do |form|%>
先程切り取った箇所で、部分テンプレートを呼び出す
<%= render partial: "form", locals:{tweet: @tweet } %>
edit.html.erbも上記にまとめる
Ruby on Ruby(PicTweet)投稿者本人のみに編集・削除を許可しよう編
投稿者本人か確認して表示を変えよう
編集ボタンと削除ボタンの表示部分をif文で囲う
ツイート詳細ページ同様に、if文で表示を切り替える
current_user.id == tweet.user_idという条件を含むif文でプルダウンメニューごとに囲むことによって、「未ログイン時や自分の投稿でないときは非表示」となるように書き換える
Ruby onRails(PicTweet)マイページを実装しよう編
ユーザーのマイページ機能を実装します
ツイートにユーザー情報を追加する
カラムの追加の手順はnicknameカラムを追加するのと同様、ファイル名の命名規則にしたがって、自動でコードが記述されたマイグレーションを生成する
そしてapp/controllers/tweets_controller.rbでprivateの所に
.merge(user_id: current_user.id)を追記する
app/models/user.rbに
has_many :tweetsを追記する
app/models/tweet.rbに
belongs_to :userを追加する
マイページを表示する際には、usersコントローラーのshowアクションを動かせるようルーティングを設定しておく
config/routes.rbに
resourses :users, only: :showを追加する
マイページのビューを作成する
app/viiews/users内に、show.html.erbを作成し、以下のコードを書く
ログアウトボタン部分をプルダウンメニューに追加するよう、18行から25行を変更した
ターミナルでusersのコントローラーを作成する
その後app/cotrollers/users_controller.rbに@nicknameと@tweetsというインスタンス変数に代入する
投稿者こユーザー名の表示
tweetsテーブルのレコードである、「name」カラムの値が表示される部分を、アソシエーションを利用してツイート投稿者の「nickname」が表示されるように変更する
app/views/tweets/index.html.erbに
<a href="">
<span>投稿者</span><%= tweet.user.nickname %>
</a>
を追記する
そしてsequel Proでuser_idカラムに値を入れます
今回は1としました
app/views/tweets/index.html.erbの20行目のhref内に
/users/<%= tweet.user.id>を追記
そして以下を16-18行目に追記する
app/controllers/tweets_controller.rbの6行目を
@tweets = Tweet.incldes(:user)に書き換える
Nicknameを入力するためのフォーム部分を削除する
app/views/tweets/edit.html.erbの5行目も同様
app/cotroller/tweets_controller.erbの:nameも消す
tweetsテーブルからnameカラムを削除する
