まつ73

webデザインを学んでいます。

まつ73

webデザインを学んでいます。

  • デザインチェック

🔰 phpの基礎2〜基本文法

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

まつ73

    • 🔰 phpの基礎1〜phpとは？

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

      まつ73

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

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

        まつ73

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

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

          まつ73

        🔰 phpの基礎2〜基本文法

        まつ73

        マガジン

        • デザインチェック
          1本

        記事

          【💭イメージで理解】 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

          console.log()ってなんだ？

          1. `console`とは何か 「console」は、パソコンの中でJavaScriptが動いていることを確認したり、プログラムがうまく動いているかを確認するための特別な場所のこと。ウェブブラウザを使って見ることができるよ。 ゲームで例えると、ゲーム画面にメッセージを表示する「デバッグウィンドウ」みたいなものなんだ。 2. ドット「.」で繋ぐルール JavaScriptでは、「.」を使って、何かをする「命令」を順番に繋げていくんだ。例えば、「console.log(

          まつ73

          console.log()ってなんだ？

          まつ73

          flexアイテムの画像の大きさをコントロールする

          状況: flexbox で画像とテキストを並べようとしたら、画像に指定した `width` が有効にならなかった。 原因、対策のまとめ: 原因1: flexbox は子要素 (画像とテキスト) を伸縮させて、親要素の幅に収めようとします。テキストは内容量に応じて柔軟に幅を変え、広がったり縮んだりします。 原因2: 画像には `max-width: 100%` が設定されており、画像にwidthを指定しても、親要素の幅を超えて大きくなれない制限がかかっていました。 原

          まつ73

          flexアイテムの画像の大きさをコントロールする

          まつ73

          position:fixedの注意点

          position:fixedを指定すると、ブロックボックスの「横幅いっぱいの領域をとる」という性質がなくなります。 幅の指定がないとき、初期値はautoとなります。このとき、固定された要素はその内容に応じた幅になります。つまり、コンテンツと同じ幅になります。言い換えると、コンテンツ分しか幅を持たなくなります。 そのため、画面幅いっぱいに広げるためにはwidth:100%の指定が必要となります。

          まつ73

          position:fixedの注意点

          まつ73

          共通スタイルと一部違うパターンのBEMの書き方　モディファイア

          HTML <hgroup class="section-heading section-heading--light"> <h2 class="section-heading__main"></h2> <p class="section-heading__sub"></p></hgroup> メモ BEMの命名規則では、モディファイアはブロックやエレメントの後にハイフン2つ（--）を使ってつなげて書くことができます。この方法は、特定の状態やバリエーションを示すために

          まつ73

          共通スタイルと一部違うパターンのBEMの書き方　モディファイア

          まつ73