シエル＃

初学者のプログラマーです。プログラミング学習を開始した日付は2023年7月14日です。…

シエル＃

初学者のプログラマーです。プログラミング学習を開始した日付は2023年7月14日です。目標は1年間継続的に学習し、Webサービスを開発ことです。皆様とのつながりを楽しみにしています！ 画像は自作のナスで家庭菜園が好きです。

Day 12-模写コーディングの反省点

★本日の学習成果まとめ手順1 ・コーディング前にサイト全体を確認し、どの部分をどのタグで囲むかを考える。 この作業が一番重要で、「ブロックボックスにするからここはdivで囲う必要がある」等をここで認識して考える必要がある。 手順2 ・ディレクトリ(リポジトリ)を用意する 今回であれば、HTMLとCSSとjpgを入れておくディレクトリを用意して、入れておく。 手順3 ・まずは全体のコーディング ◇HTML ①meta　name＝「」　content＝「」でカッコの中にサイト

シエル＃

    • Day 11- 模写コーディング開始！！

      ★本日の学習成果まとめ・GPTさん居ないと模写コーディング全然できない（笑） ・GPT＆自分でできたのが下のようなサイトです。中途半端で終わってしまった・・・・ ・自分のコードとお手本コードを見比べてみよう・・・ ★備忘録ノート▽header ・ある程度連なっているものは、ulとliで作るのが効率いい ・要素を横並びにする場合はdisplay:flexで簡単 ・要素を両端に並べたりするときはjustyfu-contentでいろんなことができ、要素の中心を合わせたいときはal

      シエル＃

      • Day １０-ポートフォリオサイトを模写する

        ★本日の学習成果まとめ・要素を中央揃えにしたい →まずはブロックボックスなのかインラインボックスなのか認識が大事。 そして、中央揃えにする簡単な方法として margin; o auto; とする方法。 この場合は、ブロックボックスにwigthを設定して、領域内とwigthの余白分をautoで半分にして中央揃えにする。 もう一つの方法として text-align:center とする方法がある。 これは、ブロックボックス内のテキストやインラインボックスに対して中央揃え

        シエル＃

        • Day 9-CSS入門　アニメーション編

          ★本日の学習成果まとめ・transitionプロパティでできること 変化を行うためのトリガーが必要(クリック等)。 変化前と変化後の2つのスタイルしか指定できない。 ・animationプロパティでできること 所要時間に応じて様々な動きを加えることができる。 ・簡単なアニメーションの方法は ①タグのクラスを指定して変化前のスタイルを指定 ②hoverやonclick-eventで動作する動きを設定する ③設定方法はtransitionプロパティで①移動　translate②

          シエル＃

        Day 12-模写コーディングの反省点

        シエル＃

          Day 8-CSS入門　メディアクエリー編

          ★本日の学習成果まとめ・メディアクエリーとはスマートフォンやデスクトップなどの表示領域が違う機器ごとに見え方を変える際に使用するもの。 最近ではスマートフォン向けにモバイルファーストと呼ばれる手法でコーディングするのが一般的。 ・ブレイクポイントを複数指定するときは小さいブレイクポイントから記載すること。そうしないと後から記載したブレイクポイントが動作せずに終わってしまう。 ・@media (min-width)や(max-width)でメディアクエリーを動作させる。 (

          シエル＃

          Day 8-CSS入門　メディアクエリー編

          シエル＃

          Day 7-CSS入門 フレックスボックス編

          ★本日の学習成果まとめ・フレックスボックスは必須の知識。display:flexでフレックスボックスを多用し割と簡単なHPは作成可能。display:flexとdisplay:inline-flexは絶対覚えよう。 ・bodyタグをフレックスボックスにしてやれば、中の要素すべてがフレックスアイテムになり、任意の場所に表示させることができる大変便利なもの。 flex-directionで横方向の始点→終点を変更、justify-contentで主軸のからどのように始めるか、a

          シエル＃

          Day 7-CSS入門 フレックスボックス編

          シエル＃

          Day ６-CSS入門セレクター編

          ★本日の学習成果まとめ・＊は全称セレクターで、すべての要素に動作させることができる。 ・classの値は小文字の英数字で、数字を先頭にしない。また、classは複数設定できる。 ・javascriptで個別のものに動きをつけたいときはid属性を使用して使うことが多い。id属性は一つしかつけれない。 ・[]の中に属性を指定して、属性が被るときは"属性名"まで記載すれば個別に動作させることができる。 ・セレクターリストで同じ動作をさせたいやつを合わせてコードを書くことができる。h

          シエル＃

          Day ６-CSS入門セレクター編

          シエル＃

          Day ５-マークダウン記法

          ★本日の学習成果まとめ・そもそもマークダウン記法とは、各webサイトが設定している記号をつかることによってその文章にどういう意味を与えたいかを表す記法。 例えば見出しであれば#によって見出しに設定される。 ・引用文を紹介するときは＞によって引用分であることを表すことができる。 > 引用文。 長い文章を書いているときにはーーー(半角)を入力すると区切り線が入力される。 こんな感じ。noteでも動作しました。 ・文字を強調表示したいときはアスタリスクで囲むと強調表示される

          シエル＃

          Day ５-マークダウン記法

          シエル＃

          Day 4 - CSS入門 応用スタイリング編

          ★本日の学習成果まとめ・ブロックボックスとインラインボックスがあり、以下のような内容になっている。 🔶ブロックボックス＝h1やpタグ他の要素にあたり、領域いっぱいにボックスが配置されるもので、CSSでボックスでのスタイリングが可能なもの 🔶インラインボックス＝ ①aやimgタグ他の要素にあたり、ブロックボックスの中で配置され、基本的にボックスモデルのプロパティが部分的にしか指示できない。 ②widthとheightが使えないから大きさを大きくしたりできない。 ③上下方向の要素

          シエル＃

          Day 4 - CSS入門 応用スタイリング編

          シエル＃

          Day 3 - CSS入門 基本スタイリング編

          ★本日の学習成果まとめ ▽ボックスへのCSS ・CSSファイルを別ファイルで作った場合はコードの一番初めに @charset "utf-8"; と記載する必要がある。超重要。♦conntens boxがHTMLで入力した内容が反映される場所 ♦border boxがconntens boxの境界 ♦padding　boxはconttens boxとborder box の間の空白のこと ♦marginがborder boxの外側の空白のこと ・widthとheight

          シエル＃

          Day 3 - CSS入門 基本スタイリング編

          シエル＃

          Day 2 - フォームタグの基礎(HTML)

          ★本日の学習内容まとめ ・emmet:通称ｴﾒﾄがとっても便利だということ。というか陰から必死に助けてくれるお助けマン ・ユーザーに入力してほしいエリアは<form>タグを使い、<input>タグでどんな要素を入力してほしいか選択。例:<input text>であれば文字を入力。いろんな要素があるから実践あるのみ。 ・<laber>で入力してほしい項目を指定し、どんな入力方法がいいか<input　type＝””>タグで選別。という流れ。 例:<label>パスワード<inpu

          シエル＃

          Day 2 - フォームタグの基礎(HTML)

          シエル＃

          Day1-学習した内容

          今日学習した内容は以下の内容だ。 ・ドットインストールの以下の項目 HTML入門 基本タグ編 その中で学んだ内容で面白かったところを記載するぜ。 ・HTMLがなぜ必要なのか HTMLがなぜ必要なのかというと、パソコンにこの文字はこのような意味があるんだよ。という意思表示？みたいなものをするためのもの。例えば<h1＞タグであれば「大見出し」なんだよ。とかね。そのHTMLをグーグルがよみとって、検索言語と親和性の高い内容を上位表示しているみたいだね。実際はもっと複雑なんだろう

          シエル＃

          Day1-学習した内容

          シエル＃

          Day 1 - ドットインストールでのスタート

          30歳のお父さんがプログラミング学習を再開しました！今日は初めてドットインストールを活用して勉強を始めました。ドットインストールっていうサイトは、プログラミングの学習に便利なんだって。昔はプロゲートっていうサイトで学習していたけど、途中で挫折しちゃったんだよね。でも今回は違う！挫折しないように頑張るぞ！ 最初の学習内容はHTMLとCSS。HTMLはウェブページの構造を作るための言語で、CSSはスタイルやデザインを追加するための言語だって聞いたよ。ちょっと興味深いし、初心者に

          シエル＃

          Day 1 - ドットインストールでのスタート

          シエル＃