kuroのエンジニアメモ

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

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

2020/07/09 00:01

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

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

2020/07/06 23:05

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

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

2020/07/05 16:18

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

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

2020/07/04 17:14

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

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

2020/07/02 22:02

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

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

2020/07/02 00:53