motoki eda

プログラミングのアウトプット用の投稿のみ

motoki eda

プログラミングのアウトプット用の投稿のみ

模写修行　無料編を終えてポイント

矢印はCSSで作る ポイント ・疑似要素after,beforを親要素に当てる。 ・親要素にはposition:relateiveをあてる ・疑似要素には複数セレクタで共通の要素、positon:abusorut,top,bottom,rightをあてる 見出しのコンポーネント化 ポイント ・フォントサイズ、カラー、配置（text-aline）に注目してコンポーネント化 例） サイズ .c-title-level3 { font-size: 18px; .c-title-l

motoki eda

    • 模写コーディングを終えてポイントまとめ

      Designの確認 カラーの確認 ・背景色、文字色、アイテムの色の確認 ・カスタムプロパティ化しておく。 :root {--color-bg-light: #eceff4;} コンテンツ幅の確認 ・sp版、pc版のメイン幅の確認 ・container,wrapper,innerの確認 ・レイアウトのカスタムプロパティ化 レスポンシブ化するときに横並びになる要素の確認 ・横並びにする場合はブロック化しておかなければいけないため 疑似要素をつかうものを確認 繰り返し使

      motoki eda

      • wordpress 基礎

        フォルダ、ファイル wp-config.php データベースの情報などを記載するファイル wp-contentフォルダ内のファイル 制作していくブログやサイトの情報を管理 pluginsフォルダ：インストールしたプラグインを入れるフォルダ themesフォルダ：テーマを入れるフォルダ uploadsフォルダ：アップロードした画像や動画などのメディアが入るフォルダ それ以外はコアファイル PHPファイルの拡張子：.php 記述方法 <?php "ここにPHPの処理が入り

        motoki eda

        • Gitに関してのメモ

          Gitとは ファイルの変更履歴を記録するバージョン管理システム リポジトリ 保管したファイルをバージョン管理するところ PC内：ローカルリポジトリ（変更履歴を保存するための隠し領域） 変更履歴を隠し領域に記録する操作→コミット 共同作業の仕組み リモートリポジトリを用意して、各作業メンバーのローカルリポジトリと同期させる。 注意：プッシュ／プルという作業を行わないと同期されない ブランチ 変更履歴の流れを分岐させること うまくいかなかったとき→破棄できる うまく行ったと

          motoki eda

        模写修行　無料編を終えてポイント

        motoki eda

          1/2　不明点の復習

          オブジェクト指向とは いかに効率よく開発を行うかを突き詰めた考えかた、概念 設計：下記の3つを主体に設計する カプセル化：他のプログラムから鑑賞されないプログラム 継承：同じようなプログラムは共通化して使う考え方（共通の部分はまとめてあつかう） ポリフォーリズム：汎用的なかたちにできるようにしましょうという考え方（多様性） メソッド オブジェクトの中にある関数 メソッドのあとに（）がつく console.logはオブジェクト.メソッド consoleというオブ

          motoki eda

          1/2　不明点の復習

          motoki eda

          11/8学習内容（text-shadow,linear-gradient）

          概要 text-shadow　テキストに影をつける box-shadow　要素の周囲の輪郭に影をつける text-shado使い方 例 text-shadow: 3px 3px 2px #f4f4f4; （text-shadow: offset-x offset-y blur-radius color;） オフセット値と影の色（＋ぼかしの値）を指定する。 オフセット値とは基準からの距離の値のこと。 X軸、Y軸で表す。 offset-x:　ーは左　+は右 offset-

          motoki eda

          11/8学習内容（text-shadow,linear-gradient）

          motoki eda

          11/06学習内容（CSS設計）

          CSSの命名規則 後から書き換えたり、他人が見る想定でCSSを書いていく 「良いCSS」の４条件 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 予測しやすい class名のつけかたにルールがある、スタイルの優先度が整理されている 修正する時に、CSSの変更で予想外のことが起こりにくい 修正する時に、どこにどのスタイルが当たっているかの予測がつけられ（探す手間が省ける） 自分で書いているときに、スタイルをどう当てるかを迷わずに書くことができる 再利用

          motoki eda

          11/06学習内容（CSS設計）

          motoki eda

          11/3　学習内容（セレクタの書き方）

          複数指定 書き方 ◯,◯,◯ {〜} 「,」で区切る 効果 複数のタグやクラスに対して同じCSSをまとめて適用させる イメージ ○　and　○　and　○　すべてのセレクタに適用 子孫セレクタ(絞り込み) 書き方 ◯ ◯ {〜} 半角スペース空ける。 イメージ ○　に含まれている　○　にのみ適用 子セレクタ 書き方 ◯ > ◯ {〜} 「>」をいれる 1つ下の階層の子要素にのみ適用される イメージ ○　の　子要素に当たる　○　にのみ適用される。 隣接セレ

          motoki eda

          11/3　学習内容（セレクタの書き方）

          motoki eda

          11/1　学習内容（calc関数）

          calc関数 →CSSで四則演算（足し算・引き算・掛け算・割り算）ができる関数 どんなときに使う？ 要素を均等に配置したいとき 特にレスポンシブで「○個目の要素から折り返したい」というときにflex-wrapと併用すると便利。 計算の優先順位 かっこ内にある数式 掛け算・割り算 足し算・引き算 記述のときの注意点 「+」「-」の前後に半角スペースを入れる スペースを入れないと数値の正負として認識されるため。 足し算・引き算の場合、両方の数字に単位をつける

          motoki eda

          11/1　学習内容（calc関数）

          motoki eda

          10/29　学習内容

          レスポンシブなぜレスポンシブしなければいけないのか？ 様々なデバイスがある中でそのデバイスごとにHTMLを作るのは面倒。 一つのHTMLを変更することでPC用、タブレット用の管理、更新をできるようにする。 head内の記述 <meta name="viewport" content="width=device-width, initial-scale=1" > metaタグとしてviewportを記載する。 ※それぞれの画面幅に合わせて表示する大きさを調整するためのコー

          motoki eda

          10/29　学習内容

          motoki eda

          要素の中央寄せまとめ

          前提 要素を中央に寄せる場合、まず中央寄せの対象となる要素が、以下のどれになるのか確認する ブロック要素 ex 　hタグ、divタグ、pタグ インライン要素 ex 　spanタグ、aタグ インラインブロック要素 display: inline-block;した要素 左右中央に寄せたいパターン 【インライン要素、インラインブロック要素の場合】 1,中央寄せにしたい要素の親要素に「text-align:center」 text-alignは文章の揃え位置を指定す

          motoki eda

          要素の中央寄せまとめ

          motoki eda