MENU

Home
My Blog
About
Community
Works
Contact

Aichan Web Design Blog

Home
My Blog
About
Community
Works
Contact

ホーム
プログラミング
HTML&CSS

HTML&CSS– category –

プログラミングHTML&CSS

HTML&CSS

保護中: コーディングで簡単にポケモンゲットだぜ！

2025年4月1日
HTML&CSS

保護中: コーディングで簡単にアンパンマンが作れちゃうよ！

2025年3月13日
HTML&CSS

保護中: 波紋が広がるボタン

2025年1月22日
HTML&CSS

保護中: 拡大縮小するボタン

2025年1月22日
HTML&CSS

保護中: ホバーで背景が伸びるボタン

2025年1月22日
HTML&CSS

保護中: ふわっと点滅するボタン

2025年1月21日

12 3...6

検索

関口愛里

株式会社iris代表取締役

■Web制作会社を経営
■女性の自立をサポートするWebデザインスクール運営
■現在250名超えの女性限定のWebデザインチームを運営
■Webデザイナーを目指したい方に向けてWebデザイナーになるために必要な勉強方法〜現場のリアルを発信していきます。

カテゴリ一覧

デザイン (104)
フリーランス (3)
プログラミング (49)
未分類 (7)

タグ一覧

adobe Figma Google Chrome HTML&CSS Illustrator Photoshop VS Code Webデザイナー Webデザイン Web制作コーディングデザイン基礎バナーフォントフリーランスフリー素材ポートフォリオ制作実績

instagram

aichan_webdesign

＼すぐ使えるWebデザインの知識を毎日配信／
⁡
◇250名超webデザイナー無料コミュニティ『リスコミュ』運営
⁡
◇webデザイナー育成スクール『リスラボ』運営
⁡
◇webデザイナー歴16年
⁡
◇株式会社iris代表取締役
⁡
◇ママだって輝ける
⁡
Webデザイナー目指すなら必須👇

💡これは凄い！ページが重なる本の作り方
をIllustratorで作成しよう！
⁡
①使用する３つの色を用意し
　ページにする図形を作成する
②コピー→「前面にペースト」し色を変更する
③ 「自由変形ツール」で
　前面の図形をずらし湾曲させる
④「ブレンドオプション」でステップ数を設定する
⑤ 「変形」→「リフレクト」で
　コピーし反対のページを作る
⑥一番上のページの色をスポイトで変える
⑦ページが重なった立体的な本の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡超簡単！立体感のあるエンボス文字
をPhotoshopで作成しよう！
⁡
①画像を用意する
②文字を打ち込む
③テキストレイヤーの描画モードを｢乗算｣にする
④ベベルとエンボスの数値を調整する
⑤ドロップシャドウの数値を調整する
⑥立体感のあるエンボス加工の文字が完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←好きな「ポケモン」をコメントで教えてね🎁

今日のリールは
⁡
「HTML&CSSで動くモンスターボールを作る方法」について
解説してみたよ！

①border-radiusで赤い半円を作る
②ボールの境目の部分を作る
③擬似要素のbeforeを使って丸を重ね、ボールのボタンを作る
④border-radiusで白い半円を作る
⑤box-shadowを使って立体的な影を付ける
⑥@keyframesを使ってアニメーションを付ける
⑦動くモンスターボールの完成

簡単にCSSだけでアニメーションが付けられるよ！

今だけ、好きな「ポケモン」をコメントするだけで
動くモンスターボールのコードを全て記載したブログ記事を
🎁しちゃうよ✨

受け取って、活用してね！
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在260名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#ママwebデザイナー
#プログラミング

💡初心者必見！クラス名の命名ルール
を実践しよう！
⁡
①クラス名に使う文字について
②クラス名の頭文字に数字や記号を使わない
③クラスの命名規則は統一する
④単語を繋げない
⑤クラス名は分かりやすく
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡超簡単！雑誌風の文字の入れ方を

💡超簡単！雑誌風の文字の入れ方
をPhotoshopで実践しよう！
⁡
①左右に余白のある画像を用意する
② ペンツールで文字を入れるスペースを作成
③横書き文字ツールを選択→
　パスの内側をクリック
④文字を入力する
⑤新規レイヤーを追加し、
　ブラシツールを選択する
⑥文章の視認性を上げるための
　下地を作成していく
⑦雑誌風に文字入れした画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←【リスラボ】とコメントすると詳細が送られます✨

今日はリスラボ2期のはるちゃんにインタビューしました☺️

皆さんと同じように、最初は悩みを抱えて
私のところに相談に来てくれたところから始まりました。

たった1つの決断で人生は大きく変わります😌

そんなちょっと先輩の声が今上手くいかなくて悩んでる方の力になれば嬉しいです✨️

#Webデザイン
#webデザイナー

💡保存必須！誰でも使える生成パターン
をIllustratorで作成しよう！
⁡
①テキストツールで文字を入力する
②ウィンドウから生成パターン(Beta)を選択
③作りたいイメージのプロンプトを入力
④生成パターンの完成
⑤おまけー1
⑥おまけー2
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡これは面白い！誰でもできるラップ加工
をPhotoshopで実践しよう！
⁡
①レイヤーを追加し黒で塗りつぶす
② 「雲模様」のフィルターを選択し、
　歪みを適用する
③「フィルターギャラリー｣から
　「ラップ｣を適用する
④「レベル補正」の数値を調整する
⑤「色域指定」で「ハイライト」を選択する
⑥レイヤーを複製し描画モードを変更する
⑦ラップをかけたような加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

←Webデザイナーにセンスはいらないは嘘？

今日は良く質問をいただく
Webデザイナーにセンスはいらない？に
フォーカスして私の考えを話してます！

重要なので最後まで見てね！

——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー

さらに読み込む Instagram でフォロー

X

Tweets by mama_beyourself

関口愛里

株式会社iris代表取締役

■Web制作会社を経営
■女性の自立をサポートするWebデザインスクール運営
■現在250名超えの女性限定のWebデザインチームを運営
■Webデザイナーを目指したい方に向けてWebデザイナーになるために必要な勉強方法〜現場のリアルを発信していきます。

instagram

aichan_webdesign

＼すぐ使えるWebデザインの知識を毎日配信／
⁡
◇250名超webデザイナー無料コミュニティ『リスコミュ』運営
⁡
◇webデザイナー育成スクール『リスラボ』運営
⁡
◇webデザイナー歴16年
⁡
◇株式会社iris代表取締役
⁡
◇ママだって輝ける
⁡
Webデザイナー目指すなら必須👇

💡これは凄い！ページが重なる本の作り方
をIllustratorで作成しよう！
⁡
①使用する３つの色を用意し
　ページにする図形を作成する
②コピー→「前面にペースト」し色を変更する
③ 「自由変形ツール」で
　前面の図形をずらし湾曲させる
④「ブレンドオプション」でステップ数を設定する
⑤ 「変形」→「リフレクト」で
　コピーし反対のページを作る
⑥一番上のページの色をスポイトで変える
⑦ページが重なった立体的な本の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡超簡単！立体感のあるエンボス文字
をPhotoshopで作成しよう！
⁡
①画像を用意する
②文字を打ち込む
③テキストレイヤーの描画モードを｢乗算｣にする
④ベベルとエンボスの数値を調整する
⑤ドロップシャドウの数値を調整する
⑥立体感のあるエンボス加工の文字が完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←好きな「ポケモン」をコメントで教えてね🎁

今日のリールは
⁡
「HTML&CSSで動くモンスターボールを作る方法」について
解説してみたよ！

①border-radiusで赤い半円を作る
②ボールの境目の部分を作る
③擬似要素のbeforeを使って丸を重ね、ボールのボタンを作る
④border-radiusで白い半円を作る
⑤box-shadowを使って立体的な影を付ける
⑥@keyframesを使ってアニメーションを付ける
⑦動くモンスターボールの完成

簡単にCSSだけでアニメーションが付けられるよ！

今だけ、好きな「ポケモン」をコメントするだけで
動くモンスターボールのコードを全て記載したブログ記事を
🎁しちゃうよ✨

受け取って、活用してね！
⁡
-—————————————
AIRI SEKIGUCHI
⁡
お役立ち情報を発信するので
フォローしてね♡
" @aichan_webdesign "
⁡
⁡
ーやってることー
■現在260名を超える無料女性限定コミュニティ
（リスコミュ）を運営中
・女性限定の駆け出しデザイナーからベテランデザイナーの方までいます。
・勉強会や懇親会を月1.2回で開いてます
・興味ある方はお気軽に参加してね♡
→参加条件は最初にzoomで顔合わせ出来る方、女性、頑張りたい方、輪を乱さない方
⁡
⁡
参加方法は
①プロフィールに移動
②プロフィールのURL（LINE公式）をタップ
⁡
↓ ↓ ↓
ライン公式から友達追加して
『リスコミュ』と送ってね✨
⁡
もしくはInstagramのDMに
『リスコミュ』とメッセージしてね☺️
⁡
⁡
■ iris mama creative labo
リスラボ運営・代表
デザイン〜コーディングまで一貫して出来る強者ママを育成
⁡
⁡
■株式会社iris（Web制作会社）代表取締役
<サービス内容>
・ホームページ、LP制作
（デザイン〜コーディング）、Webサイト全般、システム開発
・印刷物（名刺、チラシ、パンフレット、
メニュー、ポスター等）
・映像編集
⁡
お問い合わせはDMからお願いします📩
⁡
⁡
-—————————————
⁡
#webデザイン
#webデザイナー
#ママwebデザイナー
#プログラミング

💡初心者必見！クラス名の命名ルール
を実践しよう！
⁡
①クラス名に使う文字について
②クラス名の頭文字に数字や記号を使わない
③クラスの命名規則は統一する
④単語を繋げない
⑤クラス名は分かりやすく
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#コーディング

💡超簡単！雑誌風の文字の入れ方を

💡超簡単！雑誌風の文字の入れ方
をPhotoshopで実践しよう！
⁡
①左右に余白のある画像を用意する
② ペンツールで文字を入れるスペースを作成
③横書き文字ツールを選択→
　パスの内側をクリック
④文字を入力する
⑤新規レイヤーを追加し、
　ブラシツールを選択する
⑥文章の視認性を上げるための
　下地を作成していく
⑦雑誌風に文字入れした画像の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

@aichan_webdesign ←【リスラボ】とコメントすると詳細が送られます✨

今日はリスラボ2期のはるちゃんにインタビューしました☺️

皆さんと同じように、最初は悩みを抱えて
私のところに相談に来てくれたところから始まりました。

たった1つの決断で人生は大きく変わります😌

そんなちょっと先輩の声が今上手くいかなくて悩んでる方の力になれば嬉しいです✨️

#Webデザイン
#webデザイナー

💡保存必須！誰でも使える生成パターン
をIllustratorで作成しよう！
⁡
①テキストツールで文字を入力する
②ウィンドウから生成パターン(Beta)を選択
③作りたいイメージのプロンプトを入力
④生成パターンの完成
⑤おまけー1
⑥おまけー2
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Illustrator

💡これは面白い！誰でもできるラップ加工
をPhotoshopで実践しよう！
⁡
①レイヤーを追加し黒で塗りつぶす
② 「雲模様」のフィルターを選択し、
　歪みを適用する
③「フィルターギャラリー｣から
　「ラップ｣を適用する
④「レベル補正」の数値を調整する
⑤「色域指定」で「ハイライト」を選択する
⑥レイヤーを複製し描画モードを変更する
⑦ラップをかけたような加工の完成
⁡
この投稿を保存して、何度も見返せるようにしてね✨
⁡
——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー
#Photoshop
#画像加工

←Webデザイナーにセンスはいらないは嘘？

今日は良く質問をいただく
Webデザイナーにセンスはいらない？に
フォーカスして私の考えを話してます！

重要なので最後まで見てね！

——————————————————————
・無料の女性限定コミュニティ「リスコミュ」を運営中
・Webデザインスクール「リスラボ」では自立するママを育成中！
・株式会社iris（Web制作会社）代表取締役
・初心者向けに超有益なWebデザインブログ（デザイン〜コーディング、WordPress化）を運営中
⁡
詳しくはプロフィールをチェックしてね！
@aichan_webdesign
⁡
#webデザイン
#webデザイナー
#ママWebデザイナー

さらに読み込む Instagram でフォロー

カテゴリ一覧

デザイン (104)
フリーランス (3)
プログラミング (49)
未分類 (7)

タグ一覧

adobe Figma Google Chrome HTML&CSS Illustrator Photoshop VS Code Webデザイナー Webデザイン Web制作コーディングデザイン基礎バナーフォントフリーランスフリー素材ポートフォリオ制作実績

Home
プライバシーポリシー

© 2024 iris inc.