Webレイアウトに使う「position」プロパティについて
はじめに
CSSのpositionプロパティは、Webページ上の要素の配置方法を指定するプロパティです。難しく感じたので、今日はpositionプロパティについてまとめてみました。
- はじめに
- 参考にしたYouTubeの解説
- 1. position: static（デフォルト値）
- 2. position: relative
- 3. position: absolute
- 4. position: fixed
- 5. position: sticky
- まとめ
参考にしたYouTubeの解説
よくYouTubeで勉強する際に参考にしているたにぐちまことさんのYouTubeです。
説明がとても分かりやすくて勉強になります！
1. position: static（デフォルト値）
staticはデフォルトの値。top、right、bottom、left、z-indexなどのプロパティを指定しても何も起こらない。
2. position: relative
今の位置から相対的に移動させることができる。
3. position: absolute
最も近い位置指定の親要素を基準として配置される。親要素にposition:relative;を指定して使うことが多い。親要素が見つからない場合は、ビューポートを基準とする。
4. position: fixed
ビューポートを基準として固定配置される。スクロールしても位置は変わらない。ナビゲーションバーなどによく使われている。
5. position: sticky
スクロール位置に応じて、relative位置とfixed位置を切り替える。見出しの追従などに使われている。
まとめ
positionプロパティはすぐにはなかなか理解できないですよね。何回も使ってレイアウトを自由自在にできるようにマスターしていきたいです！同じように勉強している方の参考になれば嬉しいです。
ドットインストールを1ヶ月有料会員になって勉強した感想
はじめに
ドットインストールは、プログラミング学習のための動画教材を提供するウェブサイトです。1ヶ月間有料会員として利用してみた経験をもとに、その特徴や良かった点などを記録したいと思います。
ドットインストールとは
3分程度の短い動画で、プログラミングの基礎から応用までを学べるオンライン学習プラットフォームです。無料会員でも利用できますが、有料会員になることで全ての教材にアクセスできるようになります。
良かった点
- 動画が短くて集中しやすい
- 実践的な内容が多く、すぐに使える知識が身につく
- 説明が丁寧で初心者でも理解しやすい
- 豊富な教材数があり、様々な言語やフレームワークを学べる
- 動画の進行が適度なペースで、コードを書きながら学習できる
1ヶ月間で学んだこと
私はProgateで基礎は学んでいたので実践できそうなレッスンを中心に受講しました。
- 実践！ポートフォリオサイトを模写しよう
- 実践！アプリのランディングページを模写しよう
- 実践！ECサイトを模写しよう
- GitHub PagesでWebサイトを公開しよう
- Emmetで爆速コーディングを習得しよう
- CSS入門 入れ子編
- JavaScript入門 DOM編
- JavaScriptでハンバーガーメニューを作ろう
- JavaScriptでモーダルウィンドウを作ろう
- JavaScriptでアコーディオンUIを作ろう
- JavaScriptでタブメニューを作ろう
- JavaScriptでカルーセルを作ろう
- AOSでスクロールアニメーションを実装しよう
- GLightboxでポップアップする画像ギャラリーを実装しよう
学習効果
基礎的な知識だけでなく実践で使えそうな知識を幅広く習得できました。実際にVSCodeを使ってコードを書きながら学習できる点が良かったです。一つの動画が3分程と短いのでスキマ時間での学習にとても良かったです。
費用対効果
月額料金と得られる学習効果を考えると、コストパフォーマンスはとても良いです。特に、複数の言語やフレームワークを学びたい方には適していると思います。月額料金は1ヶ月だけだと1,280円(税込)。6ヶ月、12ヶ月払いにするともう少し月額料金は安くなります。
結論
プログラミング学習を始めたい初心者や、新しい技術を効率的に学びたい方にとって、ドットインストールは非常に良いサービスだと思います。
短時間で効率的に学習できる点は非常に魅力的で、家事育児の合間を縫って学習するのに適しています。1ヶ月という期間でしたが、十分に価値のある投資だったと感じています。
Chromeの検証ツールを日本語にする方法
はじめに
Chromeの検証ツール（Developer Tools）は、デフォルトで英語表示になっていますが、簡単な手順で日本語に変更することができます。今回はその手順をメモで残しておきます。
手順1: 検証ツールを開く
- Chromeブラウザで右クリックして「検証」を選択
- または、キーボードショートカット：
手順2: 設定画面を開く
- 検証ツールの右上にある三点リーダーをクリック→「Settings」（設定）を選択
- または、キーボードショートカット：F1
手順3: 言語設定を変更
- 左側のメニューから「Preferences」を選択
- 「Languages」セクションを探す
- 「Language」のドロップダウンメニューから「日本語」を選択
手順4: 変更を適用
- 設定画面を閉じる
- 検証ツールを一度閉じて、再度開く
これで検証ツールのインターフェースが日本語で表示されるようになります。
注意点
- Chromeのバージョンによって設定画面の表示が若干異なる場合があります
- 一部の専門用語は日本語に翻訳されていない場合があります
- Chromeのアップデートにより、設定方法が変更される可能性があります
まとめ
日本語化することで開発作業やウェブページの調査がより分かりやすくなりますし、調べる時間も短縮できます！特にプログラミング初学者の方には、おすすめの設定なのですぐやってしまいましょう。Web制作の勉強の参考になれば嬉しいです。
Webレイアウトに使う「float」「flexbox」「grid」の違い
WEB制作の学習中でflexboxがよく分からない…floatとの違いは何？grid難しい！
そうなっていませんか？私も難しいと感じたので、色々調べました。
この記事ではこの3つのWEBレイアウトに使用する手法の違いについてまとめています。
float: 文章の回り込み用
「float」は、元々テキストの回り込みを作るために作られたプロパティです。画像をテキストの左側や右側に配置するような用途が得意ですが、レイアウト全体に使うのは少し難しいです。
- 主に回り込み（文章と画像を並べるなど）に使用
- レイアウトに使うと崩れやすい
- 現在は代替技術が充実しているため、レイアウトではあまり使われない
画像
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト
flexbox: 1次元のレイアウトに最適
「flexbox」は、1列（横方向）または1行（縦方向）にアイテムを柔軟に並べるための手法です。横一列に等間隔で要素を並べたり、中央揃えにするのが簡単にできます。
- 1次元のレイアウト（行または列）に特化
- 子要素のサイズを自動で調整できる
- 配置や揃えが簡単（中央揃え、隙間調整など）
- レスポンシブデザインに便利
左側
中央
右側
grid: 2次元のレイアウトに最適
「grid」は、行と列の両方を組み合わせた2次元のレイアウトを作るための手法です。ページ全体の骨組み（グリッドレイアウト）を簡単に構築できます。
- 行と列の両方を一度に制御可能
- レイアウトをピクセル単位で詳細に指定できる
- 固定のレイアウトが必要なデザインに適している
- 複雑なデザインを短いコードで表現できる
アイテム１
アイテム２
アイテム３
アイテム４
アイテム５
アイテム６
まとめ
- 簡単に並べたい時はflexbox
- ページ全体の骨組みをするのに最適なのは grid
- テキストの回り込みをさせたい時はfloat
floatは歴史が古い技術で、現在はflexboxやgridが主流だそうです。それぞれ得意分野が異なるため、適材適所で使い分けていきたいですね。
Webレイアウトの参考になれば嬉しいです。
主婦必見！chatGPTを使って家事も育児も効率アップ！
chatGPTって何ができるの？
一回使ってみたけど、思った回答がこなくて使い方が分からない…
上手く使いこなせると私たちの生活を楽にしてくれる相棒になってくれます！
この記事では家事や育児に活用できるChatGPTの使い方をご紹介します。
chatGPTの始め方
ChatGPTを使うには、以下の手順を行います。
- ChatGPTのWebサイトにアクセス、またはアプリをダウンロード
- アカウントを作成（メールアドレスやGoogleアカウントで簡単に登録可能）
- ログインして、画面に表示されるチャット欄に質問やお願いを入力する
友達に話しかける感じでOK！もし、思ったような回答が来なかったら、何回も修正して聞いてみましょう。使っていたらコツも掴めてきますよ。
スマホからでもパソコンからでも利用できます。無料で利用できます。主婦の方にはスマホアプリがオススメ！
iOSアプリはこちらから↓
androidアプリはこちらから↓
毎日の献立の相談
「今日の晩ご飯、何にしよう？」と毎日考えるのが面倒…という方、多いのでは？私も悩むこと多いし、そもそも料理苦手です笑
質問例
- キャベツを消費したいけど簡単なレシピある？
- 6歳児でもOKな夜ごはんメニューを1週間分考えて！
あっという間にレシピ案をいくつも提案してくれるので、買い物リストもサクッと作れます。
子どもの疑問や勉強のサポート
お子さんがこれ何ー？どうして〇〇なの？と聞いてくること多くないですか？私の娘も毎日なんでなんで攻撃がすごいです笑
どうしても分からないことが出てきた時や説明の仕方に困ったらchatGPTに助けてもらいましょう！
質問例
- 幼稚園児にも分かりやすくなんで雲が動くのか教えて！できればひらがなで。
- 幼稚園児にも分かりやすくなんで冬は息が白くなるのか教えて！
親子で聞いてみるのがオススメです！
最近はAIを知っている子供達も多いです。私は最近娘にAIってなに？と聞かれたのでじゃあAIに聞いてみるかと思って一緒に聞いてみました笑
愚痴を聞いてもらう
主婦の皆さま、ストレス溜まっていませんか？
chatGPTには感情がないので、何を言ってもOKです！たくさん愚痴を聞いてもらっちゃいましょう！
使用例
- 子供がおもちゃ片付けてくれないよ
- 今日は娘がご飯食べてくれなかったから悲しかったよ慰めて〜
子供との接し方のアドバイスをもらえたり、思った以上に優しく慰めてくれますよ！笑
使うときの注意点
便利なchatGPTですが、気をつけることもあります。
- 提案された情報は自分で確認する（間違いがある場合も）
- プライバシーに関わる個人情報は入力しない
- 使いすぎに注意！時間を決めて利用するのが良き
まとめ
ChatGPTは、上手く使いこなせると忙しい主婦の相棒になってくれます！家事や育児のサポートだけでなく、自分の趣味や勉強にも役立てることもできます。
1年前と比べて回答の質もどんどん良くなってきているので、友達に話しかける感じで使ってみてくださいね。
jQueryの学習は必要？
jQueryは学ぶべき？
私自身、学習を進める中で疑問に思いました。インターネットで調べてみると、jQueryは便利で簡単と言われる一方で、「時代遅れ」といった意見も見かけます。今回は私が調べたことや考えたことをもとに、jQueryを学ぶべきかどうかについて整理していきます。
この記事は2024年12月に書いています。
jQueryとは？
jQueryは、2006年に登場したJavaScriptライブラリで、Webサイト開発を簡単にするために作られました。特に次のような機能が人気だそうです。
- HTMLやCSSの要素を簡単に操作できる
- 短いコードでアニメーションやイベント処理が実装できる
- 多くのブラウザ間の互換性をサポートしている
jQueryのメリット
簡単に使える
短いコードで複雑な操作が可能。(DOM操作)
豊富なプラグイン
スライダーやモーダルウィンドウなど、多数のプラグインがある。
既存プロジェクトでの利用
古いWebサイトではいまだにjQueryが使われているため、保守や改修に役立つ。
jQueryのデメリット
パフォーマンスの低下
jQueryを使うと、モダンなJavaScriptよりも処理速度が遅くなる場合がある。
モダンな技術の台頭
ReactやVue.jsなど、より強力なフレームワークが主流になりつつある。
時代遅れと言われることも
新しいプロジェクトではほとんど使われなくなっているらしい。
どんな人が学ぶべき？
jQueryを学ぶべきかどうかは、目的や学びたい分野によります。
学ぶべき人
業務で既存プロジェクトに関わる予定がある人
古いシステムの保守では、jQueryが現役で使われている。
DOM操作に慣れていない人
jQueryはDOM操作の基礎を学ぶのに適している。
学ばなくてもよい人
新しい技術を習得したい人
ReactやVue.jsなどのフレームワークを学ぶほうが、現在の業界需要に合っている。
ゼロから新しいWebサイトを作りたい人
jQueryに頼らず、純粋なJavaScriptや新しい技術を使うほうが将来性がある。
私の結論
私自身はProgateにjQueryの講座があったので、一通り学ぶことにしました。理由は、初心者としてDOM操作やイベント処理の基礎を学びたかったからです。基礎を押さえたら、新しい技術を学んでいきたいと思います。
また、jQueryを学んでいく中で、JavaScriptのスキル向上にもつながると思いました。
まとめ
jQueryは、今でも学ぶ価値がある場面がある一方で、新しい技術が主流となった現在では優先度が下がっているんだなと感じました。初心者でDOM操作の基本を学びたい場合や、一通り学習してみてもいいと思います。
今からWEB制作の技術を学ぶ人には新しい技術であるReactやVue.jsなどを学ぶほうがいいのかもしれません。
学習している人がjQueryを学ぶかどうかの参考になれば幸いです。
Progateでプログラミングを学習した主婦のリアルな感想
プログラミングに興味があるけど、子育てや家事しながら勉強できるのかな？
Progateで学習するのはどんな感じ？
この記事では、家事育児のスキマ時間で学んだ私の体験や感想をお伝えしていきます。
自己紹介
はじめまして、ichikoです。
6歳と2歳の子育てママです。
スキルを身に付けて社会復帰をしたいと思い、家事や育児のスキマ時間を活用してWEB制作やプログラミングの勉強を始めました。
私と同じように主婦でプログラミングを学習したい方の参考になったら幸いです。
Progateを選んだ理由
プログラミングの学習サイトはいくつもありますが、Progateを選んだ理由は以下の3つです。
初心者に優しい構成
Progateではコードを打ちながら学ぶスタイル。視覚的な教材が充実している点に魅力を感じました。
無料でも始められる
無料プランでも基礎的なコースを体験できるので、気軽に始められました。やってみて有料のコースもやりたいと思ったので、私は1ヶ月だけと決めて有料プランに入りました！
1ヶ月のみの料金は1,490円！自分に合うか分からない時、まず勉強してみるのにちょうど良いと思います。
スキマ時間で進められる
レッスンが短い単位で区切られているため、家事や育児の合間に取り組みやすいと感じました。主婦として限られた時間の中で学ぶにはピッタリのツールでした！
学習した感想
私はHTML & CSSとJavaScriptとjQueryを学びました。Progateのレッスンは視覚的でわかりやすく、楽しみながら学ぶことができました。
特に良かった点は、以下の3つです。
実際にコードを打ちながら学べる
理論だけではなく、自分でコードを書いて動作を確認するプロセスがとても楽しかったです。保存することなくすぐに反映されるので、操作性もとても良いです！
スライドで何度も復習できる
レッスン内容は何度でも繰り返し見られるので、分からない所は何度もスライドを見直しました。
道場レッスンが出来たら達成感がある
道場レッスンに入った時は本当に手が止まりました...泣 しかしスライドを見ながらなんとか進めて、道場レッスンを修了できた時はとても達成感がありました！
スキマ時間の作り方
忙しい毎日の中で、どうやって学習時間を確保したのかをご紹介します。
お昼寝中や寝かしつけ後
私の場合、次女がお昼寝している時間を活用しました。昼寝時間に幼稚園のお迎えが被ったりもしていたので、子供達が寝てからの夜に少しでもパソコンを開くように意識していました。
スマホやタブレットを活用
手軽にアクセスできる環境を作ることで、思い立ったときにすぐスライドを見たりできるようにしました。スマホよりはタブレットがオススメです！
パソコンをすぐ使える場所に置く
今まで子供が触らないようにと基本しまっていたのですが、それではパソコンを触る頻度が下がるので、お昼寝した時などにすぐ触れるようダイニングテーブルに置くようにしました！
ただ食事の際は片付けるのをオススメします笑 下手すると汚れるので‥
得られたスキルと効果
簡単なHTMLやCSSを使ってウェブページを作れるようになり、ブログのデザインを少しカスタマイズできるようになりました。実際このブログを作る際にも役に立ちました。色々なサイトを検証ツールでコードを見て、どんな風に作っているのか少し理解できてきました！
まとめ
Progateでの学習を通して、WEBの世界に慣れることができました。主婦としての限られた時間でも、コツコツと学習を続けたら確実にスキルが身につきます。
これから学んだスキルを活かしてブログ運営やWEB制作に挑戦していきたいと思います。同じように主婦だけどスキマ時間で何か始めたいと考えている方に、参考になれば幸いです！
