◾︎進捗 ◾︎エラー① 頭のインデント ◾︎エラー② csp_meta_tag ◾︎エラー③ 変数が定義されていません ◾︎エラー④ 高さが0 ◾︎進捗 見た目は全く変わっていないけれども 一区切りついた 昨日まではHTML・CSSで アプリとは全く別で作っていたけれど HTMLをHamlに CSS…

chat-spaceの画面ができた！！！！やっと！！！亀のごとし！！！ でも できたので良しとする！！！ ・久々に触るとHTMLやCSSで忘れている部分が多いなと反省… 定期的に好きなサイトを模写？しながら慣れていこう！ ・親要素のCSSで「display:flex」に定義す…

■今日の進捗 ・header部分の完成！ ■反省 ・作り直す羽目になった部分あり ・調べる作業に時間をかけすぎる ・padding,marginと要素がごっちゃになる ・要素の大きさ（width:、height:）の指示がないのにpaddingの指示があるのが どうしても飲み込めず色々調…

■めちゃくちゃ便利！！！ ■グーグル拡張機能 ColorPick Eyedropper ■色検索 - 原色大辞典 ■めちゃめちゃ勉強になる！！！ ■今日の進捗 ■振り返り・反省 ■めちゃくちゃ便利！！！ ■グーグル拡張機能 ColorPick Eyedropper https://chrome.google.com/webstore…

ついにchat-spaceのビュー画面を作り始めた！！ 〜まずは事前準備から〜 ■そういえばそうだったメモ ■rails g controllerで不要なファイルを作らせないためには？ ■事前準備_大体の流れ ■事前準備_application.cssとapplication.scss ■事前準備_ブラウザのCS…

①コントローラー（posts）の アクション（index）の結果 返す画面（HTML）をHamlで書こう！ index.html.haml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .header .header__logo SNS .contents .contents__message follow me! =link_to "https://www.facebook.com/…

Haml とは Haml（ハムル） とは？ 導入方法は？ RailsアプリにおいてerbからHamlに変換する方法は？ 基本の記述方法 属性の追加 class属性・id属性は省略できる！ divタグは丸々省略できる！ 属性もRubyの中から引っ張る場合 ネスト構造はタブ（スペース）で…

Rubyの練習問題「ズンドコ キ★ヨ★シ問題」を自力で解けた！ 端から見れば 「ただの練習問題で喜ばれても困るわ」 と言われそうだけれども、 自力で仮説を立て調べながら解けたのが 多少なりとも成長として感じられたので 記録しておきます！ 勉強を頑張る駆…

■データ設計とは ■データ設計とは ■データ設計の３要素 ■データ設計の手順 ■主キー ■外部キー ■制限とは ■NOT NULL制限 ■一意性制限 ■主キー制限 ■外部キー制限 ■インデックスとは ■データ設計とは ■データ設計とは ・あらゆる情報をどのデータベースで管理…

■SQLの超概要 ■SQLとは？ ■SQLには主に２つ命令がある ■データベース・テーブルそのものを操作（定義）する ■データベースへの接続 ■データベースをみる ■データベースを作る ■データベースを選択する ■テーブルをみる ■テーブルを作る ■テーブルのカラムを…

〜〜〜〜〜〜〜〜〜〜〜〜〜〜 ■Git init ターミナルに入力するコマンド .git の隠しディレクトリを作成する git（バージョンを管理するシステム）を使えるようになる ■インデックス バージョン管理帳へ入力する前のワンクッションのような存在 変更したファ…

完全にメモ！！ 間違い let list =$("#list"); function appendList(word){ list.append(word) } 正解 let list = $("#list"); function appendList(word) { let item = $('<li class="list">').append(word); list.append(item); } $(function() { //ID名がlistのオブジェク</li>…

■submit ■デフォルトのイベントを消す ■find( ) ■prop() ■attr() ■each() $(function() { $('form').on('submit', function(e) { let output = ''; let checkboxes = $(this).find('input[type="checkbox"]'); checkboxes.each(function(i, checkbox) { chec…

jQuery と JavaScript の比較

■Javascriptでサイト上の画面を変える_大きな流れ ■語句説明 ①DOMオブジェクトをHTMLの中から取得 ②イベントリスナーでイベントと処理を紐づける ②イベントリスナーでイベントと処理を紐づける_処理も色々 ■Javascriptでサイト上の画面を変える_大きな流れ ①…

Javascriptはどこにどう記述するか アラーム・コンソールへの出力 変数の定義 if構文による条件分岐 配列 オブジェクト for構文による繰り返し処理 動詞・アクションの定義 Javascriptはどこにどう記述するか ①WEBサイト上で右クリック→検証→console に記述 …

youtu.be 【検索順位が決まる仕組み】 ①リンク（内部・外部・被リンクを適切につける）②コンテンツの質を上げる③サイト設計（キーワードを重視） 【リンク】・内部リンク →自サイト内の別のページへのリンク・外部リンク →自サイトのページから外部サイトへ…

■正規表現の実践 の練習問題 ■PicTweetでの学び ■JavaScript の概要 ■正規表現の実践 の練習問題 name = "aaaa" name = name.upcase puts name >>AAAA ref.xaio.jp ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ address = "東京都,渋谷区道玄坂,2…

正規表現とは？ →パスワード入力の際に「電話番号はハイフンを抜いてください」「半角英数字で入力してください」などのように制限をかけられるもの。 正規表現の3つのパターンを実践！ ①電話番号のハイフンを抜く グローバルマッチのg （ガッツのGではない…

■リファクタリングとは？ ■リファクタリングのメリット ①制御フロー（if条件分岐、繰り返し処理など） ②式の分割 ③変数 ④メソッドの抽象化 ⑤関心の分離（機能ごとに区切る） ⑥短いコードを書く ■正規表現とは？？ ■正規表現を使う3つのケース ■正規表現を実…