まつ73

web制作を学んでいます！

まつ73

web制作を学んでいます！

  • デザインチェック

WordPress 関数まとめ2 （表示や取得・引数の指定方法）

WordPress関数での「表示」と「取得」の違い「表示」とは： ・データをそのまま出力するイメージ。実際にサイトに表示される ・表示するのにecho文は不要 　例） 　・the_title()  記事のタイトルを表示 　・the_date() 記事の日付を表示 「取得」とは： ・データベースからデータを取り出すだけで、サイトには表示しない ・変数にデータを格納して、加工後に表示したりできる ・表示するのにecho文が必要 　例） 　・get_the_title()  

まつ73

    • 🔰phpの基礎4〜コロン構文

      🔰コロン構文とは コロン構文は、PHPのコードを見やすく書くための便利な記法のこと。 if, for, foreach, while文などを書く際、波括弧 {} の代わりにコロン : を使う。 ✏️コロン構文の書き方 開始の波括弧 { をコロン : に置き換える。 終了の波括弧 } を end文（endif;  endfor;  endforeach;  endwhile;）に 置き換える。その直後にセミコロン ; を書く。 中間の波括弧 }（以下でいうelse

      まつ73

      • 🔰 phpの基礎3〜配列・繰り返し処理

        配列の作り方 PHPで配列を作るには、`[]` を使う。値はカンマで区切る。 以下のコードでは、$scores という変数に、4つの数字を持つ配列が格納されているイメージ。 <?php　　$scores = [96, 86, 56, 89]; ?> 配列の使い方 配列の中にある、それぞれの値を「要素」と呼ぶ。 要素を取り出すためには「添字（index）」を使う。 添字は、配列の中の要素の順番を表す番号。0から始まることに注意。 要素を取り出すには、変数名に`[]`

        まつ73

        • WordPress 関数まとめ1

          学んだことを整理して、ポイントや注意点をまとめました！✏️ wp_head(); esc_url(); <a href="<?php echo esc_url(home_url()); ?>">　　// リンク<img src="<?php echo esc_url($image_url); ?>">　// 画像<form action="<?php echo esc_url(admin_url()); ?>">　// フォーム home_url(); 括弧内が空欄

          まつ73

        マガジン

        • デザインチェック
          1本

        記事

          🔰 phpの基礎2〜基本文法

          変数の使い方 PHPで変数を使うには、以下のルールがある。 変数名の先頭に `$` をつける　　例： $score,   $age `=` を使って変数名に値を入れる　　例： $score = 96; 変数を使う時は変数名を書く　　例： echo $score; これは、「$score に入っている値を表示する」という意味 1〜3をまとめると、以下のように書くイメージ。 <p> <?php $score = 96; echo $score; // 9

          まつ73

          🔰 phpの基礎2〜基本文法

          まつ73

          🔰 phpの基礎1〜phpとは？

          　PHPってなに？ PHPは、動きのあるウェブサイト制作に使われるプログラム言語。 フォームのデータ処理や、データベースとのやり取りなど、 ユーザーの操作に応じた動的な処理ができる。 コードは、<?php ?> というタグで囲んで書く。 PCに対して、「ここはPHPのコードを書いてます」と伝えるイメージ。 <?php が開始タグ、 ?> が閉じタグにあたる。タグの間に書いたコードがサーバーで実行される。 ブラウザに出力するには、`echo`という命令を使う。 文字列を

          まつ73

          🔰 phpの基礎1〜phpとは？

          まつ73

          border-box を使うときに注意すること

          box-sizing: border-boxを指定すると 指定した widthやheight の値に、 パディングとボーダーの設定値が含まれるようになる。 これらの設定値が含まれる分だけ、コンテンツ領域は小さくなる。 コンテンツ領域を小さくしない方法として、下記の例のように widthやheight の指定時にパディングとボーダー分の設定値を加える というやり方があります 🙆 .header__inner { padding: 0 30px; wid

          まつ73

          border-box を使うときに注意すること

          まつ73

          【デイトラ DAY16】 nth-childの使い方🔰

          nth-child は、親要素から見て「n番目」の子要素を選ぶもの。 順番ごとにスタイルを分けて指定できる、便利なワザです。 nth-childの書き方 /* 書き方　*/子要素:nth-child(値){　スタイルの内容}/* 例　*/td:nth-child(2) {　width: 100px;} スタイルを当てたい「子要素」に :nth-child と続けて書きます。 「親要素」に書かないように注意しましょう 📣 上の例では、 「親要素<tr>の中にある 2番目

          まつ73

          【デイトラ DAY16】 nth-childの使い方🔰

          まつ73

          【💭イメージで理解】 flex: 1 とは？

          flexは、Flexboxレイアウトで使われるCSSプロパティです。 display:flexを指定する親要素(フレックスコンテナ)ではなく、 子要素(フレックスアイテム)に使います。 flex: 1 と書くことで、以下３つのプロパティをまとめて指定できます。 　flex-grow: 1; 　flex-shrink: 1; 　flex-basis: 0; flex-growとは？ display:flex の空きスペースを、どう埋めるのか設定するプロパティです。 初

          まつ73

          【💭イメージで理解】 flex: 1 とは？

          まつ73

          迷いやすい、CSSセレクタの使い方

          たった ␣ スペースの有無なのに、意味が全然変わってくる💡 しっかり覚えて上手に使おう！🙌 ␣ スペースがある場合: .parent .child { } ✍️ 意味:  "parent"クラスの中にある、子孫要素 "child" にCSSを当てて！ 📝 例:  <div class="parent"><span class="child"></span></div> ␣ スペースがない場合: .parent.child { } ✍️ 意味:  "parent・c

          まつ73

          迷いやすい、CSSセレクタの使い方

          まつ73

          【🔰解説】Sassを使った、メディアクエリの書き方

          はじめに： ページを作るときに、いつも遭遇するメディアクエリの設定。 少しややこしいですよね。 「コピペでいけるけど、いまいち理解が足りてない」そんな課題を感じて、改めて勉強しました。参考になれば嬉しいです🙏 コード全体： @use "sass:map";$breakpoints: ( sp: "screen and (max-width: 767px)", pc: "screen and (min-width: 768px)",);@mixin mq($breakp

          まつ73

          【🔰解説】Sassを使った、メディアクエリの書き方

          まつ73

          【コーディングを速く💫】 VS Code ショートカット一覧

          作業効率UPに役立つ、便利な機能をピックアップしました ✏️ 画面の操作 表示の拡大：　⌘(command) + ⇧(shift) +  =(0の右側) 表示の縮小：　⌘(command) +  -(0の右側) サイドバーの表示/非表示：　⌘(command) + B 行の操作 コードブロックを折りたたむ：　⌘(command) + ⌥(option) +  [ (角括弧) コードブロックを展開する：　　⌘(command) + ⌥(option) +  ] (角括

          まつ73

          【コーディングを速く💫】 VS Code ショートカット一覧

          まつ73

          overflow: scroll の動作

          overflow: scroll の動作 height < コンテンツの高さ：スクロールバーが表示され、機能する height ≥ コンテンツの高さ：スクロールバーは表示されるが、機能しない ビューポート（画面の高さ）との関係 overflow: scroll の動作自体はビューポートの高さに直接影響されない そのため、スマホの横向きのようにビューポートが小さい場合、heightの高さの設定次第では、コンテンツの一部が見切れる可能性がある。 height の設定の

          まつ73

          overflow: scroll の動作

          まつ73

          DOM操作とは

          DOMとは「Document Object Model（ドキュメント オブジェクト モデル）」の略で、ウェブページを操作するための仕組みです。簡単に言うと、JavaScriptを使ってウェブページの内容を変更したり、動きをつけたりするための道具箱みたいなものです。 例えば、学校の教室を想像してみてください： 教室全体がウェブページだとします。 教室の中には、黒板、机、椅子、掲示物などがあります。これらがウェブページの中の要素（文字、画像、ボタンなど）に相当します。 先

          まつ73

          DOM操作とは

          まつ73

          繰り返し処理　forEach

          todoLists.forEach(function (todoList) { console.log(todoList); }); この部分の動きを、ステップバイステップで見ていきます： `todoLists.forEach()` は、配列 `todoLists` の各要素に対して、指定された関数を実行します。 `function (todoList) { ... }` は、各要素に対して実行される関数です。この関数は「コールバック関数」と呼ばれます。 `tod

          まつ73

          繰り返し処理　forEach

          まつ73

          オブジェクトの中の関数を呼び出すときの注意点　（）の意味

          オブジェクトの中の関数を呼び出す際には、括弧をつけるのを忘れないこと。 括弧がある、ない場合の動作の違い： 括弧なし `scores.message`: 関数を実行しません。何も起きません。 括弧あり `scores.message()`: 関数が動きます。"メッセージ"という言葉がコンピューターの画面に表示されます。 例えば、お菓子の箱があるとしましょう。 括弧なしは、箱を見ているだけです。 括弧ありは、箱を開けて中のお菓子を食べることです。 プログラム

          まつ73

          オブジェクトの中の関数を呼び出すときの注意点　（）の意味

          まつ73