Blog

【CSS】Box-Sizingの使い方

CSSプロパティのBox-sizingの説明です。 Box-sizingはdivやpなどのボックスサイズの計算方法を指定してくれる。 ボックス幅の計算方法 デフォルトのcontent-boxだと、 ボックスの幅=コンテンツ幅(width)+内側の余白(padding…

August 09, 2020

Flexboxのプロパティまとめ

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 今回の記事では、Flexboxでよく使うプロパティをまとめました。 Flexboxの使い方 Flexboxを使う時は、整列させたいアイテム(item)をまとめて格納するコンテナ(conteiner…

August 09, 2020

【活動記録】Gatsbyに挑戦した7月

1ヶ月の実働をまとめる活動記録。 7月はブログをリニューアルし、新しい興味も芽生える1 ヶ月でした。 7月のできごとピックアップ WordPressからGatsbyにブログをリニューアル WordPressはhtml/css…

July 31, 2020

Flexboxで作るヘッダーのサンプル集

Flexboxは、CSSはWebページのレイアウトを設定できるモジュール。 Flexboxを使うと簡単に整列したり、配置できるようになるので、ヘッダーなどのレイアウトに使われています。 今回の記事では、Flexbox…

July 31, 2020

CSSとJavaScriptで作るハンバーガーメニュー

ハンバーガーメニューとは スマホなどで、ホームページを表示した時に見える3本線のこと。 この3本線が、ハンバーガーのように見えることから、ハンバーガーメニューと呼ばれています。 クリックすると、メニューが表示されます。 参考サイト:The Virginia…

July 25, 2020

【Gatsby】ブログのカテゴリー画像を表示させる

ブログ記事にカテゴリーのアイコンを表示させました。 【やりたかったこと】 各記事にはカテゴリーが一つ設定されている 記事一覧にカテゴリー画像を表示する gatsby-imageで画像を表示させたい 【参考記事】 パスを渡せばgatsby-image…

July 18, 2020

Gatsbyブログの始め方

使っていたブログを、WordPressからGatsbyに変えました。 Gatsbyとは? 静的サイトジェネレーターという WebサイトのHTMLファイルを生成してくれるツール。 WordPressなどのCMS…

July 04, 2020

WordPressテーマのカスタマイズまとめ

カスタマイズの準備 子テーマの作り方 テーマにcssとjsを読み込む書き方 記事デザインの装飾 style.cssにコードを追加して、見出しや、飾り枠など記事のデザインを変更していきます。 CSSで作れるかわいいブログ見出しのデザイン CSS…

June 06, 2020