レスポンシブ対応のブレイクポイントメモ

こんにちは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…

【HTML&CSS】Chart.jsを使ってグラフを3分で実装する方法

こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではChart.jsというライブラリを活用してポートフォリオにグラフを実装していきます。 前回の記事 前回はSwiper.jsというライブラリを活用してスライダーを実装しました。 もし興味があればこちらの記事も参考にしてみてください。 kuro-engineer-log.hatenablog.com 今回作るもの 今回はこんな感じのグラフを作っていきます。 Chart.jsとは Chart.jsとはJavaScriptを活用して簡単にグラフが作成出来るオープンソースのライブラリです。 複数の種類のグラフを1つの図にまとめたり、ア…

【HTML&CSS】Swiper.jsを使ってスライダーを3分で実装する方法

こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではswiper.jsというライブラリを活用してポートフォリオにスライダーを実装していきます。 今回作るもの TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。 アイコン＋名前を記載し、その下に説明文を記載します。 前回の記事 前回の記事ではヘッダーをスクロールした際にも画面上部に固定されるように実装しました。 kuro-engineer-log.hatenablog.com Swiper.jsを導入する Swiper.jsとはjQueryなどを使わずに簡単にスライダー…

【HTML&CSS】ヘッダーを画面上部に固定する方法！

こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではヘッダーを画面上に固定する方法を書いて行きます。 PC画面はもちろん、スマホでサイトを見る場合でも同じ方法で実装が出来るので、是非活用してみてください。 今回作るもの 画像からは少し分かりづらいですが、ヘッダー部分がスクロールしても 画面上部に固定されるようにします。 前回の記事 前回はFlexboxを活用してカード風のリストを作成しました。 kuro-engineer-log.hatenablog.com ランディングページ（LP）を作る際には必須と言っても良い内容なので もしまだカードデザイン作るのが苦手だなと言う方は参…

【HTML&CSS】Flexboxを使ってカードのリストを作成する方法！

こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではflexboxを活用してカード型のリストを横並びに作成していきます。 bootstrapなどを使っても実装は出来ますが、Flexboxを使って作ることでCSSの練習にもなるかなと思います 今回作るもの TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。 アイコン＋名前を記載し、その下に説明文を記載します。 前回の記事 今回の内容は前回作成したカテゴリーリストの作り方と似ている部分が多いので もしまだこちらの記事を見ていない方は是非読んでみてください。 kuro-en…

【HTML&CSS】Flexboxで2行のリストを簡単に作成する方法！

こんにちはHTML&CSS初心者のhimakuroです。 今回の記事はFlexboxで2行のリストを作成する方法！を書いて行きます。 Flexboxを使えば大抵のデザインは作れるようになるので、デザイン出来る幅を広げて行きましょう。 今回作るリストの見た目 カテゴリーやメニューなどでよくあるシンプルなデザインですね。 使い勝手が良いので、是非これを機会に作れるようになっておきましょう。 リストを作る まずは ul とli を活用してリストを作成します index.html <div class="category-wrapper"> <ul class="category-list"> <li…

【HTML&CSS】アイコン付きの検索ボックスを作成する方法

こんにちはHTML&CSS初心者のhimakuroです。 今回の記事は検索ボックスをHTML&CSSで作る方法を書いて行きます。 検索ボックスを作るだけなら、 input タグを活用する事で簡単に設置出来ますが アイコンを付けるとなると少しだけ手間がかかります。 そこで自分のメモとして実装した内容をまとめる。 今回作る検索ボックスの見た目 今回はこんな感じのを作ります。 アイコンはfont-awesomeのものを利用します Font Awesomeを読み込む 今回は検索ボックスの虫眼鏡アイコンを利用するので、まずはFont Awesomeを読み込む必要があります。 FontAwesomeはダウ…

【HTML&CSS】flexboxを使って2つのブロック要素を両脇（左右）に寄せる方法

こんにちはHTML&CSS初心者のhimakuroです。 今回の記事は次世代のfloatと言っても過言ではないflexboxについてです。 この間ランディングページ（LP）のヘッダーを実装している時に、少しハマってしまったのでメモがてらその内容をまとめます。 flexboxを活用してヘッダーを作りたかった よくあるこんな感じのデザインの上部分（サイトタイトルとロゴ）をflexを活用して実装しようとしました。 startとendで両サイドに寄せようとしていた flexな要素に対して左右の位置を調整する場合、 justify-content を活用する事が出来ます。 そこで僕は下記のようなコードを…

新たにブログを立ち上げました - 初投稿

はじめまして、himakuroです。 今までは個人ブログにプログラミングの学習内容とかをまとめて書くようにしてたんですが、記事を投稿するのって結構カロリー消費するんですよね。 もちろん投稿するからには、間違った内容を掲載しないように、しっかりと理解した上で執筆するので、その分理解度も上がるというメリットはあります。 ただもっと気軽に投稿出来る場所がほしいなと思ったので、このブログを立ち上げました。 ちなみにはてなブログを投稿場所に選んだ理由は、以前自動更新されてしまった2年分のはてなブログProが残り440日も残っていたという単純な理由からです。 またプログラミングについてだけでなく エンジニ…