すべてのカテゴリ

こんにちは。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を使ってみたいので、そちらのラジオボタンをチェッ�