🔰はじめての方へ

Web初心者

CSS

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

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

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

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

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

counter-increment とは 複数ある要素に番号を付けたいときに使用します。 様よりお借りしました 使い方 疑似要素に「content: counter();」も指定します。 文章の先頭に数字を入れたいとき、 li { coun...
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初心者なのですが、自分でなにも考えずに「あこれもいれたい!」「これも!」ってやっていたら、統一感のないページだったり、デザイン無知のため質素なページになってしまいます。 私の成長日記もかねて、記録していこうかなと思います! 一から作っ...
サイト作成

面白い!Googleサーチコンソールの設定方法

Googleサーチコンソールとは 無料で使用できる、Google検索でのサイトのパフォーマンスを分析できるツールのことです。 検索順位やクリック数、表示回数などがわかります。 また、検索ページに掲載されているか否かもわかり、掲載されていない...