Blog

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

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

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

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

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

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

GitHub+Netlifyで プログラムや記事を更新するとホームページも自動更新できるようになります。 事前準備として、GitHubとNetlifyのアカウント（無料プランでOK）を取得しておきます。 GitHubリポジトリにプロジェクトをpushする GitHub…

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

HTMLとCSSで、お問い合わせフォームのラジオボタンやチェックボタンの代わりに画像選択にします。 Before After HTMLとCSS やり方 ①label＋imgを足す labelタグの中で画像を表示します。 labelタグのforはinputのid…

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