長崎県で女性向けホームページ制作を主にされているIKUMI designさんの紹介です。素敵すぎる報告をいただいたので紹介させていただきます。ちいさなWebデザイン教室で出会った郁美さん。 STUDIOショーケースに制作したホームページが掲載されているのでWebデザイナーさんは必見です。ぜひご参考にしてくださいね。
|
https://twitter.com/chiiweb_ |
|---|---|
|
https://www.instagram.com/chiiweb_/ |
WordPress標準カラムを横スクロールにするCSSカスタマイズ
WordPressのテーマカスタマイズを利用してサイトを作った際に、プランの一覧を表示させることがありますよね。 先日この質問がありましたのでブログでもシェアさせていただきます WordPress標準カラム 次のセクショ ……
【WordPress】FAQを追加・編集する為のSmart Custom Fieldsの使い方
完成イメージ 今回実装したいFAQのイメージです。 （画像なので動きません） よく見かけるタイプの、開閉（アコーディオン）式QandAです。 QやAをカスタムフィールドで編集可能にし、さらに、質問が増える可能性も考慮し項 ……
【WordPress】FAQを追加・編集する為のSmart Custom Fieldsの使い方
完成イメージ 今回実装したいFAQのイメージです。 （画像なので動きません） よく見かけるタイプの、開閉（アコーディオン）式QandAです。 QやAをカスタムフィールドで編集可能にし、さらに、質問が増える可能性も考慮し項 ……
Instagram投稿、ブログヘッダー、広告などに使えるビジネス用テンプレです。 全て無料ですのでぜひ一部変更してご使用ください リンクがまだのものは現在未公開ですので少々お待ちくださいませ。
ちいウェブではクリエイター紹介ページをただ今制作中です。 その前に、参加メンバーさんの紹介をこのページでさせていただきます。 西谷慶子さん リンクまとめページ 最初知り合いしか入っていなかった教室でしたが、初めて外部の方 ……
【1000人までにすることって？】11万人フォロワーアカウントを運営するえれなさんにInstagram運用についてお話していただきました
こんにちは！ 今月のちいウェブオンライン会は、特別版でした。 えれなさんがインスタ運用代行をしているアカウントが、なんと11万人フォロワーさんがいるということで、驚きのあまりお願いした企画回でした。 インスタを更新してい ……
【1000人までにすることって？】11万人フォロワーアカウントを運営するえれなさんにInstagram運用についてお話していただきました
こんにちは！ 今月のちいウェブオンライン会は、特別版でした。 えれなさんがインスタ運用代行をしているアカウントが、なんと11万人フォロワーさんがいるということで、驚きのあまりお願いした企画回でした。 インスタを更新してい ……
今日はお役立ちコードの投稿ではなく、最近考えていることを文章として残したいと思います。 最近、英会話の教室に通っています。 月に2回のレッスンで、マンツーマンではなく、もう1名授業を受ける方と2名で授業を受けています。 ……
↑hoverしてね ゆらゆらウェーブアニメーションをCSSのみで作ります。 htmlでは波を入れる箱を用意します。 CSSで、箱にスタイルをあてます。 波は、疑似要素::beforeを使って作成します。 position ……
0から100へ【jQuery】を利用したカウントアニメーション
今回はこれを作ります ↑リロード（更新）してみてください 0から100まで数字を動かすアニメーションです。 これは、jQueryを使っています。 jQueryを読み込んだ状態で記述してくださいね まずはhtmlです。 C ……
こんな風に桜の花びらを散らすアニメーションです。 コピーして使ってください htmlはこちらです。 今回はこんな感じでimgにしてみました。 用意したのは桜の花びら4種類です。 この時点でもう可愛いですよね で、これを散 ……
【CSS】マウスオンでテキストがネオンのように光るアニメーション
LINK 今日はこれを作っていきます。 hoverしてみてね htmlはリンクを貼るだけです。 CSSもめっちゃ簡単 hoverしたタイミングで、text-shadowを使ってネオンっぽくしています。 HAPPY .ne ……
自分で考えた【hoverアニメーション】で差別化♡シンプルなのにこだわってる風CSS
このhoverアニメを作っていきます。 hoverしてみてね hoverアニメーションの作り方 これを作るのに必要なパーツは以下の2つです。 円 アイコン この2つをhtmlでマークアップし、CSSで変化をつけてアニメー ……
次のようなデザインをコーディングする場合あなたならどうしますか？ CONCEPT beforeを使って擬似要素を作り、ボーダーにする方法です。 ではコードを見ていきましょう。 h2はセンター配置しておきます。 「/」をp ……
【CSS】やってみたくなるSNSシェアボタンのアニメーション
↓こんなボタンを作っていくよ マウスホバーで隠れているアイコンたちが出現するボタンです。 htmlの考え方 これを作るのに必要なパーツは、角丸長方形とアイコンたちですよね。 アイコンの上に角丸長方形が乗っていて、マウスオ ……
コミュニティに参加するほどではないけれど、相談したいことがあったり、質問したいことがある方の為に、zoomを利用した1時間の単発レッスンをご用意しています。 5,500円/1時間 ご注意事項 こちらのレッスンは以下の時間 ……
コミュニティに参加するほどではないけれど、相談したいことがあったり、質問したいことがある方の為に、zoomを利用した1時間の単発レッスンをご用意しています。 5,500円/1時間 ご注意事項 こちらのレッスンは以下の時間 ……
CSSでよく使う単位についてまとめます。 絶対的なサイズの単位 px Pixels ピクセル デザインツールでフォントサイズを確認し、16pxなら、font-size: 16px;と指定可能です。 相対的なサイズの単位 ……
こんにちは。 WebクリエイターをしているMarieです。 今年、女性起業家さん向けの新サービスを提供予定の為、そのモニターさまを募集いたします。 概要 ご質問、ご相談はmmDesignホームページお問合せよりお送りくだ ……
かなり放置していたInstagramの投稿を再開しました。 そこで色々とメモしておきたいことが出てきたので記事にまとめてみます。 ただ、こちらの記事は有料とさせていただきます。 前回のInstagram考察記事（有料）は ……
【CSS】Instagram風フレームコーディングはどうやる？
写真を配置するときに、フレームどうしようかな？とデザインで悩むことってありませんか？ そんな時の一案として、Instagram風のフレームはどうでしょうか 外枠にボックスシャドウを入れることで、抜け感を出すことができます ……
最近は無料で使用できるフォントがとても充実していて、Webフォントとして使用できるものもたくさんあり、本当にありがたいですよね。 そんな中、欲しいなーと思わせたフォントたちを紹介します。 フリーランスになってから購入しま ……
独学でデザインの勉強をすると、中々デザインのフィードバックを受ける機会がないかと思います。 そんな時はちいさなWebデザイン教室へ デザインの添削は回数制限なく受け付けております。 先日メンバーさんのデザイン添削をしまし ……
昨年12月の半ばにCanvaクリエイターになりました。 少しずつ隙間時間にテンプレートを作成するのがもはや趣味となり、ストックができてきたのでこの場で紹介させてください 画像clickでテンプレートリンクに飛びますので、 ……
要素の余白paddingのつけ方【コーディング初心者さんへ】
paddingとmarginのつけ方で1つポイントがあります。 初心者さん向けの内容です 余白は親要素に 以下はよくあるレイアウトです。 このレイアウトあなたならどういう風にコーディングしますか？ こういう風に、左と右に ……
LPのファーストビューデザイン、メンバーまほさんの作品を紹介
webデザインコミュニティちいウェブでは、月に1度オンラインでのワークショップを開催しています。 毎回テーマを決め、参加者の方とお話しながら制作し、終了後に作ったものを見せ合うという楽しい会でございます 昨年の夏頃に、「 ……
2022年1月頃に、1つのテーマでLPデザインを作るという企画をしていました。 その時にちいウェブメンバーさんが実際に作られた作品をお見せします＾＾ こちらで作成したデザインは、セールス目的のランディングページではなく、 ……
なんとこのちいさなwebデザイン教室は今年で3期目。 メンバーさんに企画の参加を募り、それぞれ「2022年やりたいこと」をテーマに出してもらったデザインをまとめてクリアファイルにするという企画です。 完成したクリアファイ ……
お久しぶりです。 あっという間にもう年末が来るので焦っています。 明日から息子が冬休みになるので、ゆっくりブログを書く時間が取れなくなるかもしれないので、少し早いですが2022年の振り返りをしてみようと思います。 だいた ……
Canvaクリエイターになりました これまでデザインのメインはAdobeのPhotoshopで行ってきましたが、この度Canvaクリエイターになりましたので、Canvaを触り始めました Canvaプロフィールページはこち ……
縁取りの文字をつくるよ！ 今日はこんな縁取り文字をcssで作ってみます。 縁取り文字を作るプロパティ text-stroke text-strokeを使います。 今年もあと少し text-strokeは縁取り文字を作れま ……
twitterの代わりにWordPressを使って今の気持ちを投稿してみる
twitterは苦手だけどたまに呟きたい 私は、会話の中でSNSの話題が出たら都度言っているのですが、twitterが苦手なんです。 と言っても、twitterに限らずSNS全般が苦手で、Webデザインコミュニティの運営 ……
はじめてコーディング ①そもそもコーディングって何？ ②コーディングに必要なものnow コーディングに必要なものは、コーディングに使うエディタとデザインデータです。 コーディングエディタ 前回の記事、①そもそもコーディン ……
コーディング入門に役立つような投稿をスタートします コーディングが本当に”初めての方“が、コーディングができるようになるまでの手助けになるような記事を投稿したいです なぜならば、このブログにアクセ ……
新規サイト作成時ブログはアメブロとWordPressどちらが良い？
先日ちいウェブ内でいただいた質問ですが、個人的に色々考えるところがあったので敢えてテーマにして書いてみることにしました。 今回の質問内容 今回の質問内容を整理しますと、 このような感じです。 私はアメブロを使ったことがな ……
SVGって何が便利なの？どうやって作る？では、ベクターデータをSVGで書き出して使用する方法を見てきました。 今回は、SVGを使って簡単な形を作ってみるということをしたいと思います。 今回作るのは、円、三角形、星です。 ……
前回の記事、SVGアニメーションって何？どうやって使うの？では、SVGのシンプルなアニメーションを紹介しました。 SVGは、XMLベースの画像形式なので、cssを使えます。 カラーの変更をする必要がある画像等にはとても便 ……
↓こんなアニメーションを作ってみます SVGアニメーションって何？ SVGアニメーションは、SVGで書き出したデータをcssのアニメーションを使って動かします。 “SVGでの書き出し”は、慣れてい ……
実際のサイトで使われているtableデザイン例+コピペ用【css】
実際のサイトで使われているテーブルをまとめてみます♫ tableは、会社概要や、クリニックの診療時間などに使われていることが多いですよね。 デザイン時の参考にしてみてくださいね＾＾ 横線のみのシンプルな表 募集職種 地域 ……
今日は、テキストを右から左に動かすcssアニメーションを見てみませう。 ちょっとしたお知らせなどを流す時に使ったりされていますよね＾＾ cssのアニメーションを使う テキストを流していますよー٩( ᐛ )و xxxx.x ……
今日は、テキストを右から左に動かすcssアニメーションを見てみませう。 ちょっとしたお知らせなどを流す時に使ったりされていますよね＾＾ cssのアニメーションを使う テキストを流していますよー٩( ᐛ )و xxxx.x ……
【CSS】transitionを利用して背景を徐々に表示させる
transitionとanimationの違いtransitionの使い方transitionを使ったhoverアニメtransitionは待ち時間も設定できる画面に要素が入ったら背景を表示させる要素が画面内に入ったらc ……
【css】object-view-box を使って画像の好きな場所をトリミングする
画像のトリミングは、background-imageを使ったり、object-fitを使ったり、親につけるoverflow:hiddenを利用したりといくつか方法があります。 今回は、object-view-boxという ……
cssで点滅するアニメーション点滅＝不透明度を変更する 星をテーマにするので、この記事の背景を暗くしてみました。 暗い背景に、白いものがあると目立ちますね 星画像を点滅させると、キラキラしているっぽく見えます。 cssで ……
さてさて！本題に入ります。 インライン要素の中央配置インライン要素を左右中央にするインライン要素を左右中央にし、高さも中央にする1.paddingを使う2.vertical-alignを使う3.display: flex ……
ヒヤリングについての不安ヒヤリングシートについてヒヤリング、実際どんな風にしているかヒヤリングシートをどう作ったら良いか分からない ヒヤリングについての不安 フリーランスになったばかりのデザイナーさんの中には、ヒヤリング ……
サイトのデザインをするときに、見出しだけを見たい時ってありませんか？そう思って集めてみました。 cssも添付しますのでコピーして使ってください。 htmlは追記がない場合共通です。↓ CONCEPT 超シンプルな見出し ……
大学生の頃、ホームページビルダーというホームページ制作ソフトを使って、サークルのサイトを作成するということが流行っていました。 私もホームページビルダーを使ってサイトを作って遊んだりしていました。 本当に記憶が曖昧なので ……
吹き出しは、長方形＋三角形で作れます。 背景に色をつけて、三角形を擬似要素で作成しくっつけると吹き出しになるのです 三角形について簡単に説明しておきます。 cssで三角形を作るには、borderの性質を知る実は簡単な三角 ……
↑今回はこれを作っていくよ！ 目次です。 まずはimgで写真を入れる擬似要素（::before）で長方形を作成し、配置しますコピペ用コード まずはimgで写真を入れる 写真の下に同サイズの長方形を配置すると同じ手順で、擬 ……
オススメの本カテゴリに入れてるけど、特にオススメはしません。笑 自分自身が読んで最近で一番面白い本だったので、文章にして残しておきたいと思いました。 1％の努力 2ちゃんねるの創始者 私自身は、2ちゃんねるという掲示板の ……
擬似要素で長方形を作成し、配置する 画像をimgで表示し、擬似要素を使ってブルーの長方形を作ります。 photoにposition: relative;を設定し、基準にします。 max-widthはimgのサイズを指定し ……
今回の目次です！ 擬似要素（::after）で長方形を作成し、配置します.photoを基準とする擬似要素で長方形の箱を作るコピペ用コード ↑今回はこれを作っていきます！ 擬似要素（::after）で長方形を作成し、配置し ……
ご存知でしょうか？ アニメ「とらドラ！」。 私も若かりし頃はアニメが大好きでよく見ていて、とらドラ！はリアルタイムで見ていました。 プレパレードもバニラソルトも歌っていました。 が、結末とか途中どうだとか全く覚えてなかっ ……
お久しぶりでございます。 色々書きたいことはあるのですが、今日AirPods Proを初めて使ってみてテンションが上がったので投稿します。 ワイヤレスイヤホンはほぼ初めて 実はワイヤレスイヤホンはほぼ初めてです。 なぜ& ……
cssでグラデーションをつけられますが、文字にもつけられます。 今回は両方の使い方を書いてみます。 背景にグラデーションをつける 上から下に向かうグラデーション 背景です backgroundにlinear-gradie ……
大阪人は実は恥ずかしがり屋？ 大阪の人あるあるで、「大阪弁をなおさない」みたいなことをよく見かけるんですけど、大阪人の感覚としては、日本人が英語話せないのと同じ感覚かと思います。 日本人が英語の正しい発音をするのってなん ……
コーディング練習用のPhotoshopデザインデータです。 テキスト部分を好きに変更して、自由にコーディングの練習をしてみてください。 ダウンロードする コーディング例は後日更新しようと思っています♫
サブディレクトリ内のWordPressを別ディレクトリから引用する実例静的ページにWordPressの新着記事を表示させるまでの流れWordPress記事を表示させたいhtmlファイルをPHP化WordPressの記述を ……
Google Search Console Team「新しいモバイルユーザビリティの問題が検出されました」
それはある朝、目を覚ましてすぐいつも通りメールチェックをするわたしの目に飛び込んできたのは、Googleサチコチームさんからの1件のメッセージ。 https://chiiweb.net/ で新しい モバイル ユーザビリテ ……
昨日ちょろっと書いたんですけど、多言語化しようとして入れたプラグインの操作をミスってしまって、当ブログの画像が複製されたり、記事が複製されたりしたんですね。 不要な画像を消そうと思って、記事に未添付の画像を消していったん ……
プラグインGTranslateを使用してブログに翻訳機能をつけてみた
わたしは今、一生懸命英語を勉強している訳ですが、そういえばせっかく英語を勉強してるんだから、これを機にブログの多言語化を図ってみよう！と思い立ち、今日色々試していました。 多言語化と言っても、日本語と英語の2言語のみで検 ……
突然ですがわたしには大好きなドラマがあります。 アメリカのドラマThe O.C.です。 Amazonへ
カラム落ちとはhtmlはこんな感じcssはこちらまとめ カラム落ちとは 横に3つ並んで折り返して次の行にまた3つ並んで…のような配列を3カラムと呼んだりします。 こんな感じです。 簡単に説明するとカラム落ちと ……
突然ですがコロナ禍になってからほとんど旅行に行ってないです。 息子が小学生になる前の春休みにネスタリスタ神戸に行った以来かもしれないです。 意外とフットワーク重めの我が家です。 アクティブに思われているかもしれませんが、 ……
突然ですがコロナ禍になってからほとんど旅行に行ってないです。 息子が小学生になる前の春休みにネスタリスタ神戸に行った以来かもしれないです。 意外とフットワーク重めの我が家です。 アクティブに思われているかもしれませんが、 ……
普段からこれって他の人はどうなんだろう？と思うことがあったりします。 その中の一つなのですが、 私はドラマや映画やアニメ、漫画も大好きなのですが、そのストーリーの中で、「人が亡くなること」がすごく辛いんです。 特に自分が ……
いい感じでブログ投稿してたのに滞ったよー やっぱりインスタの投稿始めるとなかなか厳しいですね と言い訳を入れつつ、今回は、オススメできる本を紹介してみます。 webデザインに活きてくるか分からないので「本好きのわたしが「 ……
8月27日よりInstagramの投稿を再開しましたー！！ 現在毎日午前9時に1投稿UPしています。 投稿は事前にまとめて数日分作成し、クリエイタースタジオから予約投稿しています。 ストーリーズの更新は、投稿がUPされた ……
8月27日よりInstagramの投稿を再開しましたー！！ 現在毎日午前9時に1投稿UPしています。 投稿は事前にまとめて数日分作成し、クリエイタースタジオから予約投稿しています。 ストーリーズの更新は、投稿がUPされた ……
【Photoshop】トーンカーブだけの加工でこんなに変わる
今回は、写真素材サイトUnsplashからダウンロードした写真素材を「トーンカーブ」のみで加工して紹介します＾＾ 使用する写真は、「Woman」という検索ワードで検索して出てきた女性の写真です。 Unsplashはフリー ……
マウスオンした時に、画像を大きくする方法を紹介します＾＾ このブログの一覧ページに使ってるやつですね。 マウスオンすると、画像が拡大されたみたいに見えるやつです。 ↑これですね＾＾ マウスオンしてみてください。 例えば、 ……
今回は、長方形の画像を角丸で表示させたい時のcssを見ていきます。 border-radiusを使う 角丸にするには「border-radius」を使います。 「overflow: hidden;」を合わせて指定してあげ ……
前回、職場に関するストレスについての記事を投稿しました。 書いてる時に思い出さなかったのですが、わたしが職場で1番と言っていいほどストレスを感じることがあります。 それは かかっている音問題 です。 わたし、集中したい時 ……
職場の人間関係のストレスをなくす為にフリーランスという選択肢
これまで社会人として、色々な職場で働いて来ました。 フリーランスになってから、早くも3年が経とうとしています。 はっきり言えることは、「今が一番楽しい」ということです 今回は、今、「職場の人間関係に悩んでいる」というあな ……
vwという単位があります。 vwは、Viewport Widthを略したもので、簡単に言うとウインドウ画面サイズに基いた単位です。 100vwが画面幅いっぱい（100%）のことを指します。 例えばその時のウインドウサイズ ……
最近テキストが半分隠れていたり、上下に分割されていたりするサイトをよく見かけます。 上下分割は、上用と下用でテキストをダブルで用意していたり、分割しているように見えるように線が上から引かれていたりします。 今回は、半分隠 ……
以前から障害で繋がらなくなったりすることが多くて困っていたネット回線から、他社回線に変更しました。 その工事が朝一で入っていましたので、夫に対応をお願いして、わたしが娘を保育園まで連れて行きました。 娘を預かっていただい ……
ページ内リンクとはリンクの貼り方ページトップボタンWordPress記事の場合 リンクの貼り方の種類についてはこちらの記事をご覧ください★ ページ内リンクとは ページ内リンクは、その名の通り「ページ内を移動するリンク」で ……
スムーススクロールは、ページ内リンクをクリックした時に、ビュンッて場所に移動するんじゃなくって、スルスル〜〜〜と移動する為につける動きのことです。 ページトップに戻るボタンやナビゲーションでも、ページ内を移動する時にはつ ……
【html】リンクの貼り方〜aタグについて知っておきたいこと
リンクについてこれくらい知っておけばいいかな、という情報をまとめますので、お気軽に覗いていってくださいね。 リンクを貼るときに使うaタグ（<a>）について見ていきます。 aタグについてリンク先URL：絶対パスと相対 ……
そもそもWordPressって何？ブログを投稿する仕組みサイト更新について簡単に更新する仕組み最後に そもそもWordPressって何？ WordPressについて簡単に説明します。 WordPressは、PHPという言 ……
WordPressでslickスライダーの下に開く余白はプラグインSmushが原因でした!!
ちなみにslickとは、超簡単にスライダーを実装できるjQueryのプラグインです。 （このプラグインは、WordPressのプラグインという意味ではありません。） レスポンシブにも対応していて、簡単に使えるのでお気に入 ……
まとめ【これからWebデザイナーを目指すあなたへ】Webデザイナーってどんな感じか
これからWebデザインを学ぶ方に知ってほしい情報をまとめました。 Webデザイナーという職業について、どんなイメージをお持ちでしょうか？ 名前に「デザイナー」とついているので、なんとなくカッコ良さげな雰囲気はありますよね ……
Webデザイナーとはデザインとコーディングをする仕事デザインコーディングWebサイトの制作WordPressテーマの構築広告バナーやブログヘッダーデザインなどの仕事も制作会社に入ったらまとめ Webデザイナーとは Web ……
Webサイト制作にはすごくざっくり分けて「1.企画」「2.デザイン」「3.コーディング」があります。 この流れを解説していきまっす。 1.企画サイトコンセプトペルソナ色サイトマップワイヤーフレーム企画について2.デザイン ……
今から書く3つのポイントを押さえておけば、まとまったデザインを作りやすいです♫ もしまだ意識していなかったら、意識してデザインしてみてくださいね。 デザイン時に注意する3点とは色メインカラーの決定ベースカラーアクセントカ ……
レンタルサーバーを契約すると、どこのサーバーも、Web上からファイルの上げ下げをすることができるよ。 今日の気分なんだか下がり気味〜下げー ではなくてダウンロードのことですね。 てことで早速いきますね。 エックスサーバー ……
【簡単！】エックスサーバーでのWordPressブログの始め方
わたしは今エックスサーバーを使用しているので、エックスサーバーでの始め方になっております。 WordPressの「簡単インストール」 ＼PRです！／ WordPressの「簡単インストール」 ※こちらはエックスサーバー契 ……
WordPressのインストールは、ドメイン直下（ルート）じゃない方がいいよ
最近はサーバーのコンパネから、簡単にインストールできるようになっているWordPress。 インストールの際に、ドメインの後にフォルダを作成し、その中にWordPressファイルをインストールした方が良いですよ〜〜、とい ……
フリーランスのWebデザイナーはSNSをやった方が良いかについて
Instagramを放置し、どんどんフォロワーさんが減っているMarieです。 昨日2週間以上ぶりくらいに投稿して、リーチ全然ダメだったよ。 過去、一番リーチが多かったのがこちら↓ リーチ40,343で、発見からは38, ……
わたしはどこにでもいる平凡な2児のママ。 仕事はフリーのWebデザイナー兼、Web制作講師業をしています。 突然ですが、 わたし、出っ歯がコンプレックスなんだよね… さてあなたは、友達からこう言われたら何て返 ……
本って、ほんっといいよね〜 オススメの本はありますか？とよく聞かれるのでここにまとめておきます。 新しいの見つけたら、ここに追加していこうと思います。 オススメの本一覧ニューヨークのアートディレクターがいま、日本のビジネ ……
webデザイン制作【初心者さん】にオススメのDreamweaverの魅力
Dreamweaverの回し者ではありません。 むしろ回し者になりたいWebデザイナーMarieです。 ではいきますよっ！ ユーザーの少ないAdobeのDreamweaverDreamweaverをオススメする1番の理由 ……
先に結論をいいますと…。 わたしが考える、コーディングスキルのUP方法は、とにかくコーディングをすることと、それができない場合は、人のコードを見ること、人がコーディングしているところを見ることです。 これにつ ……
テキストに柄をマスクさせる テキストを書く まずは、柄を適用させる為のテキストを用意してください。 普通にテキストツールで文字を入力すればOKです。 画像を用意してドラッグする 文字を書いたら、この文字に載せたい柄の画像 ……
【初心者さん向け】制作したホームページを公開するにはどうすればいい？
ホームページを公開するにはサーバーとドメインについてサーバーとはドメインとはオススメのレンタルサーバーサーバーにファイルをアップロードする方法FTPとはFTPソフトについてDreamweaverFil
6月16日にスタートした水挿しスイカぺぺですが、ようやくはっきりと根が確認できる状態になりました。 2本水挿ししていましたが、2本とも発根をしっかり確認できました。 以前から、「これが根になるのかなぁ
Webデザイナーが注目されるようにママがWebデザイナーになるメリット在宅で働くフリーランスを目指せるママがWebデザイナーとして働くデメリット制作会社勤務の場合のデメリットフリーランスの場合のデメリ
ママWebデザイナーがおすすめする【Webデザインスクール】
こんにちは。大阪でフリーランスのWebデザイナーをしているMarieです。 Webデザイン業界で10年ほどお仕事をしています。 制作会社勤務・企業のインハウスデザイナーを経て、2019年に独立（フリー
「ブログリーダー」を活用して、まりえさんをフォローしませんか？
長崎県で女性向けホームページ制作を主にされているIKUMI designさんの紹介です。素敵すぎる報告をいただいたので紹介させていただきます。ちいさなWebデザイン教室で出会った郁美さん。 STUDIOショーケースに制作したホームページが掲載されているのでWebデザイナーさんは必見です。ぜひご参考にしてくださいね。
先日ラジオボタンのカスタムについての記事をUPしました。 フォームのラジオボタンをCSSカスタムで可愛くする
お問い合わせフォームのラジオボタンをカスタムしたい時のCSSコードを紹介しています。デフォルトのラジオボタンを見えない状態にし、新たに選択前、選択後のボタンを作成します。デザインに合わせてボタンを変更したい時の参考にご利用ください。HTML、CSSコードはコピーしていただいてOKです。
苦しい 自分では何らかの病気だと思っているのですが、普通のTシャツが着られません。 首の上にあたるような服が着
今回のテーマはご相談いただいた内容です。 WordPressに自動で更新が入って、旧サイトに戻ってしまう？ ま
ちいさなwebデザイン教室は、webデザイン初心者さんから、既に活躍されている方まで幅広く集まるオンラインweb教室＆webデザイナーの為のコミュニティです。「習い事」のような敷居の低いWebデザインスクールも兼ねています。
CanvaがPhotoshopよりも便利だと感じるポイントを紹介しています。良い点、悪い点はどちらにもありますが、デザインをするときは両方を使い分けるのがベストだと思っています。細かい部分やこだわりたい部分をPhotoshopで作り、トリミング等をCanvaでサクッと作るとかかなり便利だと思います。
こんにちは。 いつもブログを読んでいただきありがとうございます 今日はタイトルについての個人的な見解を述べたい
ちいウェブログ特別版インタビュー 札幌出身で現在は名古屋に住んでおります。大学卒業後に5年間ANAでCAとして
女性向け投稿を作りたい方用のCanvaテンプレートを作成しました。 Fancy Orange 13枚セット、Natural Pink24枚セットです。ぜひご利用くださいませ♩Canvaを利用して文字や画像をカスタマイズしてご利用いただけます。
デザインの参考に、背景を変えるだけでデザインに与える印象が異なるという、参考画像を用意しました。どんな印象を受けるかご覧ください♩比較デザイン画像を複数置いてます。Webデザインの参考として使える背景比較画像まとめです。リクエストはコメントにお願いします。
明けましておめでとうございます。 今年もよろしくお願い申し上げます。 あっという間に2024年になりました。
デザインにオススメの本 レタースペーシング タイポグラフィにおける文字間調整の考え方 これ素敵な本だと思います
今ヒロアカアニメ見ています。 タイトルは、S4の66話で出てくるセリフです。 インターンとして働きたい主人公が
静的サイトにお問い合わせフォームをつけたい場合、いくつか選択肢があります。 今回は、その選択肢の1つである、"
こちらの記事で、基本のハンバーガーメニューを紹介しました。 基本のハンバーガーメニューエフェクトまとめ /me
コピーですぐに使えるハンバーガーメニューエフェクトまとめです。HTML・CSS・jQueryのコピペ用コードを紹介します。
Dreamweaverがちょくちょく固まるようになってきた。 Dreamweaver民さんいかがでしょうか。
タブはシンプルにjQueryで実装できます。 さらに、別ページから特定のタブを開いた状態でのリンクを実装する方法も紹介します。 HTML・jQuery・CSSコードを紹介しています。見本（デモ）もありますので参考にご利用くださいませ。
実は30代になってやっと気付いたことが色々ありまして。 私はどうやら「音」が普通の人よりも苦手だということです
WordPressのテーマカスタマイズを利用してサイトを作った際に、プランの一覧を表示させることがありますよね。 先日この質問がありましたのでブログでもシェアさせていただきます WordPress標準カラム 次のセクショ ……
完成イメージ 今回実装したいFAQのイメージです。 （画像なので動きません） よく見かけるタイプの、開閉（アコーディオン）式QandAです。 QやAをカスタムフィールドで編集可能にし、さらに、質問が増える可能性も考慮し項 ……
完成イメージ 今回実装したいFAQのイメージです。 （画像なので動きません） よく見かけるタイプの、開閉（アコーディオン）式QandAです。 QやAをカスタムフィールドで編集可能にし、さらに、質問が増える可能性も考慮し項 ……
Instagram投稿、ブログヘッダー、広告などに使えるビジネス用テンプレです。 全て無料ですのでぜひ一部変更してご使用ください リンクがまだのものは現在未公開ですので少々お待ちくださいませ。
ちいウェブではクリエイター紹介ページをただ今制作中です。 その前に、参加メンバーさんの紹介をこのページでさせていただきます。 西谷慶子さん リンクまとめページ 最初知り合いしか入っていなかった教室でしたが、初めて外部の方 ……
こんにちは！ 今月のちいウェブオンライン会は、特別版でした。 えれなさんがインスタ運用代行をしているアカウントが、なんと11万人フォロワーさんがいるということで、驚きのあまりお願いした企画回でした。 インスタを更新してい ……
こんにちは！ 今月のちいウェブオンライン会は、特別版でした。 えれなさんがインスタ運用代行をしているアカウントが、なんと11万人フォロワーさんがいるということで、驚きのあまりお願いした企画回でした。 インスタを更新してい ……
今日はお役立ちコードの投稿ではなく、最近考えていることを文章として残したいと思います。 最近、英会話の教室に通っています。 月に2回のレッスンで、マンツーマンではなく、もう1名授業を受ける方と2名で授業を受けています。 ……
↑hoverしてね ゆらゆらウェーブアニメーションをCSSのみで作ります。 htmlでは波を入れる箱を用意します。 CSSで、箱にスタイルをあてます。 波は、疑似要素::beforeを使って作成します。 position ……
今回はこれを作ります ↑リロード（更新）してみてください 0から100まで数字を動かすアニメーションです。 これは、jQueryを使っています。 jQueryを読み込んだ状態で記述してくださいね まずはhtmlです。 C ……
こんな風に桜の花びらを散らすアニメーションです。 コピーして使ってください htmlはこちらです。 今回はこんな感じでimgにしてみました。 用意したのは桜の花びら4種類です。 この時点でもう可愛いですよね で、これを散 ……
LINK 今日はこれを作っていきます。 hoverしてみてね htmlはリンクを貼るだけです。 CSSもめっちゃ簡単 hoverしたタイミングで、text-shadowを使ってネオンっぽくしています。 HAPPY .ne ……
このhoverアニメを作っていきます。 hoverしてみてね hoverアニメーションの作り方 これを作るのに必要なパーツは以下の2つです。 円 アイコン この2つをhtmlでマークアップし、CSSで変化をつけてアニメー ……
次のようなデザインをコーディングする場合あなたならどうしますか？ CONCEPT beforeを使って擬似要素を作り、ボーダーにする方法です。 ではコードを見ていきましょう。 h2はセンター配置しておきます。 「/」をp ……
↓こんなボタンを作っていくよ マウスホバーで隠れているアイコンたちが出現するボタンです。 htmlの考え方 これを作るのに必要なパーツは、角丸長方形とアイコンたちですよね。 アイコンの上に角丸長方形が乗っていて、マウスオ ……
コミュニティに参加するほどではないけれど、相談したいことがあったり、質問したいことがある方の為に、zoomを利用した1時間の単発レッスンをご用意しています。 5,500円/1時間 ご注意事項 こちらのレッスンは以下の時間 ……
コミュニティに参加するほどではないけれど、相談したいことがあったり、質問したいことがある方の為に、zoomを利用した1時間の単発レッスンをご用意しています。 5,500円/1時間 ご注意事項 こちらのレッスンは以下の時間 ……
CSSでよく使う単位についてまとめます。 絶対的なサイズの単位 px Pixels ピクセル デザインツールでフォントサイズを確認し、16pxなら、font-size: 16px;と指定可能です。 相対的なサイズの単位 ……
こんにちは。 WebクリエイターをしているMarieです。 今年、女性起業家さん向けの新サービスを提供予定の為、そのモニターさまを募集いたします。 概要 ご質問、ご相談はmmDesignホームページお問合せよりお送りくだ ……
かなり放置していたInstagramの投稿を再開しました。 そこで色々とメモしておきたいことが出てきたので記事にまとめてみます。 ただ、こちらの記事は有料とさせていただきます。 前回のInstagram考察記事（有料）は ……
