すべてのカテゴリ

みなさんおはようございます。nikoniko 21です。今回は、私の記事を見てくださってありがとうございます。今回は、私のプログラミング用語を覚えるための暗記術について紹介したいと思います。私はプログラミングの勉強をはじめてけっこう経ちますが、たまに用語を忘れてしまったりします。従いまして、そういった用語を覚えなおすために暗記帳を作って持ち歩いています。そして、暗記帳を書く方法も工夫しています。一冊のノートの前半のページ数はHTML・CSSの用語を書くのに使って、後半のページ数はJavascriptの用語を書くのに使っています。そうすればノートの中を整理することができて、3種類の用語の勉強ができます。また、勉強が楽しくなるようにノートは以前もカバー画像にした星座の魔法陣の表紙のノートを使って、覚える用語の詳しい解説は好きな紫色のペンで書いています。その結果、暗記しやすくなって用語も覚えやすくなりました。この情報が少しでも読んでくださってる人の参考になれば嬉しいです。今回の記事はここまでです。読んでくださってありがとうございます。

みなさんこんばんは。nikoniko 21です。私の記事を読んでくださってありがとうございます。本日は、みなさんに私の習性についてお話したいと思います。私は昔からメモ魔でかわいいノートも大好きです...。というのは前にお話ししたこと。今回の私の習性はかわいいものを集めることです。子供のころはお菓子のおまけを集めるのが趣味でした。アニメのカード付きガムのカードを集めたり、フエラムネのおまけの指輪やピン止めやクリップ等を集めたりしてました。今は100均の手芸コーナーのハギレやUVレジンのフレームやモールドやビーズを集めています。ハギレは主に花柄のものを、フレームやモールドは季節に関するものを集めています。そして、ビーズは丸いビーズだけでなく、ソロバン型のビーズや楕円形のビーズ等を集めています。今はかわいいものが安く買えるのでとてもうれしいです。今回の記事はここまでです。最後まで読んでくださってありがとうございます。

みなさん、こんばんは。nikoniko 21です。私の記事をご覧になってくださってありがとうございます。今回は、私の昔からの習性についてお話したいと思います。私は昔から面白いと思ったことを忘れずにメモをする癖があります。好きな漫画のキャラクターのセリフとか、面白いワンシーンとか...。そして、現在は面白いと思ったことだけではなく自分が大事、今後役に立つと思ったこともメモしています。例えば、プログラミングの作業でも自分がわからなくなったところや、覚えにくいなと思ったところはすかさずノートに書いて、あとで勉強したり暗記できるようにしてます。また、私はノートが大好きでかわいい表紙のノートや、ポケットサイズの小さいノートや、ハードカバーのノート等いろいろ集めています。どのノートも使うのが正直もったいないですが、これからもたくさんのことをメモするのに使いたいと思います。（カバー画像もキャンドゥで購入したノートです。）今回のブログはここまでです。最後まで読んでくださってありがとうございます。

こんにちは。Webコーダーのakkoです。Web制作の現場でよくあるのが、「デザインはできたけど、コーディングをお願いできる人がいない…」「案件が立て込んでいて、コーディングまで手が回らない…」というお悩み。そんな時は、ぜひ外注のWebコーダーとしてお手伝いさせてください！私は、デザインカンプ通りに丁寧＆柔軟な対応を心がけて、HTML/CSSのコーディングからアニメーション、WordPressまで幅広く対応しています。✅ コーディング対応範囲HTML/CSSコーディング（レスポンシブ対応）JavaScript（jQuery）やCSSによるアニメーションWordPress構築（既存テーマのカスタマイズ／オリジナルテーマ作成）Googleフォームなどの設置対応 など💰 コーディング料金の目安LPコーディング（10000pxまで）：25,000円トップページ（8000pxまで）：20,000円下層ページ（8000pxまで）：7,000円／1ページ　┗ 簡単なページなら：3,000円／1ページJavaScriptやjQueryによるアニメーション：3,000円／1箇所お問い合わせ機能（Googleフォーム）：10,000円〜WordPress機能の実装：要相談デザインカンプは、Figma / XD / Photoshop / Illustratorなどに対応しています。🕒 対応スケジュール平日・土日ともに対応可能です。急ぎのご相談や、まだ依頼が確定していない段階でも大丈夫。「まずは相談だけ…」という方も、お気軽にご連絡ください！🌱 最後に…Web制作会社様やデザイナー様の**「あとちょ

みなさん、こんにちは。nikoniko 21です。私の記事をご覧になってくださってありがとうございます。今回は私の物作りに対する情熱についてお話したいと思います。私は子供の頃から工作が大好きです。特に小学生の頃は学校の図書室や図書館で大量の工作の本を読んでいました。小学校中学年で小学校低学年向けの本も読んだくらい。象や豚の形の貯金箱や、ぺットボトルでできた優勝トロフィーや、牛乳パックでできた小物入れや、プラ板のキーホルダーや、ビール瓶の底でできたヨーヨー...。図書室やと図書館の本にはいろいろな見た目も作り方も面白い作品が載っていました。特に、アンジェラ・ウィルクスさんという人の大型の工作の本は写真が楽しくて、書いてある内容もとても面白くて大好きです。実は、この間一冊ネットで注文してみました。そして、届いてすぐにページを開いたら小学生の頃に見た細長く切った紙を巻いて作るビーズのアクセサリーの作り方や、面白いお化粧（ピエロの化粧等）のしかたや、お人形の作り方等が載っていてすごく懐かしかったです。そして、今はいろいろな道具を使って物を作れるようになって、小学生の頃よりも物作りに力を注ぐようになりました。UVライトを使って作るUVレジンのアクセサリーや、管理が少し大変な粘土で作るブローチや、ペンチを使って作るビーズアクセサリー...。　　　（粘土のブローチはカバー画像にしています）作り出すと楽しくて、私の部屋は現在作品でいっぱいです。このように、私は物作りが楽しくて仕方がなく、Webサイト制作も楽しいと思っています。そのため、これからもどんどんWebサイト制作の腕を上げていきたいと思

みなさん、こんばんは。毎度同じみココナラにWebサイト制作とHTML・CSSコーディングのサービスを出品中のnikoniko 21です。私のブログをご覧になってくださってありがとうございます。本日はWebサイト制作やHTML・CSSコーディングやサーバーの設定等のトラブルを解決するときに使えるちょっとした方法をお教えします。1回目のブログにも書いたように、私はWebプログラミングの作業をしているときにコードを書くのに使っているVScodeが思うように動かなくなったり、自作のホームページをブラウザで公開しようとしても公開できなくなる等といったトラブルに見舞われたことがあります。そして、ネット等で見つけた解決方法を試してそのトラブルを解決しようとしても全く解決せず、どうすれば良いのかわからなくなったりしたことがあります。そんな中で、私はある方法を思いつきました。それは、トラブルを解決しようとなにをしたのかを一からノートに控えておくことです。トラブルを解決する方法を試し始めたときからなにをしたかをノートに記録しておけば、自分はどのような方法をどこまで試したかが一目でわかって、その過程でなにかやり方を間違えたりしたのかを確かめることができます。また、解決方法の試し始めからトラブル解決までをノートに控えておけばトラブルが解決したあとにまた同じようなトラブルが発生したときにそれを見ればすぐに解決できると思います。この方法は他の人も既にやっている方法かもしれませんが、私としては良い方法だと思います。本日のブログはここまでです。最後まで読んでくださってありがとうございます。

1. サイトイメージ画像2. 制作概要 制作時期：2024年11月 制作時間：30時間作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Photoshop 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫した点(コーディング) Photoshopを用いてデザインをコーディングしました。 ローディングアニメーションやホバーアニメーション、スクロールアニメーションといった動きのある要素に加え、ハンバーガーメニューも実装しています。これらのアクションを取り入れることで、サイト訪問者を飽きさせない設計となっております。 また、一部セクションの背景には、オレンジと白を組み合わせた幾何学模様を採用しています。この模様は画像ではなくコーディングによって表現しました。さらに、ファーストビューの画像は丸く切り抜き、柔らかい印象を与えるデザインに仕上げました。 CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。 最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。

1. サイトイメージ画像2. 制作概要 制作時期：2024年8月 制作時間：170時間ページ数：12ページ 作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery、WordPress 3. 工夫したポイント(コーディング) WordPressを使用してオリジナルテーマを作成し、コーディングを行いました。 投稿機能では、デフォルトの投稿機能とカスタム投稿機能の両方を活用しています。特に、カスタム投稿機能を使用した社員紹介ページでは、カスタムフィールド機能も組み合わせ、保守管理しやすくなっております。 また、パンくずリストを実装し、ナビゲーション性能を向上させています。一部のページでは、パンくずリストのリンク先や表示されるタイトルをPHPを用いてカスタマイズし、コンテンツの一貫性と利便性を確保しました。 さらに、スムーススクロールやページネーション、ハンバーガーメニューの実装を行うことで、サイト訪問者が快適に操作できるデザインを心がけました。 最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。

1. サイトイメージ画像2. 制作概要 制作時期：2024年3月 制作時間：60時間作業内容：コーディング、クロスブラウザテスト、サーバーアップロード ページ数：6ページ 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫したポイント(コーディング) ファーストビューでは、数秒ごとに画像が切り替わるアニメーションを実装し、訪問者に動きのある印象を与える工夫をしました。 また、トップページでは以下の機能を実装し、利便性を高めています。 ・モーダルウィンドウ ・ハンバーガーメニュー ・ローディングアニメーション ・スムーススクロール ・ホバーアニメーション学科ページについては、4つのページが同一仕様であることを活かし、共通のCSSファイルを適用しました。これにより、保守性や管理効率が向上しています。また、すべてのページにおいてCSS設計ではBEMを使用し、可読性の高いコーディングを行いました。さらに、予約フォームのページでは、必須項目がすべて入力されていない場合は送信ボタンが押せない仕組みを導入しました。この設計により、利用者が入力ミスに気づきやすくなりました。 最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。

1. サイトイメージ画像2. 制作概要制作時期：2024年2月 制作時間：25時間程度作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫したポイント サイトを開いた際には、ローディングアニメーションを表示させる設計にしています。 商品一覧のスライドショーでは、Swiperプラグインを使用することで、複雑なコードを避けつつ機能性を確保しました。 また、問い合わせフォームでは、必須項目をすべて入力しないと送信ボタンが押せない仕組みにすることで、利用者が迷わずに操作できるよう配慮しています。そのほか、ハンバーガーメニューやスムーススクロール、FAQページにおけるアコーディオン機能の実装も行い、ユーザーにとって快適で分かりやすい構成を目指しました。 コンタクトフォームはPHP工房をカスタマイズして実装しました。CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。

はじめまして。nikoniko 21と申します。私の記事をご覧くださってありがとうございます。現在私はココナラに２つほどサービスを出品しております。Webサイト制作とHTML・CSSコーディングです。副業を始めるためにココナラで出品しようと考えました。私は昔から細かい作業や物作りが好きで、そういうことに熱中できる性格です。そのため、Webサイト制作やHTML・CSSコーディングも最初は勉強しなければいけないことがたくさんあって難しそうと思いましたが、勉強をしながらコーディングをして少しずつWebサイトを作っていく作業をしてみたら夢中になれました。HTML・CSSや、Javascriptや、PHPや、Java等のプログラミング言語を勉強しながらコードを書いていって、少しずつ自分の理想のWebサイトができていくのがとても面白くて作業の手が止まりません。また、その途中でコードを書くのに使っているVScodeが思うように動かなくなったり、自作のWebサイトをブラウザでうまく公開できなくなったりといったトラブルもありましたが解決策をネットで調べたり、なぜうまくいかなくなったのかを自分で考えて解決策を見つけ出したりして何とか自力で解決してきました。そうして私はWebプログラミングの技術を身に着けて、Webプログラミングの作業に対する集中力とトラブルを絶対に解決するという自分の粘り強さを強化させました。ホームページをHTML・CSS等を使ってコーディングしたり、ホームページのデザインをしたり、お問い合わせ画面等の入力フォームを作成したり...。そういった技術をWebプログラミングの副業に活用

📌 1. はじめに 「Webサイトに動画を埋め込みたいけど、どうすればいい？」 そんな疑問を持っている方向けに、HTMLの<video>タグを使って動画を表示する方法を解説します！ 「YouTubeの埋め込みじゃなくて、オリジナルの動画をWebページに載せたい！」という方におすすめです。 📌 2. HTMLの<video>タグとは？ HTML5で導入された**<video>タグ**を使うと、動画ファイルを直接Webページに埋め込めます。 ✅ YouTubeなどの外部サービスを使わずに、オリジナル動画を表示できる！ ✅ 自分のサーバーに動画をアップロードすれば、完全にカスタマイズ可能！ 📌 3. 基本的なHTMLコード まずは、シンプルな<video>タグの基本構文を見てみましょう。 <video width="600" controls> <source src="sample.mp4" type="video/mp4"> お使いのブラウザは動画タグをサポートしていません。 </video> 📌 解説 width="600" → 動画の幅（ピクセル単位） controls → 再生・停止ボタンなどのコントロールバーを表示 <source> → 動画ファイルのパスと形式を指定 type="video/mp4" → 動画のフォーマット（MP4, WebM, Ogg など） これだけで、ページに動画を表示できます！ 📌 4. 自動再生・ループ・ミュートの設定 <video>タグ

皆さんはCSSは何使っていますか？ ふつうにcssファイルやbootstrapとかでレイアウトなんかいろいろありますがやはりレイアウトも効率的にしたいですよね？ Tailwindcssはclassにそのままコードを書くことで簡単に反映できるのでおすすめです。 例　（<div><classname=container "mt-5 bg-color-500"></div>） 上記だとマージンと背景色を変更しています。 今回はnpmでインストールから使用可能までの手順を紹介していますのでこの記事を読んで是非Tailwind.cssを使ってみてください！ １　npm install tailwind でインストール。 ２　npx tailwindcss initでtailwindcssの設定ファイルを作成します。 ３　npx tailwindcss initで作成したtailwind.config.jsでcontentの中に "./src/**/*.{js,jsx,ts,tsx}",  を加えて適応ファイルを加えて下さい。 ４　index.cssにtailwindの基本スタイルを適応するため下記を記述 アットマークtailwind base; アットマークtailwind components; アットマークtailwind utilities;５　tailwindを適応させたいコンポーネントかjsファイルに import "./index.css"; をインポートすることでTailwindのスタイルを適応。 ６　スタイルを当ててみてnpm star

こんにちは！今回は、HTMLとCSSを使ってポートフォリオサイトを作成する方法を、初心者目線で解説していきます。プログラミングの基礎を学ぶ際に、自分の手で動く「成果物」を作るのはとても重要ですよね。でも、何から始めればいいかわからない…そんな方も多いのではないでしょうか？そこで、今回ご紹介するのが私が作った「HTML＆CSSポートフォリオサイトテンプレート」です！このテンプレートは、初心者でも手軽に使える設計となっており、サイト構築を通じて自然とHTML＆CSSの基礎が身に付くよう工夫されています。テンプレートで学べることこのテンプレートを使えば、以下のスキルを学ぶことができます：HTMLの基本構造ヘッダーやフッター、メインコンテンツの配置方法。Webページの基本的な仕組みを理解することができます。CSSでのスタイリング色や文字の装飾、レイアウトの調整などの基礎。モダンでシンプルなデザインがテーマなので、無理なくCSSを学習できます。レスポンシブデザインの導入スマホでもキレイに表示できる方法を実践的に学べます。学習の進め方テンプレートをダウンロードして、以下のステップで学習を進めてみましょう！テンプレートを開いて構造を把握するHTMLファイルを見ながら、「header」「main」などのタグが何を意味しているのか調べましょう。CSSのコードを変更してみる例えば背景色やフォントサイズを変えて、どんな風にデザインが変わるのかを確認！自分の情報を追加する自己紹介や実績など、自分だけのオリジナルコンテンツを埋め込みましょう。テンプレートの魅力シンプルだから学びやすい！余計なコードがない

みなさん、こんばんは。Site　CreativeのWebデザイナー熊谷俊介です。Webデザイナーの皆さんやご自身でWebサイトを作るとき何で制作されていますか？定番のWordPressやStudio、WIX、ペライチなどいろいろありますね。これらを使えばHTML＆CSSがわからなくても、手軽にWebサイトを制作できるようになってきました。でも、Webサイト制作の基本はやはりHTML＆CSSのコーディングによる制作ではないでしょうか。以前、Webデザインスクールに通っていたとき、「デザイン好き、コーディング嫌い」という人が多かったです。Webデザイナーを目指しているのに講師に「コーディングって必要なんですか？」「ノーコードツールでいいんじゃないんですか？」って聞いている人もいました。確かにコーディングしなくてもノーコードツールでWebサイトはできます。でも、例えばWordPressでデフォルトではないヘッダーの色に変えてみたい、文字をこの位置にずらしたいなどカスタマイズするときどうするのでしょうか？そのようにクライアントが要望されたら「デフォルトにないのでできません、てへぺろ」ってするのでしょうか。もちろん、自分流のWebデザインのビジネスをすればいいと思いますので、全く否定しませんが、コーディングもできたほうがデザインの幅が広がるのにもったいないとは思います。私は仕事では需要が多いWordPressでの制作が中心です。でも、本当はHTML＆CSSのコーディングでの制作が好きで得意なのでそっちで作ってみたいのが本音です。「WordPressでしか作れない」のではなく「WordPr

初めまして。Webコーダーの山城拓己です。今回は、コーディングする前に「あること」をするだけで、作業が劇的に効率化されるという話をしていきたいと思います。皆さんは、コーディングの作業に入る前に、何かやっていることはありますか？「デザインカンプを見るくらい、、？必要なこと以外何もやってない」「相棒にコーヒーを用意することかな。。。」など、人によって作業する前にやることが違うと思います。しかし、より仕事などをこなすコーダーになってくると、コーディング前に行う作業が共通してきます。では、一体それは何の作業なのでしょうか？答えは、「全体像を把握する」です。もっと具体的にいうと、「デザインに直接どういうコードを書いていくかメモしておくこと。」です。「え？そんな面倒くさいことやってるの？逆に時間かからない？」そう思った人も多いかもしれません。しかし、実際には、この作業をするかしないかでコーディング作業の効率が劇的に変わるのです。考えてみてください。デザインカンプを見て、なんとなくコーディングを始めたけど、コーディングしていくうちに修正が必要になったことや、自分が思っているコード量よりも多くなってしまって、もっといい書き方がないか模索してしまう。こんなことありませんか？これは僕の経験ですが、コーディングで一番時間がかかるのは修正だと思います。どんなWebコーダーでも何かしら予想しなかった挙動やエラーは起こるはずです。ページ数やコードが複雑になってくるとなおさらです。そこで、修正に時間がかかるときは全体像が把握できていない時なのです。自分が書いたコードがどういう意図でどういう挙動をするのか、曖

こんにちは！今日は、CSSを使ってWordPressサイトのデザインをさらに個性的にする方法をご紹介します。初心者でもできる簡単な変更方法を具体的に説明しますので、安心して挑戦してくださいね。CSS（Cascading Style Sheets）は、サイトのスタイルを変更するための言語です。ここでは、基本的なCSSの使い方と、簡単なデザイン変更の例を紹介します。1. CSSの追加方法    カスタマイザー内で「追加CSS」セクションを選びます。ここにCSSコードを追加することで、簡単にデザインを変更できます。2. 背景色の変更    以下のコードを追加することで、サイト全体の背景色を変更できます。3. 見出しのスタイル変更    見出し（h1）の色やフォントサイズを変更することもできます。4. リンクのスタイル変更    リンクの色を変えることで、サイトの印象を変えることができます。5. ボタンのカスタマイズ    ボタンのデザインを変更することで、訪問者の目を引くことができます。CSSを使うことで、簡単にデザインをカスタマイズできます。次回は、デザインをさらに強化するためのプラグインの紹介をしますので、ぜひご期待ください！ 現在、WordPressを使ったホームページ制作サービスを提供しています！ お気軽にお見積もりやご相談ください。

こんにちは。WebデザイナーのKEIKOです。今進めていることは、自分のホームページ制作です。すでにWordPressを使用したホームページを持っているのですが、テンプレートを使用してノーコードで制作したものです。せっかくスクールでデザインとHTML&CSS&JQueryのコーディングを学習したので、やっぱりコーディングをして自分のHPを作りたい！と思いまして…。HP制作のざっくりとした流れは、情報の整理→サイトマップ作成→ワイヤーフレーム作成→デザイン作業→コーディング作用なのですが、今はワイヤーフレームまで進んでます。もうすぐPhotoshopでデザイン作業です。ワクワクです♪コーディング作業を出品できるようになりたいので、ワクワクしながら頑張ります！現在はWeb画像制作を2つ出品中です。ご相談だけでも大丈夫です！よろしくお願いします(^^)

ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果のCSSコード例を紹介します。ボタンのHTMLコードまずは、各ボタンのHTMLコードです。<!-- グラデーションで色が変わるボタン --> <button class="button-gradient">グラデーション</button> <!-- 色がフェードインするボタン --> <button class="button-fade-in">フェードイン</button> <!-- 枠線の色が変わるボタン --> <button class="button-border-change">枠線変更</button> <!-- 影の色が変わるボタン --> <button class="button-shadow-change">影変更</button> <!-- ボタンが膨らむ --> <button class="button-puff">膨らむ</button>グラデーションで色が変わる グラデーション .button-gradient {   background-color: #3498db;   color: white;   padding: 10px 20px;   border: none;   curs

HPを作成する際、よく質問がある事項として、「HTMLとワードプレス、そしてWixのどれがおすすめですか？」と聞かれることが多々あります。それぞれ長所と短所があり、その都度ご説明差し上げていますが、どなたかのお手伝いになればと思い、ブログに書くことにしました。迷われている方や、そもそもノーコードって本当に素人でもHP作れるの？と疑問を持っている方の一助になればと考えています。なお、これを読まれる方はHTMLやCSSなどのプログラムについて、「詳しくはないがなんとなくわかる」程度以上の知識はお持ちかと思いますので、それを前提に書いていきたいと思います。可能な限りわかりやすい言葉に置き換え、かつHTMLやCSSの知識が無い方が作業する前提での説明となりますので、専門的な部分は割愛させています。その点のみご注意下さい。ノーコードって何？　ワードプレスとWixはノーコードの代表例。結論から先に言いますと、ワードプレスとWixはHPのコードに対する知識がなくてもHPの作成が可能です。もっとわかりやすく言えば、パワーポイントで資料を作るイメージで作成できます。※希望するデザインが100%再現できない可能性はありますが、十分デザイン性が高いHPは出来上がります。このノーコードという言葉は語弊があり、実はコード自体存在します。例えノーコードであっても、どんな形式のHPであっても、HTMLそのものは必ず存在します。ただ、このHTMLにPHP等のプログラムを掛け合わせることで、表面上はまるでコードが存在しないが如く見せている、と理解した方が正しいと思います。そんな簡単にHPが作れるのであれば、どの

初めまして、閲覧いただきありがとうございます！HTML/CSSコーディング代行サービスを提供しています。Iwashitaと申します。今回、もっと効率よくコーディングを行い、より早くお客様に成果物を納品できるようGulpを導入しました！できるようになったこととしては以下です。▼ほとんどのブラウザで表示崩れを防止可能に。・ベンダープレフィックスを自動で付与する ▼保守性の向上・HTMLファイルのフォーマット・Sassファイルの自動コンパイル・CSSのプロパティを並び替える ・CSSのメディアクエリをまとめる▼作業効率の向上・ファイルの変更を監視・ブラウザの立ち上げと自動リロード・CSSとJavaScriptファイルの圧縮 これからも品質向上に向けて、努力していきたいと思います！！改めまして、HTML/CSSコーディング代行サービスを提供しております。★ご興味のある方は以下のURLをクリックよろしくお願いいたします！！

こんにちは！あなたのビジネスやプロジェクトの成功に欠かせない要素の一つは、魅力的で効果的なホームページについて解説します。カスタマイズされたデザイン： あなたのビジネスやブランドに合ったオリジナルのデザインが肝です。最近ではHTMLテンプレートやfimaといったサービスから簡単に作成できます。使いやすいインターフェース： ユーザーが簡単にナビゲートできるように、直感的で使いやすいインターフェースを構築も必要です。ユーザーが情報を見つけやすく、興味を持って行動に移しやすい環境を考えましょう。 スマートフォン対応のデザイン： スマートフォンからのアクセスが増える現代において、レスポンシブ対応は不可欠です。レスポンシブなホームページを提供し、ユーザーがどんなデバイスからでも快適にアクセスできるようにします。 安定性とセキュリティ： 安定性とセキュリティは、オンラインビジネスの信頼性を確保する上で極めて重要です。SSLといった機能はサーバーには基本的についているのでよく調べましょうインターネットは現代のビジネス戦略において非常に重要です。 しかし、ホームページのコーディングやデザインは、専門的な知識やスキルが必要な場合もあります、私はそうした知識には自信があるので興味のあるかたは一度お問い合わせください。どんなささいな内容でも誠意をもって対応します。

メールマガジンと聞いていろいろ商売やサービスやってる方々はどんなイメージをもっていますか？お客様に帰って不快な思いさせないとか、設定が面倒とか思ってませんか、ところがこんな効能があります。⓵目標層への直接的なアプローチ: メールマガジンは、購読者が自ら登録するため、興味のある対象層に直接的にプロモーションに効果的です。 ⓶ブランドの認知強化: 定期的にメールマガジンを配信することで、ブランドの認知度を高めることができます。読者は定期的にブランド名やロゴを目にすることで、そのブランドに対する信頼や好感度を高めることができます。 ⓷マーケティングの効果測定: メールマガジンを通じて送信される情報は、開封率やクリック率などのデータを通じて効果を測定しやすいです。これにより、マーケティング戦略の評価や改善が容易になります。他にもいろいろありますがこんなところです。ITの知識がなくてもメルマガ発信代行のサービスがありますし、カスタムHTMLで静的サイトやWordPressに打ち込めるので、最低限のデザインができたらココナラのサービスで頼むのもいいです、そんな案件を受けたこともあるので興味のあるかたはDMどうぞ

ブログを見てくださりありがとうございます！sakiyou3です。 エテリア様の練習課題第6弾が完成です！ 今回のテーマはフェイシャルエステとなります🌹✨ ポートフォリオ用サイト「フェイシャルエステ Rose」 https://coconala.com/mypage/user/portfolios 【担当】 PC版デザイン(ワイヤーフレーム)：エテリアオンライン様 レスポンシブデザイン(タブレット版・SP版デザイン) ：sakiyou3 コーディング(HTML、CSS、JS)：sakiyou3 次回はいよいよ社員コースの昇格試験を受けることになりました…！（ドキドキ💦）期間空いてしまいますが4月末ごろに試験を受ける予定です🔥一発で合格できるよう頑張ります‼️

基本は下記のsampleクラスをいれることで右回転のアニメーションが実装されます、ローディング画面など世話になるので覚えて損はないですtransform-originで回転基準を変更したりtransfoemにxyzを指定してそれを基準に回転するなど結構勝手が効きますtransというcssのコードを調べればいろいろでてくるの興味があればどうぞ※アットマークがブログにのっけれないので【ここにアットマーク】にしてます。.sample{  animation:3s  kaiten; }【ここにアットマーク】keyframes kaiten{   0%{ transform:rotate(0);}   100%{ transform:rotate(360deg); } }

ブログを見てくださりありがとうございます！sakiyou3です。 エテリア様の練習課題第5弾が完成したのでポートフォリオとして公開しましたー！ 今回はダイニングバーとなります🥩🍷 ポートフォリオ用サイト「エテリアダイニングバー」 https://coconala.com/mypage/user/portfolios/822930 【担当】 PC版デザイン(ワイヤーフレーム)：エテリアオンライン様 レスポンシブデザイン(タブレット版・SP版デザイン) ：sakiyou3 コーディング(HTML、CSS、JS)：sakiyou3 今回の練習課題を終えてから社員コースに挑もうと思っていたのですが、まだコーディングスキルが足りてないと実感したので、もう1つ練習課題をすることになりました。今度こそクリアして社員コースにいけるように頑張ります…！

ご覧いただきありがとうございます。都内のWebメディア運営会社にてエンジニアとして勤務しているりゅうたと申します。プライベートでコーディングのスキルを高めたいと思い、コーディング教材を購入して静的なサイトのコーディングをデザインデータから実装しました。今回は制作に関しての概要をご説明できたらと思ってます。制作時間 : 2日(目安)制作費用 : 50,000円~70,000円(実務を想定した場合)ページ数 : 3ページ(トップ / お問い合わせページ / サンクスページ)フレームワーク: Astro使用言語 : HTML / CSS(Scss) / JavaScript (VanilaJS)※コーディングのみの制作です。※デザインデータは専門のデザイン教材から購入したものです。すべてのデザイン要素はライセンス条項に従って使用しています。今後も自分がコーディングした作品を掲載していけたらと思っております。よろしくお願いいたします。もしよろしければ下記のサービスを出品しているのでお気軽にご相談やご依頼など承っております。

今年7月に誕生した新興SNSであるタイッツーにて、APIが公開されて数か月経ちました。私はそこでいくつか外部サービスを作っていたので、どうせならまとめるサイトを作ろうと思ったので、12月に入ってサクッと作ってみました。ttps://shimo-codex.comちょっと長々としていますが、こんな感じ。初期版は半日ぐらいで、実は申請していたGoogleアドセンスからNG喰らって追加で1人日ほど。合計で1.5人日ぐらいで完成です。デザインはちゃんとしたの用意したわけではなく、参考サイト適当に何個かピックアップして、コーディングしながら作りました。デザイナーってわけではないし、まあいっかなと。用途・目的実はちゃんとした目的があって、どうせなら収益化を狙いたいんですよね。というのも、色々作った結果1日のPV数が1000ぐらいあって、タイッツーに出してる支援金（1000円）程度を回収できないかな～という目論見があったり。アフィリエイトブログ以外でアドセンスが通ってる例があんまり見つけられないので実現性は少ないんですが、あわよくばという気持ちです。それと、フリーランスとして毎月仕事もらってわちゃわちゃやってて、名刺にもホームページのURL掲載してるんですが、404だったんですよね。流石にそれは不味いだろうと思い、フリーランスになってから半年経過する前に作っておこうと考えたのもあります。（7月1日からフリーランス化してるので、そろそろ半年ですね）今の所月20万ぐらいは稼げてるので生活はギリギリできていますが、ほそ～い生命線をなんとか維持してるというレベルなので、仕事を取れるフィールドを増やし

Webレスキューと申します。私は普段、webサイトの制作や修正を制作会社さんから承っています。初心者ってことはバレる？そんな私のところにはコーディング経験の少ない方に任せてしまい、デザインと全く違うwebサイトが納品されてしまった。修正して欲しい。という依頼が割と飛び込んできます。確かにデザインと明らかに違う。いや、もはやCSSを見る限りアレンジしている！？日本人だけど「oh my God!」でしか表現できない。本当にそんな状態なんです。初心者ということはバレてしまいます。それはなぜか？注意するべき場所がわかっていないからです。大枠のデザインを実現することで頭がいっぱいです。細部のwebサイトの印象を決定づける場所に全く力を振り向けられていません。自分はそんなことあり得ないと思うあなたに今日はどんなところで初心者とバレてしまうかを手始めに3つお伝えします。初心者とバレてしまうポイント3選①要素間の余白が異なる②フォントが異なる③ウィンドウの伸び縮みを考えてないこの3つは初心者が最もミスをする点と言っても過言ではありません。この3点がかなり大事であると言うことに気づいていないのです。一つずつ解説させてください。①要素間の余白が異なるデザインの基本４原則に近接と言う考え方があります。人間は近くに置かれた情報をグループとして認識する傾向にあります。これを利用して要素の間隔から情報を伝えやすくデザイナーの人は考えています。また、要素同士を揃えることはレイアウトの基本です。揃えることでまとまりが生まれ、秩序あるデザインとなります。デザインに唯一の正解はありませんが、秩序が保たれてこそ美し

こんにちはHiro Designです。今回は工務店様向けのホームページをデザインしました。ホームページ作成内容ページ数・トップページ＋下層ページ(4ページ)の計5ページサイトマップ・トップページ・私たちについて・家づくりについて・施工事例・お問い合わせレスポンシブ対応・スマホ対応パソコントップページ私たちについて家づくりについて施工事例お問い合わせタブレットスマホ以上が今回作成した工務店のホームページデザインになります。

自己紹介2023年6月末に会社を辞めてフリーランスになりました、saikoと申すものです。私のできること、掲載します。■主な職種・マークアップエンジニア・時々フロントエンドエンジニア・時々Webディレクター・時々バックエンドエンジニア■主な業務（できること）・HTML/CSSコーディング（マークアップ）・jsを使って動的コーディング（アニメーションとかそういう）・CMS開発（主にWordpress）・ディレクション（あんまりやらない）過去の経歴とか色々あって退職したんですが、あんまり考えないでフリーランスになったので結構暇です。幸いにも声をかけてくださる企業さんが結構いらっしゃるので金銭的に切羽詰まってるというわけではありませんが、フリーランス的に怖いのはやはり生活。ということでお仕事受けれます。過去にやったことのある業務的には、・大規模サイト、地方銀行のリニューアル業務（2人がかりで1ヵ月80ページコーディングした）・大規模サイト、Wordpress実装（大手お菓子会社のリニューアル作業、全体で数千万規模だったらしく、話聞いた時顔が青くなった）・中規模サイト、コーディングからWordpress実装まで（人手不足で40ページのリニューアル自分でやった、死ぬかと思った）あとは細かいLPとか一般的なコーポレートサイトとか、7年ぐらいやってました。なんかディレクター役職の人がどんどん会社を辞めていくという事態に陥ってたので私自身もディレクションをやってた時期もあります。というかデザイン以外をやらざるをえない感じだったので、１．ディレクション、話を聞いて大枠を作成する２．デザイナーに依

当サービスは、高品質、高コスパのLP（ランディングページ）を制作します。 高品質な有料画像、売れるためのLP構成ガイド付き！ 当サービスの特徴 ・高品質なテンプレートをベースにお客様に合わせたカスタマイズします。 ・LPの構成から文章・画像・カラーを変更可能です。 ・売れるLPに必要な構成のガイド付きで文章作成も安心です。 ・シンプルでわかりやすく見やすい、情報が伝わるデザイン ・ご自身で構成順序の並び替え、ブロックの非表示も可能なため、ABテストも簡単です。 通常では高額になる作り込まれたLPをベースに使用することで、高品質、低価格かつ高コスパを実現しています。 当サービスはこのような方におすすめです ・はじめてLPを制作する方 ・高品質なLPをできるだけ安価で欲しい方 ・派手なデザインよりもシンプルでわかりやすく写真を活かしたデザインで制作したい方 ・HTMLの知識が無くてもご自身で定期的に更新してABテストを行い方 当サービスはこのような方におすすめいたしません ・キャッチコピーや文章作成まですべて丸投げでお任せしたい方 ・低品質でいいからとにかく安く済ませたい方 ・予算は惜しまずレベルの高いデザイン・クオリティで制作した方 LP制作内容 スマートフォン表示対応 画像選定（著作権フリーの写真・イラスト） WordPressの導入、初期設定 お問い合わせフォーム 内部SEO対策、表示速度対策 セキュリティ対策 お知らせやブログの投稿機能可 SNS連携可 簡単なスクロールアニメーション Googleマップ、You Tube動画埋め込み Googleアナリティクス・Google

こんにちは、Hiro Designです。めっちゃ久しぶりの投稿になります。これまで練習で色々なデザインのホームページを制作してきましたが今回初めて料理店のデザインを制作しました。もし、興味がある人はご覧ください。「京料理」のホームページになります。＊アクセスマップの画像が消えていますがGoogleマップが表示されています。以上が今回制作した京料理店のホームページになります。最後までご覧いただきありがとうございます。また、こちらからご依頼も受け付けています。

ココナラでのプラチナランク獲得、達成しました！(＾◡＾)✨素晴らしいクライアントの皆様のお陰です！素晴らしいクライアント様のコメントはこちらです。https://coconala.com/users/3314927/reviewsただ、プラチナランクへの旅路はスムーズではありませんでした。評価「1」の深い谷に落ち、「Web制作の基本も知らない方」という刺さるコメントの、公開処刑を受けたことも。(恥ずかしい)　その瞬間、私は「プラチナ・ピーナッツ」とかし、まるで底なし沼へと転がり落ちて行くようでした(コロコロ)だけど、その微小な豆粒は、地獄でケンシロウと共闘し(意味不)、もがきながら地上に復活。南斗無限修正を回避し、そして今、プラチナの輝きを湛え!(読めん)、相変わらず暇を持て余しております（笑）、、、、、、、、、(;_;)Web制作でお困りの方、ぜひともプラチナ・ピーナッツにお任せください！WordPressの組み込みもお手頃価格で承ります！(＾-＾)ノご検討、心よりお待ちしております！

みなさん、こんにちは。CSSとは、Cascading Style Sheetsの略で、Webサイトの見た目を整えるための言語です。HTMLで定義したコンテンツに、色やフォント、レイアウトなどのスタイルを適用できます。CSSを学ぶ理由は、以下のとおりです。自分のWebサイトをより魅力的に見せるため他のWebサイトのデザインを参考にするため将来、Webデザイナーやフロントエンドエンジニアとして働くためCSSの基本的な使い方は、以下の通りです。CSS/* ヘッダーの色を赤にする */header {  color: red;}/* 段落のフォントサイズを16pxにする */p {  font-size: 26px;}このコードをHTMLに適用すると、以下のようになります。HTML<style>/* ヘッダーの色を赤にする */header {  color: red;}/* 段落のフォントサイズを16pxにする */p {  font-size: 26px;}</style><header>  <h1>タイトル</h1></header><p>これは段落です。</p>CSSは、Webサイトの見た目を整えるために欠かせない言語です。ぜひ、基本的な使い方を覚えて、Webサイトをより魅力的にしましょう。私の記事を読んでいただき、ありがとうございました。

今日は私がコーディングをする際に心掛けているポイントや習慣について共有したいと思います。1. シンプルさを追求する複雑なコードは、保守が困難で、バグの原因となることが多いです。常にシンプルさを追求し、不要な機能やコードの繰り返しを避けるよう心掛けています。2. コメントを適切に残す自分が書いたコードは、数ヶ月後や他の開発者にとって読みにくいものとなる可能性があります。そのため、コードの目的や処理の詳細をコメントで残すことで、後から見返した際の理解を助けるよう心掛けています。3. リファクタリングを恐れない技術が進化する中、常に最適な方法でコードを書き直すこと（リファクタリング）は必要です。より良い方法を見つけたら積極的にコードを改善するよう努めています。4. テストを書くバグを未然に防ぐため、テストコードを書くことを重視しています。テストは、コードが期待通りに動作するか確認する手助けとなり、安心してリリースできるようにします。5. 継続的に学習する技術は日々進化しています。新しい技術や手法、ベストプラクティスを学び続けることで、常に自分のスキルを更新しています。6. コードレビューを大切にする他の開発者からのフィードバックは、自分の盲点を指摘してくれる貴重なリソースです。定期的にコードレビューを受け、自分のコードの質を向上させるための意見を積極的に取り入れています。まとめコーディングの背後には技術だけでなく、情熱、継続的な学び、そしてコミュニケーションがあります。日々心掛けているこれらのポイントは、より質の高いサービスを提供するための基盤となっています。これからも皆様に満足して

みなさん、いかがお過ごしでしょうか。web制作コーダー2年目ひーちゃんです。今回は、画像の圧縮についてお話します。このブログは以下のようなコーダーにおすすめです。・画像の圧縮はしてるけど雰囲気でやっている・表示速度に関係することは知っているけど取り組んでいない10分を目安にお読みいただけると思います。さっそくですが、事前知識として・画像１枚のファイルサイズは、200KB以下に抑えるが必要です。詳しい理由の説明は省略しますが、Googleによると1ページあたりのページ容量を1.6MB以下にすることが望ましいとされています。したがって、単純計算で6枚程度の画像を表示すると目安の1.6MBを超えることになります。この条件をできる限りクリアすべく圧縮を行うわけですが、今回はわかりやすい例をあげます。1366px ×768px のpng画像を、pngとjpegの１倍でデザインデータから書き出したとものと仮定し、それらを圧縮します。最後にそれぞれをwebpに変換し、計4つの画像容量を比較します。それでは、まずオリジナルの画像がこちらです。[ サイズ:1366px ×768px  / 形式：png ] 容量：2.5MB[ サイズ:1366px ×768px / 形式：jpeg ] 容量：1.1MBでは、それぞれ圧縮します。(使用するツールは「TinyPNG」です。圧縮後に名前が変わらないので地味におすすめです笑)圧縮後[ サイズ:1366px ×768px / 形式：png ] 容量：627KB (-75%)[ サイズ:1366px ×768px / 形式：jpeg ] 容量：339KB

そのアニメーション本当に要る？Web制作においてCSS、JavaScriptを使ったアニメーションはよく見かけると思います。アニメーションは見た目にもインパクトに残りやすいですが、使いどころを間違うとそのサイトで伝えたいことが分かり辛くなる可能性があります。アニメーションを使うと分かり辛くなる例そのサイトの目的が文章を主とした情報提供である場合、アニメーションとは相性が悪いです。例えばニュースサイトやブログなどでスクロールするたびに文章がアニメーションで出てくるとどうなるでしょう？読み辛くなります。人間は文章を読む時、視線が上から下に動きます。しかし読んでいってもアニメーション待ちで下の方の文章が間に合っていないとストレスになりますし、そのサイトですべき文章での情報提供の価値が薄れてしまいます。また、初心者のポートフォリオサイトで無駄にアニメーションを使っているのがよくあります。自分の能力を見せるために動きのあるサイトを使いたくなる気持ちは分かりますがポートフォリオサイトの目的は"こんな作品を作った"、"こんな能力があります"とアピールすることが目的かと思います。それなら見やすく分かりやすいレイアウトを行いリンク先の自分の作品で適切なアニメーションを使うことができることをアピールした方が良いと思います。アニメーションを使うと効果的な例ビジュアルのみでユーザに価値提供できるようなサイトはアニメーションと相性が良いです。ファッション、フード、アニメなどなど...極端に言うと写真1枚でもそれがなんのサイトか説明できるジャンルはアニメーションと相性が良いです。日本と海外のサイトの違いと

2023年7月11日（火）HTML/CSSコーディングサービスを出品して38日目。みなさん、いかがお過ごしでしょうか。web制作コーダー2年目ひーちゃんです。転職活動及び引っ越しなどで更新ができておりませんでした・・・当テーマでの投稿は5回目になりますが、サービス出品日からは38日が経過しております。申し訳ありません。それでは約1ヶ月寝かせた（意図的ではない）サービスの検索結果を確認します。ログアウト状態の検索で、表示ページ数：7ページ目（前回７ページ目）でした。ちなみに前回も同じくログアウト状態で７ページ目。正直あまり落ちていないことに驚きましたが、ログイン状態だと、表示ページ数：5ページ目(前回：4ページ目)でした。総じてあまり大きな変動はなかったことがわかります。この結果と比較するためにも、一旦ブログを短くても更新していきます。また、こちらのブログとも関係しますが、私が管理するコーディング依頼専用サイトにブログ機能を追加し、こちらの記事と同じものを投稿できるように構築していきます。ブログ内に別サイトのURLを貼ることはココナラ規約上よろしくないので、興味がございましたら、メッセージにてご連絡お願いいたします。それでは

商品画像とか、ブログの記事とかにNEWなどと小さいタブがついていることってありますよね。それをCSSでつけてみたいと思います。商品画像を並べて、特定のクラス名が付いているものだけ、左上にNewと出るようにしてみます。最後まで見ていただけたら嬉しいです🌞完成見本html<section>   <div class="item-container">    <h2>⭐️Recommended Items⭐️</h2>    <ul>     <li class="new">      <a href="#"><img src="img/item01.jpg" alt="" />Tシャツ001</a>     </li>     <li>      <a href="#"><img src="img/item02.jpg" alt="" />Tシャツ002</a>     </li>     <li>      <a href="#"><img src="img/item03.jpg" alt="" />Tシャツ003</a>     </li>    </ul>   </div>  </section>⭐️画像はhtmlファイルと同じ階層のところにimgフォルダを作って、その中に、item01.jpgなどと名前

画像を用意しなくても、CSSだけで水玉模様やチェック柄が作れます。いつものようにコピペ用のコードも載せておきますので、よかったら使ってみてください。そして最後には、この背景を使っての活用例もお伝えしますので、参考にしてみてくださいね🌷▼このブログの完成見本https://　tsuyu0102.github.io/css-sample/background-pattern/index.html完成見本1️⃣html1️⃣<section class="sample01"></section>⭐️sectionタグはdivとかでもいいです👍　<div class="sample01"></div>としてもOK。そしてこのタグの間に、表示したいものを入れます。この背景を使った活用方法はページ下部へ👇CSS1️⃣.sample01 {    height: 300px;    background-color: #f7e3da;    background-image: repeating-linear-gradient(-45deg, transparent 0 15px, #badfd7 15px 30px, #fdb7b9 30px 45px);   }⭐️高さはheightのところで調整してください。htmlのsectionタグの中に何か書けば、CSSのこの1行書かなくてもOK。完成見本2️⃣html2️⃣<section class="sample02"></section>CSS2️⃣.sample02

こんにちは！サカモトです。今回は新しくローンチ予定のサービスに関してです。みなさんwebデザイナーになってみたいと思いませんか？webデザイナーになるのって結構難しいと考えていませんか？HTMLやCSSをスラスラ書けないといけないとかいわゆるプログラミング言語をガッツリ学習しないといけないとか間違えた記述をしたらパソコンが壊れるんじゃないかとかざっくり言いますと全部間違いです！本当に基本さえ抑えていれば割となんとかなっちゃうのがwebデザインで学習に関しても一つ一つ "わからない" をクリアすることで確実にステップアップできます。わからないところはググって、、、と簡単に言いますがそのググり力がなかなか課題だったりしますよね。今回公開予定のサービスはそんな初学者の皆さんの"わからないにとことん向き合う"そんなサービスを予定しています！しかも所謂webスクールより超絶低価格でご提供ですよ〜皆さんお楽しみに！

「詳細はこちら→」などというリンクがあって、マウスをのせると矢印だけがひょこっと動くボタン見たことありますでしょうか？これも意外と簡単に出来ますので、ご紹介いたします🎵完成見本↓マウスを乗せると色が少し薄くなり、→だけヒョコッと右に動く。html1️⃣（Google Fontsアイコン使用）完成見本では、矢印にGoogle Fontsのアイコンを使用しています。同じようにGoogle Fontsのアイコンを使用したい場合は、headタグ内に下記のようなコードを書きます。（普通の矢印を使うタイプも下記でご紹介します。）▼headタグ内<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,700,0,0" />そしてbodyタグ内には下記のようなコードを書きます。▼bodyタグ内<a href="fonts.google.com" class="btn01">詳細はこちら<span class="material-symbols-rounded arrow-right"> arrow_right_alt </span></a>⭐️クリックした先のURLはaタグのhref内に入れます。CSS1️⃣<style>   .btn01 {    border-radius: 5px;    background: purple;    di

以前Google Fontsの使い方についてご紹介しました。今回は、Google Fontsのアイコンを使ってみたいと思います！Google Fontsにアクセスhttps://　fonts.google.com/▼iconをクリック▼好きなスタイルを選ぶ▼微妙に違う▼真ん中のRoundedが丸みがあって、左のOutlinedは、SharpとRoundedの中間的な感じでしょうか。▼今回はRounded、太さを700のアイコンたちを使用してみたいと思います。アイコンをクリックすると右側にコードが出てきます。▼今回は太さとか同じ設定のものを使うので、Static icon fontのlinkタグをコピーして、headタグ内にペーストします。▼linkタグの下の、Inserting the iconのspanタグもコピーして、bodyタグ内にペーストします。▼HomeアイコンとFavoriteアイコンも追加してコードは下記のようになりました。▼ブラウザで確認。表示されました！サンプル見本1️⃣▼例えばこんな感じで使いたいとしますサンプルhtml1️⃣そしたらhtmlは下記のようになります。<nav class="first-nav">   <ul>    <li>     <a href="fonts.google.com/"><span class="material-symbols-rounded"> search </span>Search</a>    </li>    <

表示非表示の日付指定をしたスライドバナーの作り方を以前お伝えしました。今回はこれを使って、楽天市場のキャンペーンスライドバナーを作ってみたいと思います！GOLDサーバーに入れて実際RMSやGOLDのページに表示させるまで！わかりやすい説明に努めますので、一緒にやっていきましょう🎵楽天市場の例でご説明しますが、Yahoo!ショッピングにもご利用いただけます。（⚠️要トリプルサーバー）Swiperスライドバナーを用意する①以前の記事を参考にSwiperスライドバナーを用意して下さい。②表示非表示の日付を指定するためのJavaScriptも下記を参考に追加しておいて下さい。楽天キャンペーンバナー画像を用意するこちらも以前の記事を参考に、同じサイズのキャンペーンバナーを2つ以上ダウンロードしておいて下さい。ここでは616x120pxのバナーで説明していきます。😉⭐️もちろんオリジナルのバナーでもいいです。ポイントは同じサイズのバナーを2つ以上ということ。⭐️Yahoo!ショッピング用に作りたい場合は、トリプルサーバーを用意してください。Yahoo!ショッピングもキャンペーンバナーを配布しています。ダウンロードした画像はswiperフォルダのimgフォルダに入れます。名前はなんでもいいのですが、ここではevent01.gif, event02.figとしておきます。⭐️キャンペーンの開催期間、キャンペーンの告知解禁日時（もしそのキャンペーンにあれば）、楽天での露出・特集企画ページのURLも後ほど使用しますのでメモしておくかページを開いておいてくださいね。😉htmlに期限を入れる今回は、-

CSSを書く方法は3種あります。1️⃣ 直接書く2️⃣ <style>タグ内に書く3️⃣ CSSファイルに書く今回は3️⃣のCSSファイルに書く方法をお伝えしていきます。この方がファイル内のコードもスッキリしますのでおすすめです。CSSを書く方法3種について1️⃣ 直接書くタグに直接書く方法。例↓<p style="color:red;">この文字は赤になります。</p>2️⃣ <style>タグ内に書くこんなふうにhtml内で<style>と</style>の間に書いていく方法1️⃣や2️⃣の方法だとコードが増えてくると煩雑になってきますので、htmlとCSS分けて書くのが望ましいです。（以下では、上の画像のindex.html内のCSSを外部化する手順で進めて参ります。）CSSファイルを作って読み込ませるじゃあどうしたら良いのかというと、.cssというファイルを作り、その中にスタイルを書いていきます。そしてhtmlには、「このcssファイルを読み込んでね。」と指示を書きます。⭐️cssファイルを作ろうstyle.cssなどと名前をつけて保存します。cssというフォルダに入れて分けておくと管理がしやすくなります。▼testフォルダの中に、index.htmlやcssフォルダが入っている例▼style.cssの例。cssファイルには<style>タグは不要です。htmlにcssファイルを読み込ませるhtmlの<head>タグ内に、下記のように書きます。<link rel="st

前回Google Fontsのはじめ方（<link>タグを使った方法）について、ご紹介しました。今回はもう一つの＠importを使った導入方法をお伝えしていきます。Google Fontsにアクセス▼サイトはこちらhttps://　fonts.google.com/Google Fontsにアクセスしたらフォントを選んで追加していきます。今回はKaisei Decolというフォントを使ってみたいと思います。フォントの太さが3種用意されていました、今回はRegular 400とBold 700を選んで追加してみます。使いたいフォントを選び終わったら、右上の(■+)のアイコンをクリックして詳細を見ます。現在選んでるフォントが出てくるので、使わないフォントはRemoveしておきます。今回はKaisei DecolのRegular 400とBold 700を使いたいので、Rampart Oneフォントは (-) で消しておきます。そして今回は＠importを使ってみたいので、そちらのラジオボタンをチェックしてコードをコピーします。その下のCSSもコピーします。今回はhtmlの<style>タグ内にコピペしてみました。▼html。クラス名p01にスタイルをつけます。このhtmlファイルをブラウザで開いてみます。▼表示されました！▼Bold 700の方を使いたい時は、font-weight: 700;　を追加します。▼太くなりました！⭐️ダミーテキストちなみにダミーテキストはLorem Ipsumというサイトからのものです。サイト作成時などで、とりあえずダミーで何か

Googleはフォントも提供してるのをご存知でしたか？WebサイトにGoogle Fontsはいかがでしょうか？今回はGoogle Fontsを一緒に使ってみましょう！Google Fontsにアクセス！▼サイトはこちらhttps://　fonts.google.com/▼ダークモードがお好みの方は下記アイコンをクリックすると変更できます▼Languageタブから日本語（Japanese）を選びます▼日本語が出ました▼今回はこちらのRampart Oneを使ってみることにします。▼クリックすると下記のページになりますStylesのところで、サンプル文章を入れたり大きさを調整して、その下で見栄えを確認できます。▼このフォントを使うことに決めたら、右側のSelect +を押しますそしたらフォントが追加されますので、右上のアイコン（View selected families）をクリックして選んだフォントを見ます。↑追加されたフォントは、Select +の部分が、Remove -になります。すると、今選んでるフォントが出てきます。もっと他のフォントも使いたかったら再度選択して追加していきます。今回はこのフォントだけでいいので、<link>のコードをコピーします。▼コピーアイコンをクリックしてコピー▼<head>タグ内にコピペします▼次に、先ほどのコードの下にある、CSSをコピーします今回は、クラス名p01とついたpタグにスタイルを当てるとします。▼htmlファイル（今回はCSSをhtml内に書いた例です）▼ブラウザで表示されました！できましたか？今回は以上にな

バナーの上にマウスを乗せたらバナーの色が薄明るくなったり、リンクにカーソルを合わせたら文字の色が変化したりする時ありますよね、このようにマウスを乗せた時に起こる変化のことをホバーエフェクトと言います。今回は画像の上にマウスを置いたら画像が暗めになって、拡大するというホバーエフェクトを作っていきます！完成見本はこちら！↓マウスを置くと画像がグレーがかって拡大するhtmlはこちら！<div class="category">   <a href="★リンクURL★">    <img src="img/banner01.jpg" alt="" />    <span>New Item</span>   </a>   <a href="★リンクURL★">    <img src="img/banner02.jpg" alt="" />    <span>Bag</span>   </a>  </div>CSSはこちら！<style>   .category {    display: flex;    flex-direction: row;    gap: 2rem;    text-align: center;   }   .category a {    position: relative;    width: 300px;    height: 300px;    overflow: hidden;    color:

期限を設定してバナーを表示・非表示できたら、日時を気にして自分でいちいち外さなくていいし、楽天市場のキャンペーンみたいに夜中に終了しようと、時間になったらサッと非表示にできます！コピペで出来るので、興味がある方はぜひやってみて下さい⭐️Swiperスライダーを用意する先日の記事のSwiperスライダーを使っていきます。index.htmlに時間指定で表示非表示のJavaScriptを追加する下記を</style>と<script>の間についきします。<!-- time limit --><script type="text/javascript">let myClass = document.getElementsByClassName("js-time_limited");for (let i = 0; i < myClass.length; i++) {let appearTime = myClass[i].getAttribute("data-appear_time");let disappearTime = myClass[i].getAttribute("data-disappear_time");let threshould_start = Date.parse(appearTime);let threshould_end = Date.parse(disappearTime);const current = new Date(Date.now() + ((new Date().getTimezoneOffset

今回はCSS、ホバーエフェクトのお話。四角い画像の上にマウスが来たら、ゆる〜っと丸くなる、文字色も変わるようにしたいと思います。コピペで使っていただけます！完成見本▼これが基本▼マウスを置くと丸くなって文字が赤くなる▼インスピレーションを受けた、楽天市場トップページ（rakuten.co.jp）こちらは通常丸い画像が、マウスを乗せると四角くなって文字の色が変わってるhtmlはこんな感じ<div class="category">   <a href="★リンク先URL★"><img src="img/banner01.jpg" alt="" />New Item</a>   <a href="★リンク先URL★"><img src="img/banner02.jpg" alt="" />Bag</a></div>このhtmlと同じところにimgフォルダがあって、その中にbanner01.jpgとbanner.02.jpgがある設定です。違うところに画像がある場合は、画像のURLをimgタグのsrc内に入れて下さい。CSSはこんな感じ.category {display: flex;flex-direction: row;gap: 2rem;text-align: center;}.category a {display: flex;flex-direction: column;color: #333;text-decoration: none;}.category img {widt

ヘッダーなどに、「画像が切り替わって表示されるスライダー」があると目を惹きますよね！今回はSwiperという人気のスライダープラグインを使って作っていきたいと思います。フォルダを用意する今回はswiperというフォルダで進めていきます。画像を2枚以上用意するswiperフォルダの中にimgフォルダを作ってその中に、同じサイズの画像を2枚以上入れます。名前はここではbanner01.jpgとbanner02.jpgとしておきます。index.htmlを作る下記コードをまるっとコピペして、index.htmlという名前で保存します。これもswiperフォルダに入れます。<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>swiper</title><link rel="stylesheet" href="https:　//cdn.jsdelivr.net/npm/swiperあっと9/swiper-bundle.min.css"><script src="https:　//cdn.jsdelivr.net/npm/swiperあっと9/swiper-bundle.min.js"></script></head><body><!-- Sli

楽天市場の会社概要ページって味気ないと思いませんか？ナビボタンを設定していない、トップページに戻るボタンとかお店のロゴや看板も何もない、という店舗様も少なくはないようです。▼会社概要ページ（パソコン）▼会社概要ページ（スマホ）パソコンで見てもスマホで見ても、戻るボタンを押してもらわないとお店のページに戻れないし、ほぼ文字しかないページになります。このページにもトップページや商品ページへのリンクを設置した方が親切かと思いますので、今回はお客様にわかりやすいボタンの設置の仕方を解説したいと思います！1回設定すれば、パソコン・スマホ両方で表示されます。少しでも離脱や機会損失などのリスクの少ないお店を目指しましょう！出来上がり見本▼出来上がりはこんな感じ。トップページや商品一覧ページに戻れるようにわかりやすくボタンを設置します。RMSの会社概要ページで設定するでは早速。RMSにログインしたら、店舗設定→[5 基本情報設定]→会社概要ページに進みます。▼説明文項目の3つ目にある、[説明文1]をクリック▼会社情報ページ 説明文タイトルと説明文を埋めていきます。①②③は各ボタン。＊タイトルは何かしら入れないといけないようです。付けたくなかったら、スペースでもOK。ここに入れたものは見出しになります。例えば、「ショッピングを続ける」とか「買い物を続ける」などはいかがでしょうか？😉①TOPへのボタン⭐️下記をコピペでOK♪　https:の後のスペースは詰めて下さい。<a href="https:　//www.rakuten.co.jp/shopname/" style="backgroun

Yahoo!ショッピングのショップに、詳細検索窓を設置していきます。パソコン・スマホ両方で使えます。完成見本▼こんな感じになる予定htmlをコピペしよう▼下記をhtmlが書けるところにコピペして下さい。2行目のhttps:の後のスペースは詰めて下さい。<div style="margin: 0 auto;max-width: 190px;padding: 5px;"><form name="form1" method="get" action="https:　//store.shopping.yahoo.co.jp/★ショップURL★/search.html"><p style="margin: 10px 0;width: 100%;"><input type="text" name="p" value="" placeholder="ショップ内検索" style="box-sizing: border-box;width: 100%;max-width: 300px;height: 35px;margin: 0;border: 1px solid #d8d8d8;border-radius: 3px;background: #fff;color: #333;"></p><p style="margin: 10px 0;width: 100%;"><span style="font-weight: bold;font-size: 90%;">商品価格</span></p>

はじめまして、ココナラでHTML/CSSコーディングサービスを出品しているLakis web studio..と申します。当サービスでは品質を保つためにどのような項目を納品前にチェックしているのか、出品サービスの説明欄には記載しきれないため、以下にまとめました。当サービスに興味を持ってくださったお客様のご安心につながると幸いです。◆ベーシック認証制作過程でコーディング中のwebサイトをお客様に確認していただくために、構築環境のサーバーにデータをアップします。外部の人がこの仮のwebサイトを閲覧できないようにするために、ベーシック認証を設定します。◆ブラウザ表示崩れチェック以下のブラウザの最新バージョンにおいて、デザイン通りにコーディングが出来ているかどうか、表示崩れが起きていないかどうか確認いたします。・スマホ：Android, iPhone（Chrome, Safari）・タブレット：iPad（Chrome, Safari）・PC：Windows（Chrome, Microsoft Edge, Firefox）通常、Internet Explorerに対応したコーディングは行っておりません。また、作業環境がWindowsですので、Macでの確認作業は出来かねますことをご了承くださいませ。◆コンソールチェックコンソールエラーとは、ブラウザの開発者ツールのコンソールに表示されるエラーメッセージのことです。この部分にJavaScriptやCSSのエラー等が表示されます。コンソールに問題のあるエラーが残っていると、ブラウザの処理速度が低下し、Webページの読み込み時間が長くなる可能性

こんばんは、あるいはこんにちは。ワウちゃんです。最近SPY×FAMILYにハマっている、なんとも流されやすい人種です。さてさて、以前からずーっと作ると言っていたサイト(かれこれ1年?)、今ようやく着手しています。やっぱり、コード書くのって楽しいですね!!制作にあたって、xdでワイヤーフレームなんかも作っちゃいましたよ🎊うん、なんかもうワイヤーフレーム作れちゃう自分てかっこいい、と思ってしまうところがまた痛いな…(^^;)現在はHTMLとCSSのみで構成しているんですが、文字が浮き出てくるようなかっこいいアニメーションも追加したいので、ゆくゆくはJavaScriptも実装できたらなと思っています。↑今はまっさらだけど、ここに文字浮き出てくる予定です。生涯、勉強。と現役引退してからも勉強をしていた祖父のように、わたしも精進しなければいけない時ですね。コーディング大好きだから、こっち系にキャリアチェンジしたくて多数の起業さんにもあたっているのですが、成果物がないと雇ってもらえないということにも気づいたので(当たり前www)、やる気出しますよー💪ココナラでも、万一の奇跡を待つのなら、成果物が必要ですしね!しかし、一日に取れる時間は2-3時間ととても短いので、ゆっくりゆっくり仕上げていこうと思っています。再就職はいつになるやら。。(清掃員辞めることにしました✨)2-3時間では、エラーがとても多くてなかなか進まないのが現実です😭😭公開はまだまだ先になるけど、サーバーやドメインもいまいちよくわかっていないので、勉強しなくては!

WIXで作成していると、フォームを利用してオーダーをしてほしい時に、値段の組み合わせやメニュー選択によって費用が変わるようなサービスをされている業種などでは、お客様に利用してほしいと思っても費用感を伝えることが自動で出来ないので、オーダーを頂いてから後ほど返信するか？もしくは、予め簡単な費用感を出しておいて、後は直接お問い合わせしてもらうしか無いですよね？でも、このハードルが結構高いです。実際にアクセス解析を見ていくと、問い合わせを見ても離脱する方が多いのが事実です。切羽詰った方以外はどんな業種でも、オーダーは勿論、お問い合わせすら腰が重いのです。ある程度の費用感を伝えることが出来るとお客様も安心そこで、お客様自身で費用や価格を動的に計算して料金や費用のイメージしてもらうことで、お客様は気を使わずにシュミレーションが出来るので安心感を与えることが出来ます。WIXでお客様に対して費用がいくらぐらいになるのかを伝えたい時に、ネットショップや販売プランなどを使えば、全て用意されているのでデータを入れるだけで簡単に価格や決済もできます。しかし、エアコンの修理や車検の費用など、お客様の希望に合わせて、費用が加えていくサービスを提供する企業の皆さんには、メニュー構成をお客様に伝えながら選択して頂いて価格や費用を出すようなサイトを簡単に作ることができません。事業のチャンスを掴むのか？捨てるのか？実際にWIXでサイトを作った方や作りかけてる方は、WIXで作ってきた時に出来ることと、出来ないことの壁にぶつかる時がきます。でも、WIXでどこまで出来るのかを予め知っていれば、今できなくても将来、あな

CSSは装飾系を指定するもの。文字サイズを指定したり、色をつけたり、背景に画像をつけたり。。。CSSを適用させる方法としては3通り。（Javascriptとか置いといて）①htmlタグに直接書く②html内の<style></style>の中に書く③cssのファイルを作る今回もサクッとわかりやすい解説に努めます！①htmlタグに直接書く例えば、下記のようにpタグなどに直接書く方法です。<p style="color:red;">月曜日は定休日です。</p>▼▼▼こうなる▼▼▼②html内の<style></style>の中に書く下記のように、styleタグ内に書く方法です。<p style="color: red;">月曜日は定休日です。</p>  <style>   p {    background: yellow;    color: orange;   }▼▼▼こうなる▼▼▼気づきましたでしょうか、上の例ではpタグに、「文字赤くしてよ」という指定と、「文字オレンジにしてよ」っていう指定をしています。②の<style>の中から指定するより、①の直接指定した方が優先度が高いので、文字色は赤になっています。ちなみに、Yahoo!ストアクリエイター内にはstyleタグは書けないので、①か③の方法を使います。③cssのファイルを作る例えば、style.cssなどと名前をつけたファイルを作って、それをhtmlに読み込ませます。（このcssを適用してねと指定する）外

楽天RMS内のPCヘッダーコンテンツの一番最初に<style>を書いている人は結構多いようです。<style>内にいっぱい書いているために、結構スクロールしないといけなくて、肝心のヘッダーの中身どこ？なんてことも。。。この<style>、最初に書かなくてもOKです。極端な話、フッターの一番下に書いても効きます。実際、<style>の中よりもpタグやimgを追加したり削除することの方が多いのではないでしょうか？あまりいじることがないなら毎回スクロールしたりしなくてもいいように、一番下とかに移動しても良いかもしれません。また、1ヶ所にまとめて書く必要もありません。例えば、ヘッダーなどに年末年始休業のお知らせなどを入れたいとします。こんな感じで↓htmlタグ、文章とスタイルを一緒に書いて、、、<!-- 年末年始のお知らせここから --><div class="newyear2023"><p>年末年始のお知らせ</p><p><span class="red">2022年12月30日から<br>2023年1月4日まで</span></p><p>誠に勝手ながら、<span class="red">休業</span>とさせていただきます。</p></div><style>.newyear2023 {border: 5px solid #000;text-align:

楽天RMSでテーブルタグを使って、レイアウトを作成している方、結構多いのではないでしょうか？テーブルタグって、、、<table>   <tr>    <th>カテゴリ01</th>    <th>カテゴリ02</th>    <th>カテゴリ03</th>   </tr>   <tr>    <td>りんご</td>    <td>みかん</td>    <td>バナナ</td>   </tr>   <tr>    <td>200円</td>    <td>300円</td>    <td>100円</td>   </tr>  </table>こんな感じで何個も入れ子になって、混乱しちゃうことありませんか？閉じタグ（</で終わる、締めのタグ）が足りなくて、エラーが出て、保存出来なくなっちゃったり。。。（T＿T）保存出来たけど、実は<td>と</td>の数が合ってなかったり、入れ子の順番が間違っていたり。。。間違いを見つけるのも大変です。実はテーブルタグを使わなくてもレイアウト出来たりします。例えば、サイドバー。左側に200pxとかでカテゴリーやカレンダーをおいている場合。。。ここもテーブルタグを使わなくても、divタグで囲めば出来ます。&lt