Blog

Lifestyle

【活動記録】完璧ではなくても、コツコツと手を動かす8月

1ヶ月の活動をまとめる活動記録。 8月は、こつこつ自分で手を動かしてやってみた１ヶ月でした。 8月の活動ピックアップ Gatsbyブログを育てる 【主にカスタマイズした箇所】 ①　アイキャッチをつけて、ブログ一覧を見て楽しめるようにした。 ②　aboutやservice…

2020/08/31
Design

デザインのドリル⑤ トレースで、複雑なレイアウトを学ぶ

「トレース＆模写で学ぶ　デザインのドリル」を使って、デザイントレースの練習した記録です。 写真の効果的な使い方 Lesson 27 雑誌の特集記事 学んだこと／気づいたこと 模写中は気づかなかったけれど、グリッドでレイアウトをしているので、まとまりがよく見える Lesson2…

2020/08/28
Programming

【CSS】Flexboxのプロパティまとめ

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

2020/08/09
Programming

【CSS】Box-Sizingの使い方

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

2020/08/09
Lifestyle

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

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

2020/07/31
Programming

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

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

2020/07/31
Programming

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

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

2020/07/25
Programming

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

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

2020/07/18
Programming

WordPressからGatsby.jsにブログを変えました

ブログをWordPressからGatsbyに変えました。 Gatsbyとは？ GatsbyはWebサイトのHTMLファイルを生成してくれるツールです。 静的サイトジェネレーターと呼ばれています WordPressなどのCMSでは、データベースで記事を管理しています。 URL…

2020/07/04
WordPress

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

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

2020/06/06