🔰はじめての方へ

サイト作成

HTML

【HTML】div、p、span タグの使い分けメモ

div タグウェブページのセクションやブロックを定義p タグ段落を定義span タグ文中の一部を囲むときに使う特定のテキストを強調するときなど
HTML

【HTML】「article」の使い方メモ/コンテンツをグループ化

articleサイトの中で記事やコンテンツの独立したセクションを定義articleで囲むことで独立した要素になるページの構造を明確にし、コンテンツをグループ化するための重要なものです。<article class="post-item"> ...
CSS

【CSS】「display」 の使い方/要素の表示形式

display とはCSSのプロパティの一つで、要素の表示形式を決めるものです。わかりやすい画像をお借りしました。(サルカワさんのサイト)それぞれの意味と使い方display: blockブロックの前後には空白、縦に並ぶのが特徴・幅と高さを...
CSS

【CSS】「:target」 使い方メモ/アンカーリンク先の表示

:target とは:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。アンカーリンクは、同じページにある項目や、別のページにうつるものです。「URLのフラグメント」URLの「」のように、URLの最後につく「#」に...
CSS

【CSS】「counter-increment」使い方メモ/番号を付ける

counter-increment とは複数ある要素に番号を付けたいときに使用します。様よりお借りしました使い方疑似要素に「content: counter();」も指定します。文章の先頭に数字を入れたいとき、 li { counter-i...
CSS

【リセットCSS】概要とNormalize.cssの使い方

リセットCSSとは「Google Chrome」「Safari」「Microsoft Edge」など、それぞれ異なるブラウザでもすべて同じように、サイトが表示されるためのCSSのことです。リセットCSSを使用するのは一般的になっています。ブ...
Figma

【Figma】サイト制作の基本的な操作を簡単に説明

Figmaについてや始め方については、別の記事で紹介しているので説明を省きます。ここでは基本的な操作方法について説明していきます。日本語にする翻訳機能を使っていましたが、翻訳が大変なことになったので、検索すると日本語に変換機能がありました!...
Figma

【Figma】コンポーネント機能の使い方

Figmaについて勉強したての、独学Web初心者です。Figmaについては、別の記事でご紹介しているのでご参照ください!Figmaの概要:Figmaの基礎的な機能:今回はコンポーネント機能についてお話します。コンポーネント機能とはコンポーネ...
サイト作成

サイト制作/各パーツの名前を知っておく

Web初心者なのですが、独学でやっているため、サイトのそれぞれの要素の名前がわからず、なんとなく制作していました。チームでやる際に、これでは私しかわからない!と思い、簡単にまとめてみました!ホームページ と サイトよく聞く「ホームページ」似...
Figma

ページがださい!素敵なサイトのデザインを作るFigmaの始め方

Web初心者なのですが、自分でなにも考えずに「あこれもいれたい!」「これも!」ってやっていたら、統一感のないページだったり、デザイン無知のため質素なページになってしまいます。私の成長日記もかねて、記録していこうかなと思います!一から作った初...