box-sizingはborder-boxにセットするとデザインの設計はしやすいだと思います。 例えば下記の<div>要素で border-box <style> .border-box { background-color: yellow; width: 200px; height: 200px; border: solid 20px blue; box-sizing: border-box; } </style> border, content, padding 全部含めて、ボックスの幅は思った通り200pxになります。 同じ<div>要素でcontent-boxにすると、 実際のボックスの幅は200px以上になります。 なぜなら、paddingとborderのサイズは含まれないです。 content-box <style> .content-box { background-color: yellow; width: 200px; height: 200px; border: solid 20px blue; box-sizing: content-box; } </style> borderとpaddingのサイズが分からないと、 実際のボックスの幅も分からなくなってきます。 結論 私はデザインする時には頭の中でボックスとして計算したりするので、 paddingとborderはサイズに含まれないと、思ったよりサイズが大きくて、困ります。 残念ながらdefault値はcontent-sizeですので、いつも変更します

webとは 英語ではクモの巣という意味です。 正式名称はWorld Wide Webです。 これは世界規模のクモの巣という意味で その名の通り世界規模でクモの巣のように張りめぐらせれてる状態（仕組み）のことです。 概念的には、 インターネットを使ってwebページをつなぎ合わせた仕組みのことをいいます。 ここで大切なのはwebというのは仕組みのことだとまず理解しておくことだと思います。 では、何が張り巡らされているのでしょうか？ 答えはwebページです。 webページとは webページとは画像や文章などの情報が表示されている文章の最小単位のことです。 そしてwebページが集まってできたものがwebサイトとなります。 webサイトとはwebベージを置く敷地（site）のことです。 イメージとしては家（webサイト）の中にたくさんの家具（webページ）が置いてあるイメージです。 webページを繋ぐもの またwebページとwebページをつなぐ役割をしているのがハイパーリンクです。これも英語の語源（hyper link）である、超越したリンクという意味の通りリンクという通路によって自分の領域を超えるというイメージです。そしてハイパーリンクが含まれている文章のことをハイパーテキスト（超越した文章）と言います。 ハイパテキストが線だとしたら、ハイパーリンクはその中の導線のようなイメージです。 インターネット しかしハイパーリンクでwebページ同士を繋いでもwebページからwebページへは行き来することはできません。 ハイパーリンクで繋いだ線を行き来できるようにしたのがインターネットです。 ※インフラ系のエンジニアの方はインターネットをISP（インターネットプロバイダー）の集合体と考えていることが多いです。 ＋α webページはHTMLやCSS、JavaScriptなどの言語で構成されています。 これは家具でいうところの木材や鉄などのイメージです。 まとめ webページはこのようにしてさまざまな要素が組み合わさってできた仕組みなのです。

webとは 英語ではクモの巣という意味です。 正式名称はWorld Wide Webです。 これは世界規模のクモの巣という意味で その名の通り世界規模でクモの巣のように張りめぐらせれてる状態（仕組み）のことです。 概念的には、 インターネットを使ってwebページをつなぎ合わせた仕組みのことをいいます。 ここで大切なのはwebというのは仕組みのことだとまず理解しておくことだと思います。 では、何が張り巡らされているのでしょうか？ 答えはwebページです。 webページとは webページとは画像や文章などの情報が表示されている文章の最小単位のことです。 そしてwebページが集まってできたものがwebサイトとなります。 webサイトとはwebベージを置く敷地（site）のことです。 イメージとしては家（webサイト）の中にたくさんの家具（webページ）が置いてあるイメージです。 webページを繋ぐもの またwebページとwebページをつなぐ役割をしているのがハイパーリンクです。これも英語の語源（hyper link）である、超越したリンクという意味の通りリンクという通路によって自分の領域を超えるというイメージです。そしてハイパーリンクが含まれている文章のことをハイパーテキスト（超越した文章）と言います。 ハイパテキストが線だとしたら、ハイパーリンクはその中の導線のようなイメージです。 インターネット しかしハイパーリンクでwebページ同士を繋いでもwebページからwebページへは行き来することはできません。 ハイパーリンクで繋いだ線を行き来できるようにしたのがインターネットです。 ※インフラ系のエンジニアの方はインターネットをISP（インターネットプロバイダー）の集合体と考えていることが多いです。 ＋α webページはHTMLやCSS、JavaScriptなどの言語で構成されています。 これは家具でいうところの木材や鉄などのイメージです。 まとめ webページはこのようにしてさまざまな要素が組み合わさってできた仕組みなのです。

img画像の縦横比を維持したままトリミングする exampl.html <div> <img src="*******" class="img"> </div> example.module.scss div { width: 100px; height: 100px; img { width: 100%; height: 100%; object-fit: cover; object-position: 0% -10%; //数値は例えです } } object-fit: cover object-position: 横の位置 縦の位置 // この２つを設定することで、画像の縦横比を維持したまま画像をトリミングできます。 こちらの記事が参考になりました。

この記事は？ はじめまして！恵比寿でエンジニアをやってる Zak です。 最近よく Tailwind CSS を耳にするようになりました！ どうやら CSS を書く量が減ってかなり楽になるのだとか ? 個人的に CSS を書くのはやりたくないことランキング第3位に入るくらい嫌いなので興味本位で使ってみました！ 簡単にセットアップできたので今回は Vue3系で Tailwind CSS を利用するまでの流れを解説します? 基本コピペでやれば OK という感じで進めていこうと思います。 それではいきましょう? 前提条件 ? 既に Vue プロジェクトがあるとすぐに作業に入れます。 まだプロジェクトがない方は Vue3の環境を30分以内にさくっと構築したい✨ こちらからどうぞ！ 実践 ? Step1. Tailwind CSS インストール プロジェクトルート # これは自分の環境の場合なので各自環境で適切なコマンドを実行してコンテナに入ります % docker compose exec app bash yarn で Tailwind CSS をインストールをするのですが現在の Tailwind CSS 最新バージョンに cli 側が対応できていないのでバージョンを指定してインストールします。 Dockerコンテナ内 # 最新バージョンのインストールコマンド % yarn add tailwindcss@latest postcss@latest autoprefixer@latest # バージョン指定のインストールコマンド % yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Step2. Config ファイルの作成 以下コマンドを実行して tailwind.config.js postcss.config.js ファイルを生成します。 Dockerコンテナ内 % npx tailwindcss init -p postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } tailwind.config.js module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // ここだけ本番環境で不要スタイルが削除される設定にしておきます（おそらく任意） darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } Step3. グローバル CSS に Tailwind を含める src/index.css /* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; Step4. main ファイルで import する main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import './index.css' // 追記 createApp(App).use(router).mount('#app') ここまでで設定完了です✨ 早速使ってみましょう！ Step5. template で書いてみる とりあえず動いてるのを確認したいので公式の PlayGround の内容コピーします。 views/Sample.vue <template> <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12" > <div class="relative py-3 sm:max-w-xl sm:mx-auto"> <div class=" absolute inset-0 bg-gradient-to-r from-cyan-400 to-sky-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl " ></div> <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20" > <div class="max-w-md mx-auto"> <div> <img src="/img/logo.svg" class="h-7 sm:h-8" /> </div> <div class="divide-y divide-gray-200"> <div class=" py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 " > <p> An advanced online playground for Tailwind CSS, including support for things like: </p> <ul class="list-disc space-y-2"> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </span> <p class="ml-2"> Customizing your <code class="text-sm font-bold text-gray-900" >tailwind.config.js</code > file </p> </li> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </span> <p class="ml-2"> Extracting classes with <code class="text-sm font-bold text-gray-900">@apply</code> </p> </li> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </span> <p class="ml-2">Code completion with instant preview</p> </li> </ul> <p> Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online. </p> </div> <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7" > <p>Want to dig deeper into Tailwind?</p> <p> <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700" > Read the docs &rarr; </a> </p> </div> </div> </div> </div> </div> </div> </template> おー！動いてる✨ もっと詳しく知りたい方はチートシートがあるみたいなのでこちらから?‍♂️ Tailwind Cheat Sheet 参考記事 Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS

悪徳ひきこもり支援業者一覧アプリケーションを開発しました 一覧表示部分 <!-- 悪徳ひきこもり業者一覧作成システム --> <!-- 新規作成 2021/07/22--> <!-- 作成者 乃木坂好きのITエンジニア--> <!DOCTYPE html> <html lang="ja"> <!-- ヘッダー部分--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="ichiran.css"> <title>悪徳ひきこもり業者一覧作成</title> </head> <!-- ボディー部分--> <body> <h1>悪徳ひきこもり業者一覧</h1> <h2>結果リスト</h2> <?php $pdo = new PDO("mysql:host=127.0.0.1;dbname=jissyu;charset=utf8", "root", ""); // データベースからデータを取得する try{ $sql = "SELECT id,company,address,hiyou FROM hikikomori;"; $stmt = $pdo->prepare($sql); $stmt -> execute(); } catch(PDOException $e){ echo "例外処理が発生しました"; echo $e->getMessage(); } ?> <table> <tr> <th>id</th> <th>会社名</th> <th>住所</th> <th>月額費用</th> </tr> <?php // 取得したデータを表示する while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?> <tr> <td><?= $row["id"] ?></td> <td><?= $row["company"] ?></td> <td><?= $row["address"] ?></td> <td><?= $row["hiyou"] ?></td> </tr> <?php } ?> </table> <a href="hikikomori.php" id="return">入力画面に戻る</a> </body> <footer> <p class="hattori"> by 乃木坂好きのITエンジニア</p> </footer> </html> 入力フォーム <!-- 引きこもり悪徳業者一覧管理システム --> <!-- 新規作成 2021/07/22--> <!-- 作成者 乃木坂好きのITエンジニア--> <!DOCTYPE html> <html lang="ja"> <!-- ヘッダー部分--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="hikikomori.css"--> <title>ひきこもり支援悪徳業者一覧管理システム</title> <script type="text/javascript"> function check(){ //変数の定義 const company = document.getElementById('company'); const submit = document.getElementById('submit'); if(company.value.replace(/\s+/, '').length == 0 ){ alert('運営会社名が入力されていません。'); } else { if(window.confirm('送信してよろしいですか？')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } } // --> </script> </head> <!-- ボディー部分--> <body> <?php // データベースに接続する $pdo = new PDO("mysql:host=127.0.0.1;dbname=jissyu;charset=utf8", "root", ""); // print_r($_POST); // 受け取ったデータのレコードを削除する if (isset($_POST["delete_id"])) { $delete_id = $_POST["delete_id"]; $sql = "DELETE FROM hikikomori WHERE id = :delete_id;"; $stmt = $pdo->prepare($sql); $stmt -> bindValue(":delete_id", $delete_id, PDO::PARAM_INT); $stmt->execute(); } // 受け取ったデータを書き込む if ((isset($_POST["company"])) && (isset($_POST["address"])) && (isset($_POST["hiyou"]))) { try{ $company = $_POST["company"]; $address = $_POST["address"]; $hiyou = $_POST["hiyou"]; $regist = $pdo->prepare("INSERT INTO hikikomori(company,address,hiyou) VALUES(:company,:address,:hiyou)"); $regist ->bindValue(":company", $company); $regist ->bindValue(":address", $address); $regist ->bindValue(":hiyou", $hiyou); $regist->execute(); } catch(PDOException $e) { echo "例外処理が発生しました"; echo $e->getMessage(); } } ?> <h1>引きこもり悪徳業者一覧アプリケーション</h1> <h2>引きこもり悪徳業者一覧入力フォーム</h2> <form id = "entry" action="hikikomori.php" method="post" role="form" onSubmit= "return check()"> <div class="form-group"> <dd>ひきこもり悪徳業者名を入力してください <dt> <span class="must"> * </span></dt> <dd> <label>ひきこもり悪徳業者名</label></dd> <dd> <input type="text" name="company" id="company"></dd> </div> <div class="form-group"> <dd>住所を入力してください <dd> <label>住所</label></dd> <dd> <input type="text" name="address" id="address"></dd> </div> <div class="form-group"> <dd>月額の費用を入力してください <dd> <label>月額の費用</label></dd> <dd> <input type="text" name="hiyou"></dd> </div> <p></p> <button type="submit" id="submit" onMouseOver="changeColor()" onMouseOut="revertColor()">データ登録</button> <script> function changeColor(){ document.getElementById('submit').style.backgroundColor = 'yellow'; } function revertColor(){ document.getElementById('submit').style.backgroundColor = null; } </script> </form> <a href="hikikomori_ichiran.php" class="ichi">ひきこもり支援悪徳業者一覧</a> <h2>一覧リスト</h2> <?php // データベースからデータを取得する $sql = "SELECT id,company,address,hiyou FROM hikikomori ORDER BY id DESC;"; $stmt = $pdo->prepare($sql); $stmt -> execute(); ?> <table> <tr> <th>id</th> <th>ひきこもり支援悪徳業者名</th> <th>住所</th> <th>月額費用</th> </tr> <?php // 取得したデータを表示する while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?> <tr> <td><?= $row["id"] ?></td> <td><?= $row["company"] ?></td> <td><?= $row["address"] ?></td> <td><?= $row["hiyou"] ?></td> <td> <form action="hikikomori.php" method="post"> <input type="hidden" name="delete_id" value=<?= $row["id"] ?>> <button class="delete" type="submit" onclick="deleted()">削除</button> </form> </td> </tr> <?php } ?> <script language="javascript" type="text/javascript"> function deleted(){ if(window.confirm('データを削除してよいですか？')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } </script> </table> <a href="../index.html" class="menu">メニュー画面に戻る</a> <footer> <p class="hattori"> by 乃木坂好きのITエンジニア</p> </footer> </body> </html>

【作成の過程】 次に取り組んだのは、昔ゲームセンターで遊んだ「じゃんけんポンっ」のゲーム作成。 目指すイメージは決まっているが、そこまでどういうプロセスをたどるかは、完全にオリジナル。 とりあえず、基本的なアプリ設計過程と同じように、要件定義→設計→実装→テストというウォーターフォール型の行程をたどってみた。 要件定義は、ただじゃんけんで勝敗を決めるゲームを作るというごくごく単純なものなので難しくない。 設計では、機能設計で実装したい機能を列挙して、データベース設計、画面設計とアプリのイメージを細分化・具体化していった。 そして、実装を始めると、この画面があった方がいいとか課題が出てきて、当初の設計の甘さを感じた（笑） 最終的にテストをして、最低限の形にはなったかなという感じ。 まだまだ、デザインがチープだったり、実装したい機能（ルーレット、対戦モード、コイン複数枚がけ…）はあるが、今後の課題ということで、 まずは、オリジナルのアプリを作り、それを形にできたことのうれしさを感じた。 【アプリの概要】 小さい頃にゲームセンターで、わずかなコインを握りしめて白熱した「じゃんけんゲーム」をプログラミングで再現した。 勝った時は歓喜し、負けた時は絶望に打ちひしがれて、帰路についた。なぜ、あの頃はあんなに夢中になれたんだろう。皆さんが童心に帰ることができればいいですね。 【主な機能】 ・ユーザー登録機能 ・ユーザーログイン機能 ・画像ファイルアップロード機能 ・ゲーム機能 ・ランキング表示機能 【画面一覧】 ・ユーザー登録画面 ・ユーザー登録確認画面 ・ユーザー登録完了画面 ・ログイン画面 ・ゲーム画面 ・ゲーム結果画面 ・コイン獲得画面 ・ランキング画面 【開発環境】 ・CSSフレームワーク：Bootstrap ・言語：PHP ・DB:MySQL 【苦労した点】 ・ゲストモードの実装（どのような方法をとればいいか試行錯誤し、結果的にguestをデータベースに登録し、ゲストボタンを押した際、guestのデータを取得しアプリを使えるようにした。※上書きは許容しない） ・コイン枚数の画面間引継ぎ方法（セッションの受け渡しをできるだけシンプルなコードで表現したかったが…） 【今後搭載したい機能】 ・対戦モード（人間二人で使用） ・コンピューターの出し手や、獲得するコインを、ルーレットで決定させる。 ・２枚の３枚betや、勝ったコインを元手にチャレンジができ、ハイリスクハイリターンが狙える。 【アプリURL】 ・じゃんけんゲーム ・ソースコード

【作成の過程】 今まで学習した基礎的な知識を基に、オリジナルアプリの作成を始めた。 まずは、PHPの章の学習で使ったUdemy教材をベースにデザインやゲストの実装等アレンジし、「メッセージ投稿アプリ」を作成した。 今までは、動画で提示される課題の通りのものを作っていたが、 少しでもオリジナル要素を加えようとすると、正解がないわけで、どうしたらいいのかいろいろと考え込んでしまったが、 ひとまず形にし、デモデータを搭載した。 【アプリの概要】 複数のユーザーがメッセージを投稿・共有できるアプリ 【主な機能】 ・ユーザー登録機能 ・ユーザーログイン機能 ・画像ファイルアップロード機能 ・メッセージ投稿機能 ・メッセージ返信機能 ・メッセージ一覧表示機能 ・メッセージ詳細表示機能 ・ページネーション機能 【画面一覧】 ・ユーザー登録画面 ・ユーザー登録確認画面 ・ユーザー登録完了画面 ・ログイン画面 ・メッセージ投稿・一覧表示画面 ・メッセージ詳細画面 【開発環境】 ・CSSフレームワーク：Bootstrap ・言語：PHP ・DB:MySQL 【今後搭載したい機能】 ・メッセージ修正機能 ・いいね機能 【アプリURL】 ・メッセージ投稿アプリ ・ソースコード

目次 1.css() 2.fadeOut() 3.prepend() 4.append() 5.before() 6.after() 7.addClass() 8.animate() 9.find() 10.index() 11.hover() 12.data() 13.eq() 1.css() jQueryからスタイルシートを設定・追加・取得・変更などが出来る便利なメソッド $("p").css("background-color","pink"); ↑例だと、Pタグに対して背景色ピンクを指定することができる。 $("p").css({"background-color":"pink","font-size":"10px"}); ↑複数のプロパティを指定する場合は{}で囲み【"セレクタ":"値"】のように指定する。 2.fadeOut() 要素を少しづつ非表示にするメソッド $("h1").fadeOut(); ↑HTML要素に対して指定すると徐々に非表示にすることができる。 秒数を指定したい場合は、引数に時間を入力する $("h1").fadeOut(2000); ↑時間は『ミリ秒』で指定する必要があるため、上記の例だと２秒かけて非表示にするアニメーションが作れる。 3.prepend() 指定した要素の先頭にテキストやHTML要素を追加するメソッド <p>こんにちは</p> ↑この要素にテキストを追記したい場合 $("p").prepend("山田さん"); ↑引数に追加したいテキストを指定すると <p>山田さんこんにちは</p> ↑実行結果。テキストを追記できる。 4.append() 指定した要素の最後にテキストやHTML要素を追加するメソッド <p>こんにちは</p> ↑この要素にテキストを追記したい場合 $("p").append("山田さん"); ↑引数に追加したいテキストを指定すると <p>こんにちは山田さん</p> ↑実行結果。テキストを追記できる。 5.before() 指定要素の直前にHTMLを挿入できる」メソッド <div> <p>こんにちは</p> </div> ↑こちらにHTMLを挿入してみる。 $("div p").before("<h1>初めまして</h1>"); ↑引数にh1タグを指定する。 <div> <h1>初めまして</h1> <p>こんにちは</p> </div> ↑実行結果。指定したpタグの前にh1タグが挿入される。 6.after() 指定要素の直後にHTMLを挿入できる」メソッド <div> <p>こんにちは</p> </div> ↑こちらにHTMLを挿入してみる。 $("div p").after("<h1>初めまして</h1>"); ↑引数にh1タグを指定する。 <div> <p>こんにちは</p> <h1>初めまして</h1> </div> ↑実行結果。指定したpタグの次にh1タグが挿入される。 7.addClass() 任意の要素にclass属性を追加することができるメソッド .colorPink { color: pink; } ↑例として文字色をピンクにするcolorPinkクラスを作成。 <div> <p>こんにちは</p> <h1>初めまして</h1> </div> ↑このHTML要素にクラスを追加してみる。 $("h1,p").addClass("colorPink"); ↑h1とpタグに『colorPink』を追加。 <div> <p　class="colorPink">こんにちは</p> <h1 class="colorPink">初めまして</h1> </div> ↑実行結果。h1とpタグにクラスが追加される。 8.animate() cssのプロパティを一定時間かけて変更するメソッドである。 <div> <p>こんにちは</p> <h1>初めまして</h1> </div> ↑このHTML要素にanimate()を使ってみる。 $("p").animate({"font-size": "10px",color: blue},2000); ↑第一引数にフォントサイズが10pxで文字色が青、第二引数に秒数を指定。（ミリ秒指定）。 pタグが２秒かけて、フォントサイズが10pxで文字色が青に変化するアニメーションが作成される。 9.find() 対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッド <ul> <li>こんにちは</li> <li>初めまして</li> <li>こんばんわ</li> </ul> ↑このHTML要素にfind()を使ってみる。 var test = $("ul").find("li"); console.log( test[0] ); ↑ulタグに対して、find("li")とすることで、ulの階層下のliを取得できる。 上記では取得した値を変数に挿入している。 コンソールで見てみると <li>こんにちは</li> ↑liを取得できている。 10.index() 指定したセレクタの順番を取得するメソッド <ul> <li>こんにちは</li> <li>初めまして</li> <li>こんばんわ</li> </ul> ↑このHTML要素にindex()を使ってみる。 $("#ul").find("li").click(function(){ var number = $(this).index(); console.log(number); }); ↑ul内のliをクリックしたら、indexで順番を取得し、numberに格納している。 最初のliをクリックすると 0 ↑実行結果。　 11.hover() マウスが要素にホバーした時に、アクションを加えることができるメソッド。 <p>こんにちは</p> <h1>初めまして</h1> ↑このHTML要素にhover()を使ってみる。 $("p").hover(function(){ //マウスオーバー時の処理 $(this).css("color",red); },function(){ //マウスアウト時の処理 $(this).css("color",blue); }); ↑引数は関数を指定し、その中に第一引数にマウスオーバー時、第二引数にアウト時の処理を指定。 pタグにカーソルを合わすと文字が赤になり、離すと文字が青になるアクションを加えることができる。 12.data() HTML要素内に付与されたdata属性に対して、取得・設定・変更などが簡単に行えるメソッド <p data-name="kazuo" data-age="25" data-tel="080-1234-5678">私はカズオです</p> ↑任意で設定したdata属性を取得してみる。 const result = $('p').data(); console.log( result ); ↑pタグに対してdata()を実行し変数に格納し、コンソールに結果を出してみる。 {age: 25, name: "kazuo", tel: "080-1234-5678"} ↑実行結果。data属性を取得できる const result = $('p').data("name"); console.log( result ); ↑引数にdata属性名を指定すれば個別に取得することも可能。 kazuo ↑実行結果。 次にdata属性を設定してみる。 $('p').data("mail","kazuo@XXX.com"); const result = $('p').data("mail"); console.log( result ); 引数に(データ属性名,値)とすることで新しくdata-mail属性名のkazuo@XXX.comが値のdata属性を設定できる。 kazuo@XXX.com ↑実行結果。 次にdata属性を変更してみる。 $('p').data('drink', 'water'); console.log( $('p').data('drink') ); $('p').data('drink', 'soda'); console.log( $('p').data('drink') ); ↑引数に変更したいデータ属性名とその値を指定する。 data-drink属性の値はwaterからdata-drink属性の値はsodaに変更している。 water soda ↑実行結果。 13.eq() 複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できるメソッド <ul> <li>こんにちは</li> <li>初めまして</li> <li>こんばんわ</li> </ul> ↑このHTML要素から特定の要素を取得してみる var test = $("li").eq(1).text(); console.rog(test); ↑引数に取得したい要素のインデックス番号を指定。 初めまして ↑実行結果。liのインデックス番号１の『初めまして』が取得できる。 var test = $("li").eq(-1).text(); console.rog(test); ↑負の値を指定することもできる。-1は最後、-2は最後から数えて２番目の要素を取得できる。 初めまして ↑実行結果。

【グリッドシステムを使うことのメリット】 グリッドシステムを使うメリットとして異なるデバイス(PCやモバイル端末など)でも画面崩れしないレイアウトを作成することが出来ます。 シンプルな構造なので使いまわしが可能で、メンテナンスが容易です。 【Bootstrapと異なる点：rowの代わりにColumnsクラスを使う】 rowクラスの代わりにColumnsクラスを使って作成します。 【グリッドシステムの構成と手順】 ①外枠に『箱』であるcontainerクラスをあててコンテンツを入れる区画を作る。 ②箱ができたら、『行』であるcolumnsクラスをあててヨコを分割する。 ③行ができたら、『列』であるcolumnクラスをあててタテに分割する。 【手順】 ①containerクラスを使う。 ②columnsクラスを使う。 ③column is-〇〇　※〇〇は数字が入る sample.html <!DOCTYPE html> <head> <title>グリッドシステムを使ったフォーム画面</title> <!--fontawesomeをCDN経由で取得する。--> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <!--bulmaをCDN経由で取得する。--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <div class="columns"> <!--画面を2分割(is-6プロパティを使う)して、名前（姓）エリアを作る。--> <div class="column is-6"> <!--fieldプロパティでラベルと入力欄をグループ化する--> <div class="field"> <!--名前（姓）ラベルエリア--> <div class="nameSeiLabelArea"> <label class="label">名前（姓）</label> </div> <!--名前（姓）入力エリア--> <div class="control nameSeiInputArea has-icons-left has-icons-right"> <!--inputタグ属性と枠線の配色を設定する(例：input is-success)--> <input class="input nameSeiInput is-success" type="text" placeholder="姓" /> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> <span class="icon is-small is-right"> <i class="fas fa-check"></i> </span> </div> </div> </div> <!--画面を2分割(is-6プロパティを使う)して、名前（名）エリアをつくる。--> <div class="column is-6"> <!--fieldプロパティでラベルと入力欄をグループ化する--> <div class="field"> <!--名前（名）ラベルエリア--> <div class="nameMeiArea"> <label class="label">名前（名）</label> </div> <!--名前（名）入力エリア--> <div class="control nameMeiInputArea has-icons-left has-icons-right"> <!--inputタグ属性と枠線の配色を設定する(例：input is-success)--> <input class="input nameMeiInput is-success" type="text" placeholder="名" /> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> <span class="icon is-small is-right"> <i class="fas fa-check"></i> </span> </div> </div> </div> </div> <!--住所、電話番号、E-mailを並列に表示する--> <div class="columns"> <!--画面を3分割(is-4プロパティを使う)する。--> <!--【住所】：fieldプロパティでラベルと入力欄をグループ化する。--> <div class="column is-4"> <div class="field"> <div class="addressLabelArea"> <label class="label">住所</label> </div> <div class="control addressInputArea"> <!--inputタグ属性と枠線の配色を設定する(例：input is-success)--> <input class="input addressInput is-success" type="text" placeholder="住所"/> </div> </div> </div> <!--画面を3分割(is-4プロパティを使う)する。--> <!--【電話番号】：fieldプロパティでラベルと入力欄をグループ化する。--> <div class="column is-4"> <div class="field"> <div class="telLabelArea"> <label class="label">電話番号</label> </div> <div class="control telArea"> <!--inputタグ属性と枠線の配色を設定する(例：input is-success)--> <input class="input telInput is-success" type="text" placeholder="0120-123-4567" /> </div> </div> </div> <!--画面を3分割(is-4プロパティを使う)する。--> <!--【E-mail】：fieldプロパティでラベルと入力欄をグループ化する。--> <div class="column is-4"> <div class="field"> <div class="emailLabelArea"> <label class="label">E-mail</label> </div> <div class="control emailInputArea"> <!--inputタグ属性と枠線の配色を設定する(例：input is-success)--> <input class="input emailInput is-success" type="email" placeholder="emailTaro@emailtaro.com" /> </div> </div> </div> </div> <!--ドロップダウンリスト、チェックボックス、ラジオボタンを並列に表示する--> <div class="columns"> <!--画面を3分割(is-4プロパティを使う)する。--> <div class="column is-4"> <div class="field"> <div class="selectOptionArea"> <label class="label">選択オプション</label> </div> <div class="control selectBoxArea"> <div class="select"> <select> <option>選択１</option> <option>選択２</option> </select> </div> </div> </div> </div> <!--画面を3分割(is-4プロパティを使う)する。--> <div class="column is-4"> <div class="field"> <div class="checkboxArea"> <label class="label">チェックボックス</label> </div> <div class="control"> <label class="checkbox"> <input type="checkbox" /> チェックボックス </label> </div> </div> </div> <!--画面を3分割(is-4プロパティを使う)する。--> <div class="column is-4"> <div class="field"> <div class="radioArea1"> <label class="radio"> <input type="radio" name="selectradio" /> 選択A </label> </div> <div class="radioArea1"> <label class="radio"> <input type="radio" name="selectradio" /> 選択B </label> </div> </div> </div> </div> <!--「送信する」ボタン、「キャンセルする」ボタンを並列表示する。--> <div class="columns"> <div class="column"> <!--is-groupedプロパティを使ってボタン群をグループ化する--> <div class="field is-grouped"> <div class="control"> <button class="button is-link">送信する</button> </div> <div class="control"> <button class="button is-danger">キャンセルする</button> </div> </div> </div> </div> </div> </body> </html> 完成図 【参考サイト】 ■【公式サイト】Bulma Column sizes URL:https://bulma.io/documentation/columns/sizes/ ■【公式サイト】Bulma Form controls URL:https://bulma.io/documentation/form/general/ ■とんよー。ブログさん　CSS フレームワーク「Bulma」 URL:https://tonyo.design/posts/recommended-bulma-no1/