すべてのカテゴリ

CSSを書いていると、ときどき見かける inset: 0;。一見シンプルなのに、「何をしているのか分かりづらい…」という声がよくあります。この記事では、inset の役割と、inset: 0; が実際にどんな効果を持つのかをわかりやすく解説します。insetとは？inset は、要素の位置を決めるための ショートハンドプロパティです。本来ならtoprightbottomleftの4つをそれぞれ書く必要がありますが、inset を使うとそれらをまとめて指定できます。inset: 0; が意味することinset: 0; と書かれている場合、これはtop: 0right: 0bottom: 0left: 0を まとめて指定しているのと完全に同じ意味になります。つまり、要素を親要素の四隅にピッタリ貼り付ける配置です。特に、position: absolute や position: fixed と組み合わせて使われることが多いです。何が便利なの？position: absolute; inset: 0; とすると、要素が親の中でいっぱいに広がるbackground用の疑似要素（::before / ::after）を全面に敷けるモーダルのオーバーレイなどを一瞬で全画面化できるといった便利な使い方ができます。わざわざtop: 0; right: 0; bottom: 0; left: 0;と長く書く必要がありません。よくある利用シーン背景装飾用の ::before を全面に広げたいときモーダルの黒い半透明の背景を全画面にしたいときスライダーやカードの上に重ねるレイヤーを作るときメディア要

React で開発をしていると、必ず「スタイルをどう管理するか」という問題にぶつかります。HTML＋CSS の世界とは違い、React には複数の書き方があり、それぞれメリット・デメリットがあります。この記事では、現場でもよく使われる主要なスタイリング方法をわかりやすく整理して紹介します。1. 通常のCSSファイルを使うもっともシンプルな方法が、いわゆる「普通のCSSファイル」を読み込むやり方です。ファイル名は App.css のようにし、コンポーネント側でインポートして使います。特徴初心者でも理解しやすい小規模なら問題なしただしクラス名がグローバルに広がるため、名前の衝突が起きやすいこんな人におすすめとりあえず React を触り始めた人小さく作ってみたいとき2. CSS Modules.module.css という形式のファイルを使う書き方。React プロジェクトではかなり一般的で、コンポーネント単位でスタイルを閉じ込められるのが大きなメリットです。特徴クラス名が「そのコンポーネント内だけ」で完結する大規模でも安心設定不要でそのまま使える（Vite / CRA / Next.jsなど）こんな人におすすめコンポーネントごとに綺麗に管理したいチーム開発でスタイルの衝突を防ぎたい3. Sass / SCSSCSS の拡張版。変数・ネスト・ミックスインなどが使えて、コード管理が圧倒的にしやすくなります。Modules と組み合わせて .module.scss で使うのが実務でも鉄板。特徴変数や入れ子構造などで CSS が書きやすくなるModules と併用すると最強プリプロセッサ

Webサイトの読み込み速度を改善したい時に、もっとも簡単で効果が高い施策のひとつが 画像の遅延読み込み（Lazy Load） です。HTMLの画像タグに loading="lazy" を付けるだけで、多くの画像を一度に読み込まず、必要になったタイミングで読み込みが開始されるようになります。この記事では、初心者でも理解しやすいように loading="lazy" の正しい使い方・注意点・効果 をまとめます。■ loading="lazy" とは？「lazy＝怠惰」という言葉のとおり、必要になるまで画像を読み込まない仕組みです。ページを開いた瞬間にすべての画像を読み込むのではなく、ユーザーがその画像が見える位置までスクロールしたときに初めて読み込みが行われます。これにより、以下のようなメリットがあります：ページの読み込み速度が向上初期表示が軽くなり、離脱率が下がるモバイルユーザーの通信量が節約できるGoogle Lighthouse や Core Web Vitals のスコア改善に効果大■ 正しく使える場面基本的にはほぼすべての画像に使えますが、とくに効果が大きいのは次のような場所です。下にスクロールしないと見えない位置の画像ブログ記事の中に大量にある写真LP や企業サイトの実績写真・ギャラリーWordPressのサムネイルや一覧ページの画像ページ下部に画像が多いほど、効果が高くなります。■ 逆に「lazy」を使わない方がいいケース万能ではなく、以下の場面では付けない方が良いこともあります。1. ファーストビューの画像ユーザーがページを開いて最初に目にする場所。ここに lazy

今回は、今制作しているゲーム会社やファンタジー作品のサイトのような**「幻想的な雰囲気」**をCSSだけで表現する方法を紹介します。使用するのはHTMLとCSSのみ。JavaScriptを使わずに、光・透明感・立体感を実現できます。この記事では、私が実際に構築した「Aboutセクション」のデザインを例に、使われているCSSのポイントやプロのように見せるコツを丁寧に解説します。💫 デザインの特徴今回のデザインは以下の要素を組み合わせて構成しています。背景にラジアルグラデーション（放射状の光）透明感を出す半透明レイヤー（rgba）**ぼかし効果（backdrop-filter）**で柔らかい光を演出Flexboxを使ったレイアウト設計疑似要素 ::before を使った光スライドボタン見た目としては、まるで魔法陣の中にあるような静かな光の世界をイメージしています。🧱 コードのポイント解説🩵 1. Flexboxで中央整列.about-inner {  display: flex;  align-items: center;  justify-content: center;  gap: 60px;}→ 横並びの画像とテキストをきれいに整列させるために使用。スマホでもflex-wrapで自動的に縦並びに切り替わります。✨ 2. 背景に奥行きを出す.about::before {  content: "";  position: absolute;  inset: 0;  background: url("./images/magic-bg.png") center/cover no-

こんにちは！今回は、HTML・CSS・JavaScriptだけで作れる「ファンタジーRPG風のHeroセクション」を紹介します。ゲーム会社のランディングページ（LP）にも使えるような、透明感のある背景＋パーティクルアニメーションで、まるで物語の世界に入るようなデザインを目指しました。🌌 完成イメージ💫 背景に幻想的な画像が透けて見え、光の粒（パーティクル）がゆっくりと流れ、中央にはゲームタイトルのようなテキストが配置されます。＊画像ではmath.randomを大きくして星の大きさや降る速度も変えています。🧱 実装に使ったファイルindex.htmlstyle.cssscript.jsフレームワークなしでOK。ブラウザだけで動作します。💻 コード全体index.html<section class="hero">  <div class="hero-bg"></div>  <canvas id="bg"></canvas>  <div class="hero-content">    <h2 class="hero-title">Welcome to Our World</h2>    <p class="hero-sub">感情を動かす体験を、あなたに。</p>    <button class="scroll-btn">Enter the World</button>  </div></section>styl

今回は、GSAPを使って本格的なWebギャラリーを制作する方法を紹介した動画を公開しました。初心者の方でも理解しやすいように、HTML・CSS・JavaScriptの基本構成から、実際のアニメーション部分までしっかり解説しています。💡 動画の内容今回の動画では、次のような実装を紹介しています👇✅ タイトル文字のアニメーション — 文字が一文字ずつ動く✅ カードアニメーション — スクロール時にふわっと登場✅ モーダルウィンドウ — カードクリックで詳細表示✅ 閉じる動作もGSAPで自然にフェードアウト✅ ダークモード切替 — ワンクリックでテーマ変更「ただ動くだけ」ではなく、**デザインの流れを大事にした“魅せるUIアニメーション”**を意識しています。🧩 使用した主なコードポイントgsap.to(".card", {  opacity: 1,  y: 0,  stagger: 0.15,  ease: "power2.out"});modalTitle.textContent = card.dataset.title;document.body.classList.toggle("dark");GSAPの stagger（順番アニメーション）やdataset（HTML属性データの取得）など、実務でもよく使うテクニックを活かしています。👉 YouTubeで見る（あなたの動画URL）ショート動画なので1分以内でサクッと見られます🎬コードを見ながらアニメーションの仕組みを理解したい方におすすめです。🧠 こんな方におすすめWebデザイン・コーディングを勉強中の方GSAPを使ってみたい

Astroでは、HTML・コンポーネント・スタイルをシンプルにまとめられる反面、構成を工夫しないとプロジェクトが大きくなるほど管理が難しくなります。ここでは、効率的にCSSを記述・運用するための考え方を整理します。1. ページ単位よりも「コンポーネント単位」で考えるAstroの強みは、コンポーネントごとにCSSを閉じ込められる点です。.astro ファイル内で <style> タグを使うと、デフォルトでスコープ化されるため、他のパーツに影響を与えずにデザインできます。ただし、すべてをローカルに書くと共通化が難しくなるため、ボタン・ヘッダー・カードなど、再利用する要素は別コンポーネント化 して同じCSSを何度も書かないようにします。2. 共通スタイルはグローバルCSSでまとめる共通の色・フォント・リセットなどは、src/styles/style.scss などを用意して「レイアウトコンポーネント」で読み込みます。これにより、全ページ共通のスタイルを一括管理できます。3. ネストを深くしすぎないSassを使う場合、ネストが増えるほど読みやすさが落ちます。BEM記法（Block, Element, Modifier）を意識して2〜3階層以内にとどめるのが理想です。Astroではコンポーネント単位でスコープが効くため、.hero .title のような長いセレクタを書かなくても済むことが多いです。4. メディアクエリを整理して管理スマホ・PC両方に対応する場合、メディアクエリを各所に散らばらせるとメンテナンスが難しくなります。または、Sass変数でブレークポイントを定義し、

今回は、Reactを使ってケーキ屋さん向けのメニュー紹介コンポーネントを作る際の工夫を紹介します。ポイントは 画像と説明を交互に配置するレイアウト です。これにより、見た目が動きのあるおしゃれなデザインになります。実装のイメージ左右に画像とテキストが交互に並ぶレイアウトテキスト部分は商品名と説明文画像サイズは統一（例：350×350px）背景は明るくケーキ屋さんらしい色（薄い黄色など）コード解説<div className="menu-container">  {items.map((item, index) => (    <div      key={index}      className={`menu-item ${index % 2 === 0 ? "left-image" : "right-image"}`}    >      <div className="menu-text">        <h2>{item.title}</h2>        <p>{item.description}</p>      </div>      <img src={item.img} alt={item.title} />    </div>  ))}</div>ポイントmapでループ配列 items の中身（商品データ）を順番に表示。交互レイアウトの判定index % 2 === 0 → 偶数は画像左、奇数は画像右→ CSSで le

Webサイトを作るときに欠かせないのが「CSS（Cascading Style Sheets）」です。デザインを形にし、文字の大きさや色、余白、レイアウトなどを決めていくための言語ですが、自由度が高い分、気をつけないと「書きにくい・読みにくい・直しにくい」コードになってしまうこともあります。そこで重要になるのが 「CSS設計」 です。CSS設計とは何かCSS設計とは、ただ見た目を整えるためにCSSを書くのではなく、長期的に保守しやすく、複数人でも運用しやすいようにCSSの書き方や構造を工夫すること を指します。プロジェクトが大きくなるほど、スタイルの管理は複雑になります。後から修正や追加をしたときに「どこを直せばいいのか分からない」「影響範囲が広すぎて怖い」といった問題が出てきやすいのです。CSS設計は、そのようなトラブルを防ぐための考え方とも言えます。なぜCSS設計が必要なのか読みやすさ：他の人が見てもルールが分かるように整理されたコードになる。再利用性：同じようなスタイルを何度も書かなくて済む。保守性：仕様変更やデザインの改修に強い。拡張性：新しいページやコンポーネントを追加しても破綻しにくい。小規模なサイトでは「とりあえず動けばいい」で済むかもしれませんが、運用が続くサービスや大規模な開発ではCSS設計の有無が大きな差になります。CSS設計の代表的な考え方CSS設計にはいくつか有名な手法があります。BEM（Block, Element, Modifier）：クラス名にルールを設け、役割を明確にする。OOCSS（Object Oriented CSS）：デザインを「オブジェ

CSSを使ってスタイルを指定していると、「なぜか思った通りにデザインが反映されない」という経験をしたことはありませんか？そのときによく登場するのが !important です。この記事では、!important の基本から、使いどころ・注意点まで解説します。!important の役割通常、CSSのスタイルは「セレクタの優先度」と「後から書かれたものが勝つ」というルールに従って適用されます。しかし、!important をつけると、そのプロパティは 他のルールよりも強制的に優先される ようになります。つまり「どうしてもこのスタイルを効かせたい」というときに使える切り札です。便利な場面外部ライブラリやテーマの上書きWordPressやCSSフレームワークを使っていると、既存のスタイルが強く効いてしまい変更できないことがあります。そういうときに !important をつけると、こちらの指定を優先させられます。一時的な修正やテスト「とにかく今は強制的にこのデザインにしたい」という場面で、応急処置として使うことがあります。注意点メンテナンス性が下がる!important を多用すると、「なぜこのスタイルが効かないのか？」が分かりにくくなります。別の人がコードを読むときや、自分が後から修正するときに混乱のもとになります。上書き合戦になるある場所で !important を書き、別の場所でも !important を書くと、結局「どちらが後に書かれているか」で決まります。結果としてCSSが複雑になり、管理が難しくなります。使い方のコツ本当に必要なときだけ使うまずはセレクタの優先度を見直す

Sass（Syntactically Awesome Stylesheets）は、CSSをより効率的かつ管理しやすくするための拡張言語です。最終的には通常のCSSに変換して使用するため、あらゆるブラウザで動作します。ここでは、Sassの主な特徴をわかりやすくご紹介します。変数での管理Sassでは色やフォントサイズなどの値を変数としてまとめられるため、一箇所の変更で全体に反映できます。テーマカラーや共通スタイルの更新が容易になり、保守性が向上します。ネスト構造CSSでは階層が深くなるとセレクタが長くなりがちですが、Sassでは入れ子構造で記述できるため、読みやすく整理されたコードになります。Mixin（ミックスイン）何度も使うスタイルの組み合わせを一度だけ定義し、必要な場所で呼び出せます。共通レイアウトやアニメーションなど、再利用性が高いスタイルに適しています。継承機能既存のクラスを引き継ぎ、共通部分を共有しながら個別のスタイルを追加できます。重複記述を減らし、コードの簡潔さを保てます。演算機能数値や色に対して四則演算が可能です。フォントサイズの倍率計算や色の明暗調整など、デザイン調整を効率化できます。まとめSassは、変数・ネスト・再利用・継承・演算・モジュール化といった機能により、CSSの記述量を減らし、保守性や開発効率を大きく高めます。特に中〜大規模なプロジェクトでは、その効果を強く実感できるでしょう。

こんにちは。ココナラでWeb制作をしているタケです。私はコーディングを主力サービスとして出品しているのですが、よく他の競合をチェックしています。他のサービスを見ていると分かりますが、HTML/CSSコーディングで稼ぎたいココナラユーザーはたくさんいます。しかし、多くの人は稼ぐ前に学習をやめてしまうことがほとんどです。一方で、ちゃんとコーディングスキルを身につけ、ココナラで稼いでいる人もいます。この違いは何なのでしょうか？今回は「コーディングが伸びる人と伸びない人の違い」というテーマで、両者の違いを解説します。伸びる人の特徴まずはコーディングが伸びる人の特徴から。伸びる人には、例外なく以下3点の特徴があります。・まずは素直にやってみる・基本を疎かにしない・常に向上心を持ってスキル習得に努めている私はスクールでコーディングを教えているのですが、伸びる人は総じて「素直」です。何かアドバイスをもらったら、まずは素直にやってみようとします。スキル面では、基本的なHTMLのタグやCSSをちゃんと習得しようとします。ただ、基本を身につけるには時間がかかります。素直な人は、時間がかかる地味な作業も手を抜かないから、確かな基礎力をもとにどんどん成長していけます。伸びない人の特徴一方、伸びない人の特徴は以下の通りです。・自己流に走る・アニメーションやかっこいい機能などをやりたがる・表示できればOKという考えをしている伸びない人は、プライドが高い場合が多く、人の意見を素直に受け止めません。まだまだ初心者なのに自己流に走ってしまうため、結局中途半端なスキルしか身につかないことになります。スキル面では、

1. はじめにとある家に入って、ある部屋にバスタブやシャワーが設置されていれば、「ここは浴室なんだな」と自然にわかりますよね。同じく、ガスコンロや冷蔵庫があれば「キッチンだな」と判断できます。私たちは現実の家では、目に見える家具や設備から「この空間は何のための部屋か？」を判断できます。でも、Webページ（HTML）ではそうはいきません。HTMLの世界では、「このページにはどんな情報があるのか？」「どういう性質のページなのか？」といったことを、目に見える場所だけで判断するのは難しいのです。だからこそ、見えないところで「このページはこういう内容ですよ」「こういう目的のページですよ」といった“ページに関する情報”を、ちゃんと文字として記述してコンピューターへ伝える必要があります。そのような情報を記録しておく箱が、HTMLの <head> タグです。前回の記事では、<html> という家の「骨組み」の中に、<body> タグで「空間」をつくり、<head> タグで「その空間に関する情報をまとめた書類入れ」を設置しました。これで、家としての基本的な構造はできあがってきました。今回は、その「書類入れ」──つまり <head> タグの中に、具体的にどんな情報を記述していけばよいのか？ を見ていきましょう。この <head> タグに入る情報は、ページの見た目には直接は関係しません。ですが、ページのタイトルや説明、文字化け防止の設定など、Webサイトにとってとても大切なことがたくさん詰まっています。「ちょっと地味そう…」と感

1. はじめに突然ですが、もしあなたがマイホームを建てるとしたら、どんな空間をつくりたいですか？書斎や趣味の部屋、コレクションを並べるギャラリースペースなんかも素敵ですよね。お風呂を3つ付ける、なんていうちょっとした贅沢も夢があります。ちなみに私は、ミニシアターとちょっとしたバーのような空間が欲しいです。……という話はさておき。Webサイトも「ホームページ」と呼ばれるだけあって、家を建てることと少し似ています。骨組みがあり、空間があり、そこに暮らしに必要なもの、つまりコンテンツを配置していきます。建築技術を持っていない素人が、いきなり理想のマイホームを自力で建てるのは不可能なのと同じで、Webサイトもいきなり本格的なものを作ることはできません。まず作れるのは、家というより“最低限の小屋”といったところではないでしょうか。早くマイホームを建てたい気持ちもわかりますが、最低限の小屋の建て方すら知らない人に豪華なマイホームは建てられません。なので、焦らず着実に進めていくのが大事です。無人島に必要最小限のシェルターを建てるような感覚で、基本から始めていきましょう。この記事では、小屋の骨組みに壁などを設置して「空間」を作り、その空間が何のためにあるのかを示す「室内ルール」などの書類をまとめる箱も設置していきます。「HTMLってそもそも何？」「その“骨組み”ってどうやって作るの？」という方は、先に以下の記事をご覧いただくのがおすすめです。（どちらも無料ご覧いただけます）2. HTMLの中身を書いていこう2-1. 作ったHTMLファイルの開き方前回の記事「Webサイトの基礎② HTMLを書い

1. はじめに日本語、英語、中国語、韓国語、スペイン語、イタリア語……。世界には本当にたくさんの言語があります。それぞれの言語には、それを使う人たちがいて、言葉を通じて想いや情報を伝え合っていますよね。「Webの世界」にも独自の“言語”があります。そのひとつが、今回のテーマである HTML です。HTMLはWebページの内容や構造を作るための言語です。正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」と言いますが、今は覚える必要はありません。HTMLは人間が会話するための言語というよりも、Google ChromeやSafariといったWebブラウザに「この部分は見出しだよ」「ここは画像を表示してね」と伝えるためのルールのようなものです。つまり、私たちがブラウザに「こんなWebページを表示してほしい」と伝えるときに使う“共通言語”。それがHTMLです。Webサイトを「家」にたとえるなら、HTMLはその家の土台や骨組みを作り、テーブルや椅子といった最低限の家具を配置するような役割を担っています。HTMLだけで作られた家は、まだ完成にはほど遠い状態です。壁はコンクリートの打ちっぱなし、家具はとりあえず組み上げただけで、人を招くにはまだまだ整っていない…そんなイメージです。でも、しっかりとした家を建てるには、まずこの“最低限の家”から着実に作っていく必要があります。この記事では、HTMLを使ってその“最低限の家”をどう作るのか、という基本の基本から解説していきます。また、実際に手を動かしながら、HTMLを「書いてみる」ことに

1. はじめに「在宅で働くために、Web制作を学びたい！！」そんな思いで、自分なりにいろいろ調べて勉強を始めてみたけれど、出てくるのはカタカナや英語の専門用語ばかり…。そのまま挫折してしまった、という方は少なくないかと思います。最近ではAIの進化も目覚ましく、今やAIに任せてWebサイトを作ることも可能な時代になりました。もしかすると、「もうHTMLやCSSなんて勉強しなくてもいいのでは？」と感じるかもしれません。でも私は、だからこそHTMLやCSSの基礎知識くらいは身につけておくべきだと考えています。なぜなら、基礎がなければも上手に使いこなせないからです。少したとえ話をしましょう。Google翻訳で、以下のような翻訳を行ったとします。日本語：「彼は顔が広いよね」（＝人脈が広いという意味）Google翻訳：He has a wide face.どうでしょうか？この英文を見て「いや、その英文は違うだろ(笑)」と感じた方は、「a wide face」が物理的に“顔の幅が広い”という意味だと理解しているからです。もしその知識がなければ、この翻訳が不自然なことにすら気づかず、そのまま使ってしまうかもしれません。HTMLやCSSも、これと同じだと思っています。基本的な概念を知らなければ、AIが出力したコードの間違いに気づくことができません。このブログでは、「今までパソコンやWebのことにはあまり触れてこなかったけれど、これをきっかけに学んでみたい！」という完全初学者の方に向けて、Web制作の超基本や、HTML/CSSの基本的な考え方をやさしく紹介していきます。知識がある人から見ると、「こ

Google Apps Script (GAS) は、Google Workspaceの各種サービスを自動化・連携させる強力なツールです。しかし、スクリプトの実行結果をユーザーに分かりやすく提示したり、複雑な入力を受け付けたりする際には、GASのコードだけでは限界があります。そこで重要になるのが、**HTMLとCSSの活用**です。これらをGASと組み合わせることで、ユーザーインターフェース（UI）を伴うWebアプリケーションやサイドバー、ダイアログを構築し、スクリプトの使いやすさと機能性を飛躍的に向上させることができます。この記事では、GAS開発においてHTMLとCSSがどのように役立つのか、そして具体的な活用事例を交えながらその要点をご紹介します。1. なぜGASでHTMLとCSSが必要なのか？GAS単体では、主に以下の方法でユーザーとインタラクションします。- `Browser.msgBox()`や`SpreadsheetApp.getUi().alert()`によるメッセージ表示- `Browser.inputBox()`や`SpreadsheetApp.getUi().prompt()`による簡単な入力- スプレッドシートのセルへの直接書き込みこれらの方法はシンプルで手軽ですが、以下のような課題があります。視覚的な表現の限界：テキストのみの表示では、情報を分かりやすく整理したり、ブランドイメージを伝えたりすることが困難です。複雑な入力の困難さ：複数の選択肢、ファイルアップロード、カレンダーからの日付選択など、複雑な入力を求めることができません。ユーザー体験の欠如： ユ

こんにちは。Web制作をしているタケと申します。ココナラでは、主に・WordPressを用いたHP制作・Webサイトのコーディングを中心に活動しています。今回は「Webサイトのコーディング」について、私のサービスをご紹介させていただきます。コーディングでお困りではありませんか？私のコーディングのサービスは、主に事業者様やWebデザイナー向けです。「デザインを作ったけど、コーディングは外注したいな」「コーディングに自信がないから、プロにお願いしたい」「事業立ち上げに伴って、参考サイトのようなホームページをコーディングしてほしい」このようなご要望にお応えしており、2025年4月時点で累計22の実績があります。Webデザイナー様から多くご購入いただいており、プロが作成したデザインを格安20,000円〜でコーディングしています。運用後の更新・修正がしやすいコーディングを心がけています多くの人にとって、コーディングはデザインを再現すれば終わりと思われがちです。しかし、Webサイトは日々更新されていくものなので、変更・修正に強い設計のコーディングが求められます。そのため、私のサービスでは以下のような点にこだわっています。・誰が見ても分かりやすい構造、クラス名・共通箇所はパーツ化・CSS変数（カスタムプロパティ）の使用・理解を補助するコメントの挿入・ライブラリやフレームワークに極力依存しない以上の点に注意することでお客様満足度が向上し、リピートで継続的に購入していただいていると自負しております。コーディングでお困りの方、まずはDMでご相談くださいここまでお読みいただき、ありがとうございます。

みなさんおはようございます。nikoniko 21です。今回は、私の記事を見てくださってありがとうございます。今回は、私のプログラミング用語を覚えるための暗記術について紹介したいと思います。私はプログラミングの勉強をはじめてけっこう経ちますが、たまに用語を忘れてしまったりします。従いまして、そういった用語を覚えなおすために暗記帳を作って持ち歩いています。そして、暗記帳を書く方法も工夫しています。一冊のノートの前半のページ数はHTML・CSSの用語を書くのに使って、後半のページ数はJavascriptの用語を書くのに使っています。そうすればノートの中を整理することができて、3種類の用語の勉強ができます。また、勉強が楽しくなるようにノートは以前もカバー画像にした星座の魔法陣の表紙のノートを使って、覚える用語の詳しい解説は好きな紫色のペンで書いています。その結果、暗記しやすくなって用語も覚えやすくなりました。この情報が少しでも読んでくださってる人の参考になれば嬉しいです。今回の記事はここまでです。読んでくださってありがとうございます。

みなさんこんばんは。nikoniko 21です。私の記事を読んでくださってありがとうございます。本日は、みなさんに私の習性についてお話したいと思います。私は昔からメモ魔でかわいいノートも大好きです...。というのは前にお話ししたこと。今回の私の習性はかわいいものを集めることです。子供のころはお菓子のおまけを集めるのが趣味でした。アニメのカード付きガムのカードを集めたり、フエラムネのおまけの指輪やピン止めやクリップ等を集めたりしてました。今は100均の手芸コーナーのハギレやUVレジンのフレームやモールドやビーズを集めています。ハギレは主に花柄のものを、フレームやモールドは季節に関するものを集めています。そして、ビーズは丸いビーズだけでなく、ソロバン型のビーズや楕円形のビーズ等を集めています。今はかわいいものが安く買えるのでとてもうれしいです。今回の記事はここまでです。最後まで読んでくださってありがとうございます。

みなさん、こんばんは。毎度同じみココナラにWebサイト制作とHTML・CSSコーディングのサービスを出品中のnikoniko 21です。私のブログをご覧になってくださってありがとうございます。本日はWebサイト制作やHTML・CSSコーディングやサーバーの設定等のトラブルを解決するときに使えるちょっとした方法をお教えします。1回目のブログにも書いたように、私はWebプログラミングの作業をしているときにコードを書くのに使っているVScodeが思うように動かなくなったり、自作のホームページをブラウザで公開しようとしても公開できなくなる等といったトラブルに見舞われたことがあります。そして、ネット等で見つけた解決方法を試してそのトラブルを解決しようとしても全く解決せず、どうすれば良いのかわからなくなったりしたことがあります。そんな中で、私はある方法を思いつきました。それは、トラブルを解決しようとなにをしたのかを一からノートに控えておくことです。トラブルを解決する方法を試し始めたときからなにをしたかをノートに記録しておけば、自分はどのような方法をどこまで試したかが一目でわかって、その過程でなにかやり方を間違えたりしたのかを確かめることができます。また、解決方法の試し始めからトラブル解決までをノートに控えておけばトラブルが解決したあとにまた同じようなトラブルが発生したときにそれを見ればすぐに解決できると思います。この方法は他の人も既にやっている方法かもしれませんが、私としては良い方法だと思います。本日のブログはここまでです。最後まで読んでくださってありがとうございます。

1. サイトイメージ画像2. 制作概要 制作時期：2024年11月 制作時間：30時間作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Photoshop 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫した点(コーディング) Photoshopを用いてデザインをコーディングしました。 ローディングアニメーションやホバーアニメーション、スクロールアニメーションといった動きのある要素に加え、ハンバーガーメニューも実装しています。これらのアクションを取り入れることで、サイト訪問者を飽きさせない設計となっております。 また、一部セクションの背景には、オレンジと白を組み合わせた幾何学模様を採用しています。この模様は画像ではなくコーディングによって表現しました。さらに、ファーストビューの画像は丸く切り抜き、柔らかい印象を与えるデザインに仕上げました。 CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。 最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。

1. サイトイメージ画像2. 制作概要 制作時期：2024年8月 制作時間：170時間ページ数：12ページ 作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery、WordPress 3. 工夫したポイント(コーディング) WordPressを使用してオリジナルテーマを作成し、コーディングを行いました。 投稿機能では、デフォルトの投稿機能とカスタム投稿機能の両方を活用しています。特に、カスタム投稿機能を使用した社員紹介ページでは、カスタムフィールド機能も組み合わせ、保守管理しやすくなっております。 また、パンくずリストを実装し、ナビゲーション性能を向上させています。一部のページでは、パンくずリストのリンク先や表示されるタイトルをPHPを用いてカスタマイズし、コンテンツの一貫性と利便性を確保しました。 さらに、スムーススクロールやページネーション、ハンバーガーメニューの実装を行うことで、サイト訪問者が快適に操作できるデザインを心がけました。 最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。

1. サイトイメージ画像2. 制作概要 制作時期：2024年3月 制作時間：60時間作業内容：コーディング、クロスブラウザテスト、サーバーアップロード ページ数：6ページ 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫したポイント(コーディング) ファーストビューでは、数秒ごとに画像が切り替わるアニメーションを実装し、訪問者に動きのある印象を与える工夫をしました。 また、トップページでは以下の機能を実装し、利便性を高めています。 ・モーダルウィンドウ ・ハンバーガーメニュー ・ローディングアニメーション ・スムーススクロール ・ホバーアニメーション学科ページについては、4つのページが同一仕様であることを活かし、共通のCSSファイルを適用しました。これにより、保守性や管理効率が向上しています。また、すべてのページにおいてCSS設計ではBEMを使用し、可読性の高いコーディングを行いました。さらに、予約フォームのページでは、必須項目がすべて入力されていない場合は送信ボタンが押せない仕組みを導入しました。この設計により、利用者が入力ミスに気づきやすくなりました。 最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。

1. サイトイメージ画像2. 制作概要制作時期：2024年2月 制作時間：25時間程度作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫したポイント サイトを開いた際には、ローディングアニメーションを表示させる設計にしています。 商品一覧のスライドショーでは、Swiperプラグインを使用することで、複雑なコードを避けつつ機能性を確保しました。 また、問い合わせフォームでは、必須項目をすべて入力しないと送信ボタンが押せない仕組みにすることで、利用者が迷わずに操作できるよう配慮しています。そのほか、ハンバーガーメニューやスムーススクロール、FAQページにおけるアコーディオン機能の実装も行い、ユーザーにとって快適で分かりやすい構成を目指しました。 コンタクトフォームはPHP工房をカスタマイズして実装しました。CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。

CSS の擬似クラスは、HTML 要素の状態や位置に基づいてスタイルを変更できる強力なツールです。まるで魔法の呪文のように、要素に特別な効果を与え、インタラクティブなデザインを実現します。擬似クラスとは？擬似クラスは、要素そのものに存在するものではなく、要素が満たす条件によって適用される仮想的なクラスです。例えば、マウスが要素の上に置かれたとき、要素がフォーカスされたとき、要素がリンクであるときなど、様々な条件によって擬似クラスが適用されます。擬似クラスの例:hover: マウスが要素の上に置かれたとき:focus: 要素がフォーカスされたとき:active: 要素がクリックされたとき:link: 未訪問のリンク:visited: 訪問済みのリンク:first-child: 親要素の最初の子供要素:last-child: 親要素の最後の子供要素:nth-child(n): 親要素のn番目の子供要素擬似クラスの使い方擬似クラスはセレクタにコロン(:)で続けて記述します。/* マウスが要素の上に置かれたとき、背景色を赤色にする */a:hover {  background-color: red;}/* フォーカスされたとき、枠線を青色にする */input:focus { border: 2px solid blue;}/* 親要素の最初の子供要素に太字を適用する */p:first-child {  font-weight: bold;擬似クラスの利点コードの簡潔化: 擬似クラスを使用することで、要素の状態ごとに個別のクラスを定義する必要がなくなり、コードが簡潔になります。イン

皆さんはCSSは何使っていますか？ ふつうにcssファイルやbootstrapとかでレイアウトなんかいろいろありますがやはりレイアウトも効率的にしたいですよね？ Tailwindcssはclassにそのままコードを書くことで簡単に反映できるのでおすすめです。 例　（<div><classname=container "mt-5 bg-color-500"></div>） 上記だとマージンと背景色を変更しています。 今回はnpmでインストールから使用可能までの手順を紹介していますのでこの記事を読んで是非Tailwind.cssを使ってみてください！ １　npm install tailwind でインストール。 ２　npx tailwindcss initでtailwindcssの設定ファイルを作成します。 ３　npx tailwindcss initで作成したtailwind.config.jsでcontentの中に "./src/**/*.{js,jsx,ts,tsx}",  を加えて適応ファイルを加えて下さい。 ４　index.cssにtailwindの基本スタイルを適応するため下記を記述 アットマークtailwind base; アットマークtailwind components; アットマークtailwind utilities;５　tailwindを適応させたいコンポーネントかjsファイルに import "./index.css"; をインポートすることでTailwindのスタイルを適応。 ６　スタイルを当ててみてnpm star

「Tailwind CSSを勉強すべきか？」これは多くのフロントエンド開発者が抱える疑問です。結論から言うと、Tailwind CSSは学ぶ価値のあるツールです。しかし、すべての人にとって最適な選択肢とは限りません。この記事では、Tailwind CSSのメリットとデメリットを詳しく解説し、あなたが学ぶべきかどうか判断するお手伝いをします。Tailwind CSSのメリット高速な開発: 事前に定義されたユーティリティクラスを使用することで、CSSを書く時間を大幅に短縮できます。デザインの一貫性: プロジェクト全体で共通のスタイルを簡単に適用できます。柔軟性: 独自のスタイルを簡単に作成し、既存のスタイルをカスタマイズできます。学習しやすい: シンプルな構文と豊富なドキュメントにより、初心者でも比較的簡単に習得できます。コミュニティのサポート: 活発なコミュニティがあり、多くのリソースやサポートが得られます。Tailwind CSSのデメリットファイルサイズ: ユーティリティクラスを多く使用すると、CSSファイルのサイズが大きくなる可能性があります。学習曲線: 基本的なCSSの知識がないと、使いこなすのが難しい場合があります。デザインの自由度: 事前に定義されたユーティリティクラスに縛られるため、自由なデザインが難しい場合があります。パフォーマンス: CSSファイルのサイズが大きくなると、ページの読み込み速度が遅くなる可能性があります。Tailwind CSSが向いていない人デザインの自由度を重視する人: 独自のスタイルを自由に作りたい人にとって、制約を感じるかもしれません。パフ

ご覧頂きましてまことにありがとうございます！Makkwyldeです。CSSの基礎を習得した皆さん、おめでとうございます！今回は、より高度なCSSの書き方として注目されている「BEM」について解説します。BEMを使うことで、より保守性が高く、拡張性のあるCSSを書くことができるようになります。BEMとは何か？BEMは「Block, Element, Modifier」の略で、CSSのクラス名を構造化するための命名規則です。この方法を使うことで、以下のような利点があります：・コードの可読性が向上する・再利用可能なコンポーネントを作りやすくなる・CSSの詳細度の問題を回避できるBEMの基本構造BEMは以下の3つの要素で構成されています：① Block（ブロック）：独立したコンポーネント② Element（要素）：ブロックの一部を構成する要素③ Modifier（修飾子）：ブロックや要素の変種や状態これらは以下のような命名規則で表現します：.block {}.block__element {}.block--modifier {}.block__element--modifier {}具体例で理解するBEM例えば、カードコンポーネントを作る場合を考えてみましょう。<div class="card">  <img class="card__image" src="image.jpg" alt="カード画像">  <div class="card__content">    <h2 class="card__title">カードのタイトル&l

ご覧頂きましてまことにありがとうございます！Makkwyldeです。CSSの基礎を習得した皆さん、おめでとうございます！これからは、より高度なテクニックを学び、魅力的で機能的なウェブデザインを作成する時です。このガイドでは、CSS中級者が次のレベルに進むために知っておくべき重要なポイントをご紹介します。フレックスボックスとグリッドレイアウトモダンなレイアウト技術を使いこなすことで、複雑なデザインも簡単に実現できます。① フレックスボックス・親要素に`display: flex;`を指定し、子要素の配置を柔軟に制御・`justify-content`や`align-items`プロパティを使って、要素の配置を調整② CSSグリッド・`display: grid;`で親要素をグリッドコンテナに・`grid-template-columns`と`grid-template-rows`で列と行を定義・`grid-area`を使用して、要素を特定のグリッド領域に配置レスポンシブデザインの高度な技法デバイスに応じて最適な表示を実現するテクニックを磨きましょう。・メディアクエリを使用して、画面サイズに応じたスタイルを適用・ビューポートユニット（vw、vh、vmin、vmax）を活用した流動的なレイアウト・画像の`srcset`属性と`<picture>`要素を使用した最適な画像の提供CSSアニメーションとトランジション動きのあるインターフェースで、ユーザー体験を向上させましょう。・`transition`プロパティを使用して、スムーズな状態変化を実現・`＠keyframes`と`

ご覧頂きましてまことにありがとうございます！Makkwyldeです。今回は、HTMLをもっとカッコよくする「CSS」について解説します。CSSを使えば、ウェブページを自分好みにデザインできるんですCSSって何？CSSは「Cascading Style Sheets」の略で、ウェブページの見た目を整えるための言語です。HTMLが家の骨組みだとすれば、CSSは壁紙や家具、照明のようなものです。CSSの基本CSSは「セレクタ」と「プロパティ」を使って書きます。セレクタ {  プロパティ: 値;}例えば：p {  color: blue;  font-size: 16px;}これは「すべての段落（p）のテキストを青色にして、文字サイズを16ピクセルにする」という意味です。CSSの適用方法CSSをHTMLに適用する方法は主に3つあります：① インラインスタイル : HTML要素に直接スタイルを書く② 内部スタイルシート : HTML文書の`<head>`内に`<style>`タグを使って書く③ 外部スタイルシート : 別のCSSファイルを作成し、HTMLにリンクする（最もおすすめ）よく使うCSSプロパティ① 色の変更 : `color: 色名;`② 背景色の変更 : `background-color: 色名;`③ フォントサイズの変更 : `font-size: サイズ;`④ 余白の設定 :    ・ 内側の余白: `padding: 値;`   ・ 外側の余白: `margin: 値;`⑤ ボーダーの設定 : `border: 太さ スタイル 色;`CSSセレ

こんにちは！前回の記事が大変好評だったので、今回はさらにデザイン案を増やしてお届けします！WordPressテーマ「Lightning」を使っている方なら、モバイルナビボタンのカスタマイズは一度はやりたい部分ですよね。今回は、簡単にコピペで実装できるCSSデザインを複数ご紹介します。Lightningは初心者にも使いやすいテーマでありながら、カスタマイズ性も抜群。自分好みのデザインにカスタマイズできるのが魅力です。今回のデザインも、コーディングに自信がない方でも気軽に使っていただけるよう、シンプルにまとめました。そして、もし「こんなデザインがいいな」という案があれば、手書きでもOK！ぜひわたしにお知らせください。あなたのイメージを実現するお手伝いができればと思っています。1. テーマカラーを使った四角いモバイルナビボタン下のデザインは、テーマカラーに合わせた四角いモバイルナビボタンです。シンプルですが、色使いを活かしてサイト全体と統一感を出せます。プレビュー画像/*モバイルナビボタン*/ .vk-mobile-nav-menu-btn {     background: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-btn-white.svg) center 50% no-repeat; } .vk-mobile-nav-menu-btn.menu-open {     background: url(/wp-content/themes/lightning/_g3/i

LINEを開くとたまに画面に雪が降ってきたり、桜の花びらが降ってきたり、ちょっとほっこりする時ってありますよね。そういうのっていろんな方法がありますが、下記のようにCSSの「animation プロパティ」だけで簡単に実現することができます。今は、ノーコード云々・・・と言われていますが、自分であれこれ調べていじって設定して動くと楽しい。CSSだけでも奥が深いのです。【HTML】<div class="snow">&#9679</div> 【CSS】body{   background: #000; } .snow {   color: snow;   font-size: 8px;   position: fixed;  text-shadow:3vw -100px 1px, 10vw -200px 3px, 15vw -700px 4px, 20vw -500px 7px, 25vw -500px 2px, 30vw -300px 1px, 36vw -400px 2px, 40vw -150px 6px, 47vw -840px 2px, 50vw -300px 5px,60vw -200px 3px, 68vw -100px 5px, 70vw -250px 1px, 80vw -620px 9px, 90vw -800px 4px;  animation: snow 5s linear infinite; } ＠keyframes snow {   0% {     top: 0;   }   100% {     top:

レスポンシブデザインは、スマホやタブレットなど、どんなデバイスでも見やすいホームページを作るための方法です。これから、レスポンシブデザインの重要性とそのノウハウを紹介します。レスポンシブデザインとは？レスポンシブデザインとは、画面サイズに応じてホームページのレイアウトやデザインが変わる技術です。例えば、スマホで見たときとパソコンで見たときでは、画面の大きさが違います。スマートフォン、タブレット、ノートパソコン、デスクトップなど、さまざまなデバイスでウェブページを快適に閲覧できるようにすることを目的としているんですね。レスポンシブデザインを使うことで、どんなサイズの画面でも見やすいレイアウトに自動的に調整されます。レスポンシブデザインのメリットレスポンシブデザインには多くのメリットがあります。まず、ユーザー体験の向上です。どのデバイスでも見やすく操作しやすいため、ユーザーはストレスなくホームページを利用できます。次に、管理の手間が減ることです。以前は、スマホ用とパソコン用で別々のホームページを作る必要がありましたが、レスポンシブデザインなら一つのホームページで済みます。さらに、SEO対策にも効果的です。Googleはモバイルフレンドリーなサイトを評価するため、検索順位が向上する可能性があります。レスポンシブデザインを導入する方法レスポンシブデザインを導入するための基本的なステップを紹介します。まず、HTMLとCSSを使ってレイアウトを作成します。次に、メディアクエリを使用して、画面サイズに応じたスタイルを設定します。ココナラブログでは、コードが禁止ワードとして設定されているため、

スマホで、横並びの要素をスワイプで表示する方法です。HTML<div class="p-scroll">  <div class="p-scroll__content">    <div class="p-scroll__item">      <img src="画像のパス" alt="" />    </div>    <div class="p-scroll__item">      <img src="画像のパス"" alt="" />    </div>    <div class="p-scroll__item">      <img src="画像のパス"" alt="" />    </div>  </div>  <!-- p-scroll__content --></div><!-- p-scroll -->CSS(Sass)/* .p-scrollクラスはスクロール可能なコンテナの基本スタイルを設定 */.p-scroll {  width: 100%; /* コンテナの幅を親要素の100%に設定 */  overflow-x: scroll; /* 横スクロールを可能にする */  -ms-overflow-style: none; /* Internet Explorerでのスクロールバーを非表示にする */  scrollbar-width: non

overflow: hiddenとは overflow: hiddenは、CSSプロパティの1つで、要素の内容がその領域を超えた場合の動作を指定するものです。具体的には、以下のような効果があります。要素の範囲を超えた部分は表示されなくなる(切り取られる) スクロールバーは表示されない 要素の背景が要素の範囲に収まらない部分は表示されない 主な使用例主な使用例としては、以下のようなケースが考えられます。 画像やテキストがコンテナからはみ出すのを防ぐ フローティング要素がコンテナの外にはみ出すのを防ぐ 要素の高さを制限し、コンテンツがはみ出さないようにする テキストの改行や画像の範囲外への出力を防ぐ テキストの改行や画像の範囲外への出力を防ぐ <div style="width: 200px; height: 100px; overflow: hidden;">   <p>これはかなり長いテキストです。長すぎて、この範囲に収まりきらないでしょう。</p>   <img src="large-image.jpg" alt="大きな画像" /> </div> copy 上記の例では、divの範囲を200px x 100pxに制限し、overflow:hiddenを設定しています。テキストと画像がこの範囲を超えた部分は表示されません。 フローティング要素がコンテナからはみ出すのを防ぐ <div style="overflow: hidden;">  <div style="width: 100px; heigh

こんにちは！RuniDesign（ルニデザイン）です。最近は毎日ホームページの制作や管理をしています。本日、とりあえずで作っておいたポートフォリオサイトをリニューアルしました！ココナラでは外部サイトへの誘導はできないのでここには貼り付けられないのですが…ロゴは表示の際動く仕様で、スクロールするとコンテンツが見れる作りになっています。前回からの変更点それなりの文章に書き換えました…！今回オンラインで発注受注のために見るサイトという点では文章などもあまりにカジュアルすぎましたので少しだけ頑張っています。（お堅い感じは私の印象からはかけ離れるのでやめました笑）レスポンシブの見やすさを重視前回のデザインは左側にメニューが固定されているデザインだったので、気に入っていたのですがスマホから見るとメニューに圧迫されてメインコンテンツが見えにくい使用でした。今回のデザインはハンバーガーアイコン（右上に固定されたメニューバー）仕様にしてみました。これにより可愛くて見やすくなったのではと思います！　旧デザイン新デザイン背景画像にドロップシャドウ（影）をつけてみましたイラストも描いているので前回はイラストのゆるっとした印象を残しつつ、”デザインもやってるんだよ”というサイトデザインにしていたのですが、今回は”デザインメイン”に変更したかったので、ドロップシャドウとグラデーションで立体感をだしてデザインに奥行きをつけました。全く同じ背景ですが印象がかなり違って見えるはずです。イラストとWebデザインのページを分割しましたこのサイトではイラストはサブ、メインはデザインに変更したかったのでページを分けまし

はじめにこんにちは、ウェブの魔術師たちよ！今日はあなたのデザインのポテンシャルを爆発させるための隠されたツール、STUDIOのCSSエディターについて深掘りしていきます。このガイドを読んだら、あなたもCSSの呪文を使いこなす魔法使いになれるかもしれません。では、この魔法のレシピを一緒に学んでいきましょう！STUDIOのCSSエディターって何？STUDIOのCSSエディターは、ウェブページに魔法をかけるための強力なツールです。直感的なドラッグ＆ドロップのインターフェースでサイトをデザインした後、CSSエディターで細かいスタイリング調整やアニメーション効果を加えることができます。これで、あなたのウェブサイトはただのページから、訪問者を引きつける魔法の国に変わるのです！CSSエディターの基本1.スタイルのカスタマイズCSSエディターを使えば、フォント、色、マージン、パディング、ボーダーといった基本的なスタイルから、さらに複雑な影やアニメーションまで、すべてのCSSプロパティを自由自在に調整できます。ウェブデザインの世界で「もっと！」と思ったら、CSSエディターがその「もっと！」を叶えてくれるのです。2.レスポンシブデザインの強化STUDIOのCSSエディターを使用すると、異なるデバイスや画面サイズに合わせてスタイルを微調整することが可能です。これにより、どんなデバイスからアクセスしても完璧に見えるウェブサイトを実現できます。クリエイティブなデザインへの応用1.アニメーションで生き生きとCSSエディターを駆使して、ボタンにホバー効果を加えたり、画像にスムーズな遷移効果を付けたりして、ユ

ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果のCSSコード例を紹介します。ボタンのHTMLコードまずは、各ボタンのHTMLコードです。<!-- グラデーションで色が変わるボタン --> <button class="button-gradient">グラデーション</button> <!-- 色がフェードインするボタン --> <button class="button-fade-in">フェードイン</button> <!-- 枠線の色が変わるボタン --> <button class="button-border-change">枠線変更</button> <!-- 影の色が変わるボタン --> <button class="button-shadow-change">影変更</button> <!-- ボタンが膨らむ --> <button class="button-puff">膨らむ</button>グラデーションで色が変わる グラデーション .button-gradient {   background-color: #3498db;   color: white;   padding: 10px 20px;   border: none;   curs

レスポンシブ対応で迷うのはブレイクポイントの設定です。つまり、○○○ピクセル以上はデスクトップ用のレイアウト、○○ピクセル未満はモバイル用のレイアウトと云う決まりごとです。正直、開発者によって違います。わたしは今までの経験から以下の仕様をオススメしてますし、今まで困ったことはありません。max-width: 1440px; をベースにして、横幅 768px 以上はデスクトップ用、横幅 768px 未満はモバイル用の CSS を用意してます。更に、最近はモバイル環境でのブラウズが 60% を超えてることもあるので、モバイル用の CSS をベースにして、デスクトップ用の CSS を書き加えるスキームで仕上げてます。

はじめに・よくあるデザイン　情報を一覧表示する際、行の高さは最も大きなものに合わせて上部を揃え、各列の横幅を固定とするのが一般的である。これをHTMLで実装しようとすると画像の破線のような箱を用意して情報を敷き詰めていくだけとなり、非常に簡単であることからよく見かけるデザインである。　しかしながら、赤色の部分のように無駄な空間ができてしまい、それが大きくなるほど非常に見栄えが悪くなる。高さを無理やりそろえたデザイン　先ほどの無駄な空間を無くそうと考えた場合、他よりも数が多いタグや長くなるタイトルを削ることが真っ先に思いつくだろう。　文字数などで制限をかけてしまうのも良いが、当たり前であるが削った分ユーザーが得る情報は減ってしまう。これを許容できるかどうかは、扱う情報の性質を考えて検討する必要があるだろう。情報を削らずに無駄な空間を作らないデザイン　それでは、情報を削らずに無駄な空間を作らないデザインはできないのか。それを実現するデザインは存在しており、横幅のみを固定して、高さの制約を無くすることで実現することができる。　ただし、行の概念がなくなるため、若干実装難易度が上がる。その他、横方向には位置がそろわないため、情報が整理されていない印象を持たれないか注意する必要がある。最後に　PHP-ZONE.com では今回紹介したどのデザインでも対応可能です。部分的なカスタマイズから、サイト全体の改修まで対応可能ですので、お気軽にご相談ください。

HTMLで、できない事・できることって、どこまで出来るのか解説します。まずHTMLは、WEBサイトで言う骨組みなどに当たる部分で、ホームページを作るときは必ずと言っていいほど使います。なので、ある程度はHTMLで骨組みを作成します。それで、HTMLはどこまでの機能などがあるのかを、上げてみました。【HTML,CSSで、出来る事】：文字を入力する欄、文字の送信ボタンを、表示することができる。（文字を、ある場所に送ったりすることはHTML,CSSだけじゃ出来ない）：画像表示：ヘッダー、フッター（ハンガーメニューは、JavaScriptが必要）：文字の構成：文字の書き込み：色付け（グラデーションも）：音楽挿入：動画挿入：urlなどなどHTML,CSS、だけで出来ることは、たくさんあります。こちらが今上で書いた【HTML,CSSで、出来る事】で書いた物のなかの、『文字と動画挿入、文字の構成、文字の書き込み、画像表示、色付け、ヘッダー、フッター、』などを合わせて作ったものです。これは、HTML、CSSを使ったWEBサイトです。これは、タイトルが＜h１＞と言うもので作っていて、一番文字を大きくしています。その次に、＜h２＞で『自己紹介という文字』を＜h３＞で『〜〜〜』を書きました。こんな感じで、HTML、CSSの深掘り解説でした、ご覧頂きありがとうございます。下記が、私が投稿しているサービスです。見てみてください。

こんにちは、webサイト（ホームぺージ）に使われるHTML 、CSSなどのプログラミング言語を使って、WEBサイトなどを作ります。では早速説明したいと思います。プログラミング言語についてですか、HTML,CSS, javascriputなどあります。他にもrubyやjava、phpなどたくさんあります。webサイト作成で使う主な、プログラミング言語は、HTML,CSS,JavaScriputです。ではHTMLなんですが、HTMLを簡単に言うと骨組みといったところでしょうか、あと文字などもHTMLで書きます。CSSは、柄ですね。JavaScriptは、動きですね。ざっとこんな感じです。それで、HTMLCSSで、出来たのがこちらの写真です。こんな感じで、出来ます。大体動きをつけなくてもオシャレなサイトは作れます。まあ、これは１０分程で作った代物なので少しオシャレさには、かけます。この上のtopとかのボタン押しても普通に反応します。じゃあなんで、JavaScriptつけるの？っていう話ですよね。それは、JavaScriptを付けるとさっき言ったように、動きを付けることができます。動画をご覧ください。このようにクリックすると、開いたり閉じたりできるやつを付ける事ができます。いかがでしたでしょうか。お分かりいただけましたか。このように、HTML,CSSである程度で、できます。なのでJavaScriptは、付けたら便利ですが、絶対付けなくてもいいという感じです。ご覧いただきありがとうございます。これが私が出品しているサービスです。ご覧ください！！さっき言ったホームページ制作もやっています。

こんにちは！冬の深まる季節、寒いですね。。私の家の外でも雪が降っています。今回は、あなたのWebサイトにも少し冬の魔法をかけてみませんか？JavaScriptを使って、訪問者に雪の降る体験を提供する方法を紹介します。エンジニアではないサイト運営者の方々でも簡単に実装できるよう、技術的な言葉を避けて説明します。なぜ雪の演出を加えるのか？Webサイトに動的な要素を加えることで、訪問者の注目を引き、記憶に残りやすくします。雪が降るアニメーションは、特に冬のプロモーションやイベントにぴったりで、サイトに季節感を加えることができます。それでは、どのようにしてこの魔法を実現するのでしょうか？JavaScriptで雪を降らせるJavaScriptは、ウェブページに動きを加えるためのプログラミング言語です。この言語を使って、雪の粒を画面上に描き、ゆっくりと下に落ちるアニメーションを作ることができます。基本的な考え方は、雪の粒を表す小さな要素をたくさん作り、それらがランダムに、そして自然に画面を横切るように動かすことです。実装のステップ1. 準備: まず、あなたのWebサイトに追加するHTMLファイルとJavaScriptファイルを用意します。3. 雪の粒を作る: HTMLの中で、雪の粒を表す要素を作ります。これは、CSSを使って白い丸や星の形にすることができます。4. 動きを加える: JavaScriptを使って、これらの雪の粒に動きを加えます。雪の粒それぞれに対して、画面の上から下へとゆっくり移動するように指示します。また、ランダムに左右に揺れる動きも加えることで、より自然な雪の降り方を演出

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、YouTube、Viemo、アニメーション、音声、ナレーションなどをページに展開できます。＼リンクと埋め込み／配置した要素をインタラクティブにできます。 要素へのマウス操作で詳細情報をポップアップウィンドウに表示したり、関連Webサイトに移動できます。ブックのページから離れることなく、シームレスな情報提供ができます。 リンクと埋め込みでインタラクティブなブックにできます。＼アニメーション効果／配置した要素を回転、ズームイン/アウト、バウンスなどアニメーション効果を表現できます。 ページをより魅力的に表現でき、読者をブックに集中させることができます。＼IDとパスワード／閲覧、ダウンロード、コピー防止としてIDとパスワードを設定可能。 ＼ブック配信／パソコン、タブレット、スマートフォンでの閲覧に対応。 オンライン、オフラインで閲覧できます。＼Googleアナリティクス／ブックにトラッキングIDを設定することにより、ブックの各ページが追跡できます。 訪問閲覧者のトラフィック、ページビュー、継続時間、直帰率などのイベントが測定され、マーケティングでの指標を分析、管理できます。 また、検索エンジンにブックのタイトル、キーワ

「プログラミングって何から学べば良いかわからない‥」「プログラミングスクールって高額過ぎて踏み出せない‥」そんな風に思っていませんか？　私もそうでした。私は4人子供を育てながら小学校で教員をしていましたご存知のように教員は超絶ブラック。子供に学びを教える喜びを味わいながらも、自分の働く環境について強く疑問を持つようになりました自分を変えたい、新しい技術を学びたい。プログラミングって興味あるけど、何から始めたらいいかすらわからない。独学は挫折の連続。スクールは高額で決心がつかず、迷って動けない時期がずっとありました結局貯金をはたいて、某有名プログラミングスクールに通うことに決めましたそこでの学びは私にとって本当に有意義でした。専属の先生が一つ一つの質問に丁寧に答えてくれて、安心して学ぶことができました。子育て仕事と苦労しながら先生の支えがあってなんとか卒業できましたしかし卒業後に、ある後悔をしました。それは、「スクールが即戦力のエンジニアまで専門性を高められるほどの環境」だからこそ、私のような「基礎基本もわからない初心者にとって無駄に高額すぎる環境」だという気づきです例えるなら初心者にとってスクールは【小学生が算数を学ぶのに大学に通う】ようなもの私はプログラミングを学んだ嬉しさと、どこか満足しきれない思いを抱えて卒業しました。もしこの話を聞いて少しでも興味を持っていただいた方には、私のような思いをさせないように、私がプログラミングスクールに150万円以上費やして学んだ知識・経験から、基礎基本の部分をまとめ、お子さんから大人まで初心者の方にも分かるように、安価な値段でお教えします。

サービスを予定しています「マイ・トラベリング・ブック」についてブックのページめくりのサンプルです。「マイ・トラベリング・ブック」は、そのページに表現するコンテンツはなんでも可能です。サービスとしては、ブックのコンテンツを旅行ということにしています。今回は、ブックのページめくりの状況を動画にしましたのでご覧下さい。ページの内容は旅行ではありませんが、ページめくりのサンプルとなります。／ページめくり／PC／インフォグラフィックス素材のブック／※PCではマウスでの操作になります。／ページめくり／スマホ／GIFアニメーションのブック／※スマホ、タブレットでは指での操作になります。※横に回転すると見開きで表示されます。※「マイ・トラベリング・ブック」はHTML5、CSS、JavaScriptにて構築。「マイ・トラベリング・ブック」のサンプルができるまで、このようなサンプルを時々に投稿したいと思っています。宜しくお願いします。／名前のない空を見上げて／MISIA／hima.cover／／夏をあきらめて／サザンオールスターズ／hima.cover／こちらもご覧下さい。（以前投稿した動画）　

今回はテキストの縁取りです。デザインカンプにこんな縁取りのデザインがありました。結論から言えば、これをCSSのみで忠実に再現するのは困難でした。原因としては・縁取りの線が太めで、さらにくっきりしていることです。現在のCSSで縁取りができるプロパティは2種類あります。・text-strokeで縁取りをする。・text-shadowで影をつけていき、縁取りのように見せる。前者が圧倒的に簡単ですが、比較的新しめのプロパティで、対応ブラウザがまだ少なく、chromeでもベンダープレフィックスが必要なほどです。一つずつ解説していきます。⚫︎text-strokeで縁取りを行う場合こちらは非常に簡単で【HTML】<p>縁取り</p>【CSS】p {  -webkit-text-stroke: 2px #ff0000;  text-stroke: 2px #ff0000;}これだけで縁取りが完成します。縁取りのプロパティなだけあって、しっかり綺麗にできてます。境界線の前後に色をつけるようなので、あまり太くすると文字がつぶれていきますので注意が必要です。そういったこともあり、冒頭のような太めの縁取りは困難です。⚫︎text-shadowで縁取り風に影をつける場合基本的には影をつけるプロパティなので、結構CSSの量が多くなりますし、綺麗な表示にはならないので、ぼかさないと使えないかと思いました。【HTML】<p>縁取り</p>【CSS】p { text-shadow: 3px 3px 0px #ff0000, -3px -3px 0px #ff00

レスポンシブ対応は、現代のウェブデザインにおいて非常に重要な要素です。ユーザーが様々なデバイスや画面サイズでウェブサイトを閲覧することを考慮する必要があります。このような場面で、styled-componentsは強力なツールとなります。このライブラリを使って、Reactコンポーネントをスタイルする際にレスポンシブ対応を簡単に実現することができます。1. メディアクエリを活用したレスポンシブスタイル styled-componentsを使用すると、コンポーネント内に直接メディアクエリを埋め込むことができます。たとえば、特定の幅以下のデバイスに対してスタイルを変更したい場合、以下のように記述できます： 上記の例では、画面幅が768px以下の場合、StyledContainerコンポーネントのパディングが10pxに変更されます。 2. デバイスごとのスタイル styled-componentsを使用すると、特定のデバイスに対して異なるスタイルを適用することも可能です。以下のように、styled-componentsのcssヘルパーを使用して、特定の条件でスタイルを設定することができます： 上記の例では、StyledButtonコンポーネントにmobileプロップスが渡された場合に、フォントサイズが14pxに変更されます。 3. テーマの使用 styled-componentsは、グローバルなスタイルやテーマの管理にも適しています。テーマを使用することで、共通のスタイルやカラーパレットを一元管理できます。レスポンシブ対応においても、テーマを使用することで、異なるデバイスに適したスタイ

そのアニメーション本当に要る？Web制作においてCSS、JavaScriptを使ったアニメーションはよく見かけると思います。アニメーションは見た目にもインパクトに残りやすいですが、使いどころを間違うとそのサイトで伝えたいことが分かり辛くなる可能性があります。アニメーションを使うと分かり辛くなる例そのサイトの目的が文章を主とした情報提供である場合、アニメーションとは相性が悪いです。例えばニュースサイトやブログなどでスクロールするたびに文章がアニメーションで出てくるとどうなるでしょう？読み辛くなります。人間は文章を読む時、視線が上から下に動きます。しかし読んでいってもアニメーション待ちで下の方の文章が間に合っていないとストレスになりますし、そのサイトですべき文章での情報提供の価値が薄れてしまいます。また、初心者のポートフォリオサイトで無駄にアニメーションを使っているのがよくあります。自分の能力を見せるために動きのあるサイトを使いたくなる気持ちは分かりますがポートフォリオサイトの目的は"こんな作品を作った"、"こんな能力があります"とアピールすることが目的かと思います。それなら見やすく分かりやすいレイアウトを行いリンク先の自分の作品で適切なアニメーションを使うことができることをアピールした方が良いと思います。アニメーションを使うと効果的な例ビジュアルのみでユーザに価値提供できるようなサイトはアニメーションと相性が良いです。ファッション、フード、アニメなどなど...極端に言うと写真1枚でもそれがなんのサイトか説明できるジャンルはアニメーションと相性が良いです。日本と海外のサイトの違いと

簡単にアイコンを表示できるFont Awesome。今回は使い方の手順をご紹介いたします。一緒にやっていきましょう😊Font Awesomeのサイトhttps://　fontawesome.com/▼ヘッダーナビにある、Iconsをクリックするとさまざまなアイコンが出てきます。まずはFont AwesomeのCDNを入手！https://　cdnjs.com/libraries/font-awesome▼</>のマークのところをクリックすると必要なコードがコピーできます▼コピーしたコードは、htmlファイルのheadタグ内にペーストしますこれでFont Awesomeを使う準備は整いました！【方法1️⃣】iタグを使って表示する！使いたいアイコンを上記のFont Awesomeのサイトから選びます。https://　fontawesome.com/icons▼今回は、こちらのWeatherから選んでみます▼Freeアイコンをクリックすると、無料で使えるアイコンだけ表示されます。左上のcloudを使ってみたいのでcloudをクリック。▼iタグのところでクリックすると、コードがコピーされます。<i class="fa-solid fa-cloud"></i>をhtmlファイルのbodyタグ内にペーストするだけで、表示されます。⭐️iタグはspanでもOK。<span class="fa-solid fa-cloud"></span>でも出ます。【使用例】例えばこんなふうに使ってみる👑完成見本▼例えばこんなふうに、ヘッダーナビ

html, CSSを使っての作成のポイントを前回の記事を元にかいつまんでご紹介いたします。制作の参考になれば幸いです🌷▼完成見本はこちら今回は、こちらをどのような手順で作っていったかを説明していきます。余計なCSSをリセットするまず下記をhtmlファイルのbodyタグの中に書きました。また、htmlと同じ階層にimgフォルダを作って、その中にitem01.jpgなどを入れておきます。html<section>   <div class="item-container">    <h2>Recommended Items</h2>    <ul>     <li>      <a href="#"><img src="img/item01.jpg" alt="" />Tシャツ001</a>     </li>     <li>      <a href="#"><img src="img/item02.jpg" alt="" />Tシャツ002</a>     </li>     <li>      <a href="#"><img src="img/item03.jpg" alt="" />Tシャツ003</a>     </li>    </ul>   </div>  </section>CSSCSSはお

今回はhtmlとCSSを使って、レビューのレイアウトを作ってみます。動的に動かすわけでないので、レビューを更新したかったら自分で追加や削除をしなくてはいけませんが、とりあえずレビューを表示したいって時にいかがでしょうか？😊コピペできるようにコードも載せておきますね！よかったら参考にしてみてください🌈完成見本https://　tsuyu0102.github.io/css-sample/review-design/index.html▼1500px幅▼601px幅▼600px幅（600以下で画像を非表示にしています）html<section class="review-section">   <h2>REVIEW</h2>   <ul>    <li>     <img class="user" src="img/user01.png" alt="" />     <div class="review-area">      <p class="name">購入者さん</p>      <p class="star3"></p>      <p class="comment">いつもポイント倍や送料無料セールなどの時に利用しています。セールの時は売れ切れの商品が多いですが、メンズに絞って検索すると希にコスパの良い商品があります。対応も発送もとても早いです。リピさせて頂きます。</p>      <p class="dat

auto-fit（auto-fill）とminmaxを使ってレイアウトすれば、簡単にレスポンシブなレイアウトに！今回もコピペで使えるコード付き！一緒にやって行きましょう🎵完成見本https://　tsuyu0102.github.io/css-sample/grid-auto-fit/index.html▼1500px幅▼768px幅▼320px幅▼ホバーはこのようにしてみましたhtml<section class="item-section">   <h2>NEW ITEMS</h2>   <div>    <a href="#"><img src="img/item01.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item02.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item03.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">

CSSだけでもする〜っとした動きは作れます。今回は質問欄を押したら、解答欄がスルスル〜っと出てくるようなものをCSSだけで作ってみます！完成見本https://　tsuyu0102.github.io/css-sample/faq-accordion/index.html▼1200px幅▼601px幅▼600px幅（レスポンシブ対応にしました）html<div class="container">   <h2>Q&A</h2>   <div class="qa-container">    <input type="checkbox" id="q01" />    <label for="q01">Q01：今日注文したらいつ届きますか？</label>    <p>ご注文確定から５日前後となります。</p>   </div>   <div class="qa-container">    <input type="checkbox" id="q02" />    <label for="q02">Q02：送料はかかりますか？</label>    <p>全国一律送料無料となっております。<br />※ただし購入商品が大型、またお届け先が沖縄及び離島・その他一部地域では追加料金を加算される場合がございます。また一部の商品に限り送料をいただく場合がございます。</p>   

こんにちは、michoです。今日はWordPressで記事を書く際の「見出し」について書きたいと思います。WordPressで記事を書く際「見出し」をうまく使えていますか？「見出し」は記事においてとても大切な要素です。■なぜ「見出し」が必要？見出しがなく本文だけがずらっと書かれている記事は要点が分かりにくく、読み手の知りたい情報になかなか辿りつけなくなってしまいますよね。見出しをつけて話題を少しずつ区切ることによって、読み手にとって読みやすく、内容も把握しやすくなります。見出しを適切につけることができると、ページの滞在時間や離脱率にもいい影響があり、SEO対策にもつながるとされています。■「見出し」にはhタグを使うhタグにはh1～h6までの6種類があり、WordPressでは通常h1はタイトルに使われるので、本文にはh2以降を使います。また、hタグは検索エンジン等に記事の構成を伝える重要な要素でもあるためh2の次はh3、その次はh4というように使う順番に気をつける必要があります。■効果的な「見出し」を作るより見やすい記事にするために、h2>h3>h4と段階的にデザインを整えるとよさそうですね。見出しのデザインはCSSを追加して変更することができます。サイトのコンセプトに合わせたデザインや色味に変更してみませんか？

今回もイラストACの素材と、CSSで素敵にお飾りします！よかったら参考にしてみてくださいね🎶完成見本https://　tsuyu0102.github.io/css-sample/blinking-hearts/index.html⭐️左上、右下のテープは、固定していて、右上のハートはアニメーションで点滅させています。▼1200px幅▼480px幅▼320px幅PNG▼画像は、イラストACのこちらの素材をダウンロードしました。https://　www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewarded⭐️イラストACの利用にはアカウント（無料）が必要です。⭐️今回は、素材それぞれに色をつけて、tape.png, heart01.png, heart02.pngという名前で保存しました。それらをimgフォルダ内に入れました。大きさは変えてないです。背景は透明です。html<div class="container">   <h2>INFORMATION</h2>   <img src="img/tape.png" alt="upper-tape" class="upper-tape" />   <im

今回はイラストACから素材をダウンロードして色々装飾していきたいと思います。サイトのお飾りの参考にしてみてください⭐️完成見本https://　tsuyu0102.github.io/css-sample/floating-png/index.html▼1200px幅▼480px幅⭐️上のお飾りは背景の右上、左上に固定されていて、下の音符と星はぷかぷか浮いているようにアニメーションで動かしています。イラストACから素材をダウンロードイラストACの利用にはログイン（無料登録）が必要です。▼完成見本のお飾りは、こちらの素材を使用しました。https://　www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewardedPNGかAIだと背景が透明なのでおすすめです。▼使うパーツごとに色をつけて、png形式で保存。imgフォルダに入れました。html<div class="container">   <h2>NEW ITEM</h2>   <p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500

今回はマテリアライズというCSSフレームワークを使って、ヘッダーナビと、カード型のリンクを作ってみたいと思います。基本コピペでOK！今回も画像たっぷりでお届けします！完成見本レスポンシブレイアウトなのでそれぞれの幅の見栄えをご覧ください🎵⭐️ピンクのナビのところは上に固定してみました。スクロールしても常に上に表示されているのでいつでもアクセスできる形になっています。▼1500px幅（画像が3つ並びになっています）▼1000px幅（画像が2つ並びになっています）▼970px幅（右のナビメニューが消えて左にハンバーガーメニューが出ています）▼600px幅（画像が縦一列並びになっています）▼600px幅（ハンバーガーメニューをクリックすると左からナビが出てきます）マテリアライズのパーツ色々https://　materializecss.com/▼マテリアライズのサイトのCSSやComponentsのところにコピペで使える見本があります。今回はこれらをいくつか組み合わせて作成してみたものになります。1️⃣マテリアライズのCSSとJavaScriptをhtmlにセットする！早速作っていきます。▼まずは前回の記事を参考に、MaterializeのCSSとJavaScriptを設定しておいてくださいね🌈2️⃣jQueryを使えるようセットする！今回ハンバーガーメニューをクリックしてサイドナビが出るところでjQueryを使いたいので、使えるように設定しておきます。▼下記サイトにアクセスhttps://　cdnjs.com/libraries/jquery▼</>のマークをクリックす

マテリアライズとはCSSフレームワークの一つで、簡単にいうとCSSのセットのことです。これを使って簡単にレイアウトしていけるというものです。他にもBootstrap（ブートストラップ）というCSSフレームワークもありますが、今回はMaterializeを使ってみたいと思います！私と一緒にちょこ〜っと試してみましょう〜🎵完成見本今回は下記のようなレスポンシブレイアウトを作ってみたいと思います。▼幅が1201px以上の場合（.xl）…画像4個並ぶ▼幅が993px〜1200pxの場合（.l）…画像3個並ぶ▼幅が601px〜992pxの場合（.m）…画像2個並ぶ▼幅が600px以下の場合（.s）…画像1個並ぶこんなレスポンシブなレイアウトもクラス名をちょこっとつけるだけで出来ます。こちらの実際のコードに関しては、下記の「レスポンシブレイアウトを作ってみよう！2️⃣（.row, .col）」でご紹介しますが、まずはマテリアライズを使えるようにコードをコピペします。Materializeにアクセス最初にマテリアライズのサイトに行きます。https://　materializecss.com/htmlにMaterialize（マテリアライズ）をセットするトップページのピンクのGET STARTEDボタン、または左ナビのGetting Startedをクリック。HTML Setupのところにある、コードを丸っとコピーしてhtmlファイルにペーストします。▼そしたら下記のようになりましたが、今回は、materialize.min.cssとmaterialize.min.jsを、CDNのものを使い