2026年01月クラス
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>スマホ特化型サイトの作成</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
「State of CSS」とは、CSSの最新トレンドや開発者の利用状況を調査・発表する年次調査サイトのことです。 Web開発者向けにCSSの機能の認知度や利用率を調査し、トレンドを可視化しています。 開発者が最新のCSS機能を「知っているか」「使っているか」を把…
See the Pen 弁当ボタン by yachin29 (@yachin29) on CodePen. www.xserver.ne.jp ginneko-atelier.com
通常のCSS Gridではカード型レイアウトなどのアイテム（子要素）の縦位置を揃える事がとても難しく、コンテンツによってタイトルの文字数が異なる場合など、高さを指定しないとズレてしまいます。 2024年9月現在、主要ブラウザはすべてsubgridに対応している…
今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景（多くはbody要素を固定）を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはスマホ特化型のの…
See the Pen q-chan by yachin29 (@yachin29) on CodePen. tympanus.netgardenstudio.com.brjakearchibald.com SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は…
制作物：3連ガチャ 使用するJavaScriptの機能 ・for文 ・if文 ・配列 ・Math.randam 1.使用する画像のランクとファイル名を整理する ランクの配列名 star3が2名、排出率5% 01.png,02.png star2が4名、排出率35% 03.png,04.png,05.png,06.png star1が6名、排…
CSSリセットとは、デフォルトでブラウザに付いているスタイルを打ち消す（リセットする）CSSのことです。 すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。CSSリセットはブ…
2026年02月19日～ 制作物：JavaScriptを使った動的ページサイト テーマ：ドーナツショップ 参考サイト：https://racines-b-s.com/店舗名：Felica Bread&Salad メインコピー：自然の恵みを味わう、おいしいご褒美 リード文：厳選されたオーガニック素材で作る…
プログラムとは？いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。 プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解し…
最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryのアニメーションはカクカクでちょっと重い jQueryの特徴の1つ…
最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。 URLの正規化 例えば、キリンのwebサ…
qiita.com レスポンシブデザインとは？ レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にC…
Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合も…
CSS（Cascading Style Sheets） CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…
Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
テーブル table要素を使うことで、表を作成することができます。 表内の行とセルは、table要素内に配置するtr要素とtd要素（th要素）で示します。 caption要素は、表のキャプション（タイトルや説明）を表します。table要素＝表全体を示す要素です。表の大き…
Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の３つ 画像を作る。 画像を補正する。 画像を加工する。 ・Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 アイコンをダブルクリック等で起動。 この…
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。 もちろ…
