こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではレスポンシブ対応を行なう際の PC、タブレット、スマホの幅(ブレイクポイント)のメモになります。 前回の記事 前回はChart.jsというライブラリを活用してチャートの表示を実装しました。 kuro-engin…
こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではChart.jsというライブラリを活用してポートフォリオにグラフを実装していきます。 前回の記事 前回はSwiper.jsというライブラリを活用してスライダーを実装しました。 もし興味があればこちらの記事も…
こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではswiper.jsというライブラリを活用してポートフォリオにスライダーを実装していきます。 今回作るもの TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。…
こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではヘッダーを画面上に固定する方法を書いて行きます。 PC画面はもちろん、スマホでサイトを見る場合でも同じ方法で実装が出来るので、是非活用してみてください。 今回作るもの 画像からは少し分かりづ…
こんにちはHTML&CSS初心者のhimakuroです 今回の記事ではflexboxを活用してカード型のリストを横並びに作成していきます。 bootstrapなどを使っても実装は出来ますが、Flexboxを使って作ることでCSSの練習にもなるかなと思います 今回作るもの TwitterやInst…
こんにちはHTML&CSS初心者のhimakuroです。 今回の記事はFlexboxで2行のリストを作成する方法!を書いて行きます。 Flexboxを使えば大抵のデザインは作れるようになるので、デザイン出来る幅を広げて行きましょう。 今回作るリストの見た目 カテゴリーやメニ…
こんにちはHTML&CSS初心者のhimakuroです。 今回の記事は検索ボックスをHTML&CSSで作る方法を書いて行きます。 検索ボックスを作るだけなら、 input タグを活用する事で簡単に設置出来ますが アイコンを付けるとなると少しだけ手間がかかります。 そこで自分…
はじめまして、himakuroです。 今までは個人ブログにプログラミングの学習内容とかをまとめて書くようにしてたんですが、記事を投稿するのって結構カロリー消費するんですよね。 もちろん投稿するからには、間違った内容を掲載しないように、しっかりと理解…