レスポンシブ対応のブレイクポイントメモ
こんにちはHTML&CSS初心者のhimakuroです
今回の記事ではレスポンシブ対応を行なう際の PC、タブレット、スマホの幅(ブレイクポイント)のメモになります。
前回の記事
前回はChart.jsというライブラリを活用してチャートの表示を実装しました。 kuro-engineer-log.hatenablog.com
以前作ったプロジェクトで実際に使ったやつ
lgまでがタブレット想定。 xlより広い幅はパソコン想定
// min-width $breakpoint-up: ( 'sm': 'screen and (min-width: 400px)', 'md': 'screen and (min-width: 768px)', 'lg': 'screen and (min-width: 1000px)', 'xl': 'screen and (min-width: 1200px)', ) !default; // max-width $breakpoint-down: ( 'sm': 'screen and (max-width: 399px)', 'md': 'screen and (max-width: 767px)', 'lg': 'screen and (max-width: 999px)', 'xl': 'screen and (max-width: 1199px)', ) !default;
ブレイクポイントのサンプルその①
スマホ: 〜479px以下
タブレット: 480〜769px
PC: 770px〜
ブレイクポイントのサンプルその②
スマホ: 〜480px以下
タブレット: 481〜959px
PC: 960px〜
ブレイクポイントのサンプルその②
スマホ: 〜479px以下
タブレット: 480〜959px
PC: 960px〜
まとめ
スマホは基本479以下を使用する事が多い。 タブレットは769または1,000弱付近 そして基本1,000を超えた辺りからはPC用にしておけば良さそう。
【HTML&CSS】Chart.jsを使ってグラフを3分で実装する方法
こんにちはHTML&CSS初心者のhimakuroです
今回の記事ではChart.jsというライブラリを活用してポートフォリオにグラフを実装していきます。
前回の記事
前回はSwiper.jsというライブラリを活用してスライダーを実装しました。
もし興味があればこちらの記事も参考にしてみてください。
kuro-engineer-log.hatenablog.com
今回作るもの
今回はこんな感じのグラフを作っていきます。
Chart.jsとは
Chart.jsとはJavaScriptを活用して簡単にグラフが作成出来るオープンソースのライブラリです。
複数の種類のグラフを1つの図にまとめたり、アニメーションを入れたりと、幅広いデザインを取り入れることが出来るのが特徴です。
Chart.jsの導入方法
Chart.jsの導入方法としてはダウンロードしてプロジェクトのフォルダに格納する方法と、CDNで配信されている物を使う2通りがあります。
今回はお手軽なCDNで配信されているものを利用する方針にします。
index.html
<html> <head></head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> </html>
</body>
の下にchart.jsのライブラリを読み込む1行を追加すれば導入完了です。
グラフを描画してみる
続いてグラフを描画するためのコードを記述していきます。
index.html
<html> <head></head> <body> <div class="chart"> <canvas id="sampleChart"></canvas> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <script> let ctx = document.getElementById("sampleChart").getContext('2d'); let sampleChart = new Chart(ctx, { type: 'line', data: { labels: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'], datasets: [ { label: 'Analytics', data: [1, 3 ,4, 8, 10, 2, 0], borderColor: "rgba(18, 177, 192, 1)", backgroundColor: "rgba(168, 229, 255, 0.5)" }, ] } }); </script> </html>
id=sampleChart
のところにグラフを描画させるtype: 'line'
で線グラフを指定data
はどこにデータをプロットするかを指定borderColor
とbackgroundColor
で色を指定
上記のコードを追加後は下記のようなグラフが画面に表示されます。
グラフの見た目は調整
グラフが描画できたので少し見た目を調整していきます。
index.html
<script> let ctx = document.getElementById("sampleChart").getContext('2d'); ctx.canvas.height = 80; // 追加 let sampleChart = new Chart(ctx, { type: 'line', data: { labels: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'], datasets: [ { label: 'Analytics', lineTension: 0, // 追加 data: [1, 3 ,4, 8, 10, 2, 0], borderColor: "rgba(18, 177, 192, 1)", backgroundColor: "rgba(168, 229, 255, 0.5)" }, ] } });
height
を任意の値に変更lineTension: 0
にすることで、丸みを帯びた線から、より角張ったものに変更
height変更後はグラフがいい感じの高さになると思うので、あとは色を任意のものに変更したり、データ数を増やせばグラフの完成です。
簡単にグラフが作れる
自作しようとするとかなり大変なグラフもライブラリを使えば3分で実装することが可能です。
Chart.jsには様々な種類のグラフとオプションがあるので、公式サイトのドキュメントを見て自分のサイト(ポートフォリオ)に合ったデザインを使ってみてください。
【HTML&CSS】Swiper.jsを使ってスライダーを3分で実装する方法
こんにちはHTML&CSS初心者のhimakuroです
今回の記事ではswiper.jsというライブラリを活用してポートフォリオにスライダーを実装していきます。
今回作るもの
TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。 アイコン+名前を記載し、その下に説明文を記載します。
前回の記事
前回の記事ではヘッダーをスクロールした際にも画面上部に固定されるように実装しました。
kuro-engineer-log.hatenablog.com
Swiper.jsを導入する
Swiper.jsとはjQueryなどを使わずに簡単にスライダーが実装できるライブラリです。
使い方としてはダウンロードしてプロジェクトのフォルダに格納する方法と、CDNで配信されている物を使う2通りがあります。
今回はお手軽なCDNで配信されているものを利用する方針にします。
index.html
<html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"> </head> <body> 〜中略〜 </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> </html>
これだけで導入が出来ました。とても簡単ですね。
スライダーの雛形を実装していく
まずはスライダーの見た目部分を作成していきます。
Swiper.jsを機能させるためには、下記の3つのclassを持ったdivを用意してあげる必要があります
- swiper-container
- swiper-wrapper
- swiper-slide
swiper-slide
の中にはスライドさせる要素を入れて行きます。
今回は仮で swiper-inner
というクラスを付加したdivクラスを作成し、文言をpタグの中に入れてみました。
index.html
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-inner"> <p>コメント1</p> </div> </div> <div class="swiper-slide"> <div class="swiper-inner"> <p>コメント2</p> </div> </div> <div class="swiper-slide"> <div class="swiper-inner"> <p>コメント3</p> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>
この内容を記述した後に
画面を開きスライド機能を持った要素が画面に表示されればOKです
スライドを機能させる
スライダーは画面に表示されましたが、まだこれだけでは実際に矢印をクリックしてもスライドしてくれません。
Swiper.jsでスライダーを機能させるためには、JavaScriptを少しだけ記述してあげる必要があります。
index.html
<body> 〜中略〜 </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); </script> </html>
swiper.min.js
を読み込むための記述の1行したに、新たなScriptタグを記述しSwiperのインスタンスを作成してあげます。
また、その際には navigation
のオプションを付加してあげることで、左右の矢印を機能させていきます。
上記のコードを追加して画面をリロードしたら矢印が機能するようになればOKです。
スライダーをループさせる方法
Swiper.jsには様々なオプションが用意されていますが、その中にはループ機能もあります。
このループ機能を有効化する事で、スライダーが最後まで行ったら最初に戻るように設定出来ます。
index.html
<body> 〜中略〜 </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, // 追加 }); </script> </html>
ループ機能を有効化する方法はとても簡単で loop: true
の1行を追加するだけでOKです。
一定時間ごとに自動でスライダーが動くようにする
最後に数秒毎にスライダーが自動でスワイプするようにしていきます。
index.html
<body> 〜中略〜 </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 5000, }, }); </script> </html>
先程の loop
の1行したに autoplay
のオプションを追加しましょう。
ここで指定する delay
はmsecなので 5000
と指定した場合は5秒という扱いになります。
3分でスライダーの実装が出来た
今回はSwiper.jsを活用して簡単にスライダーを組み込む方法を紹介しました。
Swiperには他にもたくさんのオプションがあるので時間に余裕があるときに覗いてみると良いと思います。
【HTML&CSS】ヘッダーを画面上部に固定する方法!
こんにちはHTML&CSS初心者のhimakuroです
今回の記事ではヘッダーを画面上に固定する方法を書いて行きます。
PC画面はもちろん、スマホでサイトを見る場合でも同じ方法で実装が出来るので、是非活用してみてください。
今回作るもの
画像からは少し分かりづらいですが、ヘッダー部分がスクロールしても
画面上部に固定されるようにします。
前回の記事
前回はFlexboxを活用してカード風のリストを作成しました。
kuro-engineer-log.hatenablog.com
ランディングページ(LP)を作る際には必須と言っても良い内容なので
もしまだカードデザイン作るのが苦手だなと言う方は参考にしてみてください。
ヘッダーを作成する
ヘッダーには下記のコードを利用しました。
index.html
<header> <div class="header-content container"> <div class="logo">Design</div> </div> </header>
style.css
header { height: 80px; width: 100%; font-size: 18px; background-color: white; box-shadow: 0 1px 1px -1px rgba(0,0,0,0.6); } .header-content { padding: 10px; } .logo { font-size: 32px; font-weight: bold; margin-right: 40px; }
今回の目的はヘッダーを作ることではないので解説は割愛します。
今後別の記事で詳しく書く予定です。
ヘッダーを固定する
ここからが本題ですが、今回の内容は2行付け足すだけで実装が可能です。
style.css
header { height: 80px; width: 100%; font-size: 18px; background-color: white; box-shadow: 0 1px 1px -1px rgba(0,0,0,0.6); position: sticky; // 追加 top: 0; // 追加 }
position: sticky
と top: 0
を指定することで
画面上部に固定されるヘッダーが実装出来ます。
position: fixed
を使う場合もありますが、その場合は
一種の float
状態になってしまうので、高さをその分したに下げて上げないと
ヘッダーの下にある要素とかぶってしまうので注意が必要です。
【HTML&CSS】Flexboxを使ってカードのリストを作成する方法!
こんにちはHTML&CSS初心者のhimakuroです
今回の記事ではflexboxを活用してカード型のリストを横並びに作成していきます。
bootstrapなどを使っても実装は出来ますが、Flexboxを使って作ることでCSSの練習にもなるかなと思います
今回作るもの
TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。 アイコン+名前を記載し、その下に説明文を記載します。
前回の記事
今回の内容は前回作成したカテゴリーリストの作り方と似ている部分が多いので
もしまだこちらの記事を見ていない方は是非読んでみてください。
kuro-engineer-log.hatenablog.com
flexboxを活用してカード風に表示する
まずは枠となる部分から作っていきます。
index.html
<div class="card-list"> <div class="card"> <div class="profile"> </div> <div class="description"> </div> </div>
- 今回は複数のカードを表示するため、一番外側には
card-list
クラスを付加したdiv
を配置 - そして内部にカード1つ1つを入れていく
card
クラスを持ったdiv
を配置 card
クラスの内部にはアイコンと名前を入れるためのprofile
クラスを持ったdiv
を配置- 説明文を入れるための
description
クラスを持ったdiv
を配置
仮で内容を入れるとこんな感じになります。
index.html
<div class="card-list"> <div class="card"> <div class="profile"> <div class="profile-icon"> <img src="./assets/image/himakuro-plain.png"> </div> <div class="profile-name"> <span>himakuro</span> </div> </div> <div class="description"> <span>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみふめもやゆよらりるれろわをん</span> </div> </div>
内容を入れた跡の見た目はこんな感じになります。
アイコンと名前の部分を整えていく
続いてアイコンと名前の部分をCSSで整えていきます。
アイコン部分に関しては前回の記事と同様のものを活用していきます。
またカードの領域をより明確にするために、背景全体に色を付け、カードの背景にも色を付けておきましょう。
style.css
body { background-color:#f4f8fa; } .card { background-color: white; } .profile-icon img { width: 45px; border-radius: 50%; margin: auto 16px; }
このような見た目になればOKです。
カードの見た目を調整していく
次はカードの見た目を調整していきます。
style.css
.card { background-color: white; width: 24%; padding: 20px; } .card .profile { display: flex; margin-bottom: 10px; align-items: center; }
- カードの背景色を白に変更する
- 4つのカードを1行に並べるため、左右の余白を考慮しつつ
width: 24%
を指定 - カードの内部に余裕を持たせるために
padding: 20px
を指定 - アイコンの隣に名前を表示したいため、
display: flex
を指定 - アイコンと説明文の間に余白を設けるため
margin-bottom: 10px
を指定 - アイコンと名前の上下の位置を合わせるため
align-items: center
を指定
上記のスタイルを追加後はこのようになればOKです
一気にカードらしさが増してきたと思います。
カードリスト全体の見た目を調整していく
続いてカードを複数配置したときの見た目を調整していきます。
現状のコードだと仮にカードを8個配置してもこの様に縦一列に表示がされてしまいます。
これを下記のスタイルを追加することで4つのカードが1行に並ぶようにしていきます。
style.css
.card-list { margin-bottom: 30px; display: flex; // 追加 flex-wrap: wrap; // 追加 justify-content: space-between; // 追加 } .card { background-color: white; width: 24%; padding: 20px; box-sizing: border-box; // 追加 margin: 10px 0; // 追加 }
display: flex
を追加することで横並びにする- 指定したwidthで折返しがされるように
flex-wrap: wrap
を追加 justify-content: space-between
でそれぞれのカードを余白も加味した上で並ぶようにするbox-sizing: border-box
でpadding
やmargin
も考慮したwidth
になるようにするmargin: 10px 0
で各カードの上下に余白を設ける
スタイル追加後はこのような見た目になればOKです。
ほぼ完成形になりました。
カードに影を付加する
最後に見た目の改善と言うところでカードの下部分に影を追加します
style.css
.card { background-color: white; width: 24%; padding: 20px; box-sizing: border-box; margin: 10px 0; box-shadow: 0 2px 0 rgba(0,0,0,0.3); // 追加 }
box-shadow
はその名の通り、boxに影を追加するためのスタイルです。
追加後はこのようになればOKです。
文字がはみ出てしまう場合
今回の実装を行い、もし説明文がカードの外にはみ出てしまう場合は
word-break
を追加することで解消されます
style.css
.card { background-color: white; width: 24%; padding: 20px; box-sizing: border-box; margin: 10px 0; box-shadow: 0 2px 0 rgba(0,0,0,0.3); word-break: break-all; // 追加 }
Flexboxを活用すれば簡単にカード風の見た目が実装出来る
少し複雑に見えるカード風の見た目でもFlexboxを活用すれば簡単に実装が可能です。
このようなデザインが実装出来ればSNSのアプリのユーザーリストの実装にも役立つと思います。
是非これを機会に作れるようになっておきましょう。
【HTML&CSS】Flexboxで2行のリストを簡単に作成する方法!
こんにちはHTML&CSS初心者のhimakuroです。
今回の記事はFlexboxで2行のリストを作成する方法!を書いて行きます。
Flexboxを使えば大抵のデザインは作れるようになるので、デザイン出来る幅を広げて行きましょう。
今回作るリストの見た目
カテゴリーやメニューなどでよくあるシンプルなデザインですね。
使い勝手が良いので、是非これを機会に作れるようになっておきましょう。
リストを作る
まずは ul
とli
を活用してリストを作成します
index.html
<div class="category-wrapper"> <ul class="category-list"> <li class="category">カテゴリ1</li> <li class="category">カテゴリ2</li> <li class="category">カテゴリ3</li> <li class="category">カテゴリ4</li> <li class="category">カテゴリ5</li> <li class="category">カテゴリ6</li> <li class="category">カテゴリ7</li> <li class="category">カテゴリ8</li> </ul> </div>
このようなリストが画面に出てきたらOKです。
Flexboxを活用してリストを横並びにして整える
続いて display: flex
を使い、横並びにしていきます。
また今回は1行に4つカテゴリを配置する予定なので、左右の余白も考慮しつつ width: 24%
で指定をしていきます。
style.css
.category-list { display: flex; } .category { width: 24%; }
width: 24%
を指定したのにも関わらず、幅が4等分にされず1行に並びますが一旦はOKです
flex-wrapで複数行に対応させる
flexboxを使う際に flex-wrap
を指定する事で複数行にすることが出来ます。
デフォルトではこれが no-wrap
になっているため、折りたたみが無効化されて1行に収まるように調整されてしまいます。
style.css
.category-list { display: flex; flex-wrap: wrap; text-align: center; }
.category-list
の内容を上記に変更し、リストが2行になり文字が各リスト要素の中央に来るかを確認しましょう。
余白の調整を行なう
続いて余白をいい感じに調整していきます。
この作業を行なう際には、背景色を指定して各要素の範囲を可視化する事をおすすめします。
具体的には .category
のスタイルとして背景色を追加します。
今回は分かりやすいように水色(skyblue)を指定しました。
style.css
.category { background-color: skyblue; width: 24%; }
水色の背景が付き、各要素の範囲が把握出来るようになればOKです。
今回は各リストの左右に若干の余白を設けるために width: 24%
を指定しました。
そして背景を水色にしたことにより、その余白が右に来てしまっていることがわかります。
そこで .category-list
に justify-content: space-between;
を追加しましょう。
style.css
.category-list { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; }
これを追加することにより、リスト要素全体が横幅をフルに使うようになり、リスト間に左右の余白が生まれます。
あとは上下の余白が欲しいので、 margin
を使い調整を行います。
style.css
.category { background-color: skyblue; width: 24%; margin: 10px 0px; }
余白の調整はこれで完了です。
リストの見た目を調整する
現状のままでも良いですが、リストの文字が若干窮屈な状態になってしまっているので最終調整を行なっていきます。
内容としては padding
と box-sizing
を追加していきます。
style.css
.category { background-color: skyblue; width: 24%; padding: 20px; box-sizing: border-box; margin: 10px 0px; }
paddingを追加することにより、リストを拡大しました。
そしてこのようなpaddingを追加すると、その分横幅も追加されるのでリストが崩れてしまうことがあります。
そこでその現象を防ぐために box-sizing: border-box
を追加しています。
border-box
を追加することで、padding
や margin
も加味した上で幅を確保してくれるようになります。
これら2つのスタイルを追加することで、この様に窮屈さも解消されたリストの完成です!
flexboxを活用する際には box-sizing
は使う機会が多いと思うので是非覚えておきましょう。
【HTML&CSS】アイコン付きの検索ボックスを作成する方法
こんにちはHTML&CSS初心者のhimakuroです。
今回の記事は検索ボックスをHTML&CSSで作る方法を書いて行きます。
検索ボックスを作るだけなら、 input
タグを活用する事で簡単に設置出来ますが
アイコンを付けるとなると少しだけ手間がかかります。
そこで自分のメモとして実装した内容をまとめる。
今回作る検索ボックスの見た目
今回はこんな感じのを作ります。
アイコンはfont-awesomeのものを利用します
Font Awesomeを読み込む
今回は検索ボックスの虫眼鏡アイコンを利用するので、まずはFont Awesomeを読み込む必要があります。
FontAwesomeはダウンロードして利用しても良いですが、今回は head
に link href
の行を追加して利用する方法を取ります。
<head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head>
検索ボックスを配置する
下記のコードを記述して検索ボックスを配置しましょう。
<div class="search-box"> <input type="text" placeholder="Search.."> <button type="submit">更新</button> </div>
このような検索ボックスが表示されればOKです。
検索ボックスにアイコンを付ける
続いてFont Awesomeの虫眼鏡アイコンを検索ボックスにつけていきます。
先程のコードを書き換えこの様に変更しましょう。
<div class="search-box"> <input type="text" placeholder="Search.."> <button type="submit"><i class="fa fa-search"></i></button> </div>
アイコンが表示されればOKです。
検索ボックスの見た目を調整
現状の見た目だと少しイマイチなので、CSSを適用し見た目を整えて行きます。
style.css
.search-box { position: relative; } input[type=text] { padding: 6px; font-size: 18px; background-color: #f4f8fa; border: none; } .search-box button { padding: 6px 15px; font-size: 18px; position: absolute; right: 1px; border: none; background: none; cursor: pointer; }
ポイントは .search-box
に対して position: relative;
を記述し
子要素である button
に position: absolute
を指定しているところ。
こうすることで虫眼鏡アイコンの位置が親要素である検索ボックスの位置を基準とし、
更に right: 0
を指定することで、検索ボックスの一番右から0px移動した位置に配置されるようになる(一番右端になる)
完成…!