2023-07-01から1ヶ月間の記事一覧

投稿内容を保存するために(createアクション)

初めに Progateで学んだ内容で自分が躓いた内容を理解し効率よく学ぶため、かつ備忘録として記事を書いていこうと思います 結論 @post =Post.newという空箱を用意し、@post.saveで投稿内容が保存される 完成物 HTML <div class="main posts-new"> <div class="container"> <h1 class="form-heading">投稿する</h1> <div class="form"> <%= form_tag('/posts/create</div></div></div>…

投稿内容を保存するために(createアクション)

初めに Progateで学んだ内容で自分が躓いた内容を理解し効率よく学ぶため、かつ備忘録として記事を書いていこうと思います 結論 @post =Post.newという空箱を用意し、@post.saveで投稿内容が保存される 完成物 HTML <div class="main posts-new"> <div class="container"> <h1 class="form-heading">投稿する</h1> <div class="form"> <%= form_tag('/posts/create</div></div></div>…

クラスの中で定義したメソッドを呼び出してみる

初めに Progateを学習して躓いた部分をアウトプットして学習効率を上げると共に備忘録がてらに日記を書いていきます。 結論 クラスで定義したメソッドを呼び出すためにはインスタンス.メソッド名 具体例 index.rb class Event attr_accessor :name def show …

ルーティングの順番に氣を付ける

初めに Progateを学習中に躓いたところをアウトプットして学習効率を上げると同時に備忘録としても記事を書いていこうと思います。 結論 idを含むURLのルーティングは後に回す ルーティングの順番によって表示されるものが変わってくる。 routes.rb Rails.ap…

クラスの中で定義したメソッドを呼び出してみる

初めに Progateを学習して躓いた部分をアウトプットして学習効率を上げると共に備忘録がてらに日記を書いていきます。 結論 クラスで定義したメソッドを呼び出すためにはインスタンス.メソッド名 具体例 index.rb class Event attr_accessor :name def show …

クラスとインスタンスの生成までの流れを確認

初めに Progateを学習して自分が躓いたところのアウトプットを行うことで学習効率を上げるかつ備忘録がてらに書きます 結論 クラスからインスタンスの生成までの流れは抽象的なものから具体的なものにしていくこと クラスは設計図、インスタンスは具体的なモ…

クラスとインスタンスの生成までの流れを確認

初めに Progateを学習して自分が躓いたところのアウトプットを行うことで学習効率を上げるかつ備忘録がてらに書きます 結論 クラスからインスタンスの生成までの流れは抽象的なものから具体的なものにしていくこと クラスは設計図、インスタンスは具体的なモ…

特殊な変数self

初めに Progateの学習での学習効率を上げるために、躓いたところをアウトプットすることで備忘録を作るがてらに学習効率を上げることを目的として書きます selfとは self.変数名とすることでインスタンス変数として扱える インスタンスメソッドでは変数”self…

立体的なボタンを作るための方法

初めに Progateを学習中に躓いたところを中心に復習がてらにアウトプットしていきます! 目標物 完成前ビュー 完成ビュー 結論 border-boxを使いこなすことでボタンの下に影を作り出す。 完成前のコード HTML <span class="btn message">さっそく開発する</span> CSS .message { padding: 15px…

立体的なボタンを作るための方法

初めに Progateを学習中に躓いたところを中心に復習がてらにアウトプットしていきます! 目標物 完成前ビュー 完成ビュー 結論 border-boxを使いこなすことでボタンの下に影を作り出す。 完成前のコード HTML <span class="btn message">さっそく開発する</span> CSS .message { padding: 15px…

position:absolute;で要素どうしを重ね合わせる

*初めに Progagteで躓いたところを中心にアウトプットがてらに記事にしてみました。 要素どうしを重ね合わせるためにposition:absolute;を使用する。 HTML では要素どうしが重なり合うということはありません。 画像と文字を重ねてみたり、画像と画像を重ね…

position:absolute;で要素どうしを重ね合わせる

*初めに Progagteで躓いたところを中心にアウトプットがてらに記事にしてみました。 要素どうしを重ね合わせるためにposition:absolute;を使用する。 HTML では要素どうしが重なり合うということはありません。 画像と文字を重ねてみたり、画像と画像を重ね…

インライン要素とブロック要素の大きさの違いでpadding、marginの位置がずれる

初めに Progeteで学習中に躓いたところをアウトプットしていきます。 結論 インライン要素とブロック要素は大きさが微妙に違ってくる。 インライン要素で空白を作った場合と、ブロック要素で空白を作った場合では位置がずれる インライン要素とブロック要素…

インライン要素とブロック要素の大きさの違いでpadding、marginの位置がずれる

初めに Progeteで学習中に躓いたところをアウトプットしていきます。 結論 インライン要素とブロック要素は大きさが微妙に違ってくる。 インライン要素で空白を作った場合と、ブロック要素で空白を作った場合では位置がずれる インライン要素とブロック要素…

子要素にmarginを設定しても動かない件について

初めに Progateを学習して自分が躓いたとこを備忘録そして自分の理解向上のためにアウトプットします。 marginのtopとbottomが効いていない。 今回はプレビューの画像にもあるようにProgateとその他の会社概要3つに対して上下左右に40pxの空白を生じさせる…

子要素にmarginを設定しても動かない件について

初めに Progateを学習して自分が躓いたとこを備忘録そして自分の理解向上のためにアウトプットします。 marginのtopとbottomが効いていない。 今回はプレビューの画像にもあるようにProgateとその他の会社概要3つに対して上下左右に40pxの空白を生じさせる…

floatの使い方

初めに Progateの初級編を一通り終えて、道場編にトライしている時、躓いた部分を自分なりに解説をし、備忘録として残すためこの記事を書きます。 floatとは何か? 縦に並んでいる要素を横並びするプロパティ 具体例 HTML <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッス</li></ul></div>…

インライン要素、ブロック要素、インラインブロック要素の説明

初めに text-align:center、margin:autoを使用する際に非常に重要になってくるので、備忘録がてらに書きます! インライン要素について 行の中の一部のまとまりのことを示します。 テキスト文しか横の幅がないため、左右にはスペースが存在する marginで上下…

margin:0 auto;とtext-align:center;の使い分け

初めに margin:0 auto;とtext-align:center;の備忘録として書きます。 自分なりに調べてわかりやすい解説を参考にしながらアプトプットしていきます。 結論 中央寄せしたい要素がブロック要素か、インライン要素かによって変わります。 中央寄せしたい要素が…

margin:0 auto;とtext-aligin:center;の使い分け

初めに margin:0 auto;とtext-aligin:center;の備忘録として書きます。 自分なりに調べてわかりやすい解説を参考にしながらアプトプットしていきます。 結論 中央寄せしたい要素がブロック要素か、インライン要素かによって変わります。 中央寄せしたい要素…

marginとpaddingとの違いについて

初めに! ・ProgateのHTML&CSSの初級レッスンを終えて躓いたところを備忘録として書いていきます。 marginとpaddingの違いについて ・margin borderの外側の空白 ・padding borderの外側の空白 こんなイメージを持っていただければいいと思います。 理解す…

箇条書き要素のli要素のリストマークを消す方法について

・初めに ・今回は箇条書きで使用されるリストマークを消すために使用される ”list-style:none;”について自分がうまく出来なかったことと、 どうすればうまくリストマークを消すことができるか書いていきます。 ・目標物 リストマークを消して右のような状態…