すべてのカテゴリ

初めまして、閲覧いただきありがとうございます！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時間では、エラーがとても多くてなかなか進まないのが現実です😭😭公開はまだまだ先になるけど、サーバーやドメインもいまいちよくわかっていないので、勉強しなくては!

ご覧いただきありがとうございます！昨日ご紹介させていただきました記事にはパソコンサイズのものを載せていましたが、今日はモバイルサイズ版をご紹介します。ヘッダーはパソコンサイズと同じく、追従するように指定しています。実は、このページ、モバイルファーストという設計方法を使用して作っていました。近年ではパソコンで見るよりも、スマートフォンなど小さなデバイスでWEBページを視聴するユーザーが増えたことでも有名です。モバイルファーストはスマートフォンにてWEBページを訪れた際に、携帯端末での使いやすさを優先して設計されますので、パソコンよりも、スマートフォンでの訪問が多く予測される場合はモバイルファーストでの設計をおすすめいたします。モバイルサイズ優先で制作できるコーダーをお探しの方はぜひご相談ください。

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

自分の過去の振り返りは一旦手を止め、今回は自分がブログを始めたきっかけ等を書いていきたいなと思います。以前WordPressにてブログを運営してたことがあったんですが、半年ほど経ったある日に、急にサイトが真っ白になっちゃって、原因も分からず、一応色々試してみたんですが、一向に直らず、諦めちゃいました。。だったら、自分でサイトを作成すればいいじゃん！ということでサイト作成をはじめたのがきっかけでした。「そうだ、まずは本屋に行こう」と思い、HTMLやらCSSやらJavaScriptに関する本を買い漁りました。とにかく初心者にわかりやすい本をベースに買いました。帰ってきて、まずはHTMLの本から読んでみる。「ふむふむヘッダー、ボディ、フッターがサイトの基本構造なんだな」メインタグはボディタグの中に記載するんだな。なんとなく構造が分かってきて、やる気アップ！！CSSはHTMLで書いた内容や画像の位置を修正したり整えたりするものなんだな。そして一通り、HTMLで画像やらテキストを書いて作成したサイトをCSSで整えようと試みる。。あっれぇ、なんで画像の横にテキストがきてくれないんだあ、わっかんないなあと悪戦苦闘。何度も何度もネットで調べて試すもうまくいかず、、CSS嫌い。。。後で分かったことなんですが、ブログを初めて挫折する原因が割とCSSにある、だそうです。わかる気がするー。だって書いた通りにならないんだもーん。。それでも継続は力なりということで、諦めずにサイト作成に取り組みました。そして段々形となってきました！レスポンシブ（スマホ対応のデザイン）も行い、一通り完成しました！ただ、文字数

ホームページ制作に欠かせないHTML・CSS。制作・指導経験豊富なインストラクターがビデオチャットを通じて画面を共有しながら丁寧にレクチャーします！\\\ こんな方々におすすめです♪ ///・わからないところがわからない・やってみたいけど、何のために、どんな目的で、どんな風に使われているのか、よくわからない・ネットでいろいろ調べてみたけどいまいちポイントがわからない・学習サイトなどを利用してみたがいまいちピンとこない・書き方の基礎を覚えたい・何か自分で作ってみたい・仕組みだけでも押さえておきたい・サクッと概要だけ押さえたいHTML・CSSの入り口でつまずいている方、過去につまずいた経験がある方におすすめです！

Webサイトのコーディングは、デザインを再現するだけの作業だと思っている方もいるかも知れません。確かに、コーディングの第一歩として、デザインを再現する技術・知識は絶対に必要ですが、ただデザインを再現する以外にも様々な事を考慮してコーディングする必要があります。細かく上げたらきりがないですが、例えば、、、・デザインを再現する・主要ブラウザで表示崩れが起きないようにする・文法違反にならないよう仕様に準拠する・メンテナンス性を考慮したCSS設計を行う・インデントを揃える等、記述に一貫性を持たせる・適切な文書構造のマークアップを行う・パフォーマンスが落ちないようにする・JavaScriptやPHP等は脆弱性が無いコードを書く・アクセシビリティに配慮したコーディング辺りが有ります。それぞれ、具体的に見ていきましょう。デザインを再現する固定レイアウトではなくリキッドレイアウトのレスポンシブ対応が一般的な現在、ピクセルパーフェクトと呼ばれる1pxのズレも許さないようなコーディングは求められるケースもほぼ有りませんし、そもそも現実的では有りませんが、デザイン再現はコーディングにおける最も基本的な部分です。主要ブラウザで表示崩れが起きないようにするこれもデザイン再現と同じような部分ですが、Chromeでは崩れないのにFirefoxでは崩れてしまっては、最低限の品質も保てなくなってしまうので、主要ブラウザで崩れないようにするのも基本的な対応です。文法違反にならないよう仕様に準拠するValidationでエラーにならないようにするだけであれば全部divで組んでも良いのですが、例えば h2の中にdiv

2022年、ウェブページ制作のご用命をいただきました。クライアント様より掲載許可をいただきましたので、皆様にご披露させていただきます。ランディングページ「株ヘルプ.com」ランディングページ作成一からHTML・CSSを編集することから始め、問い合わせのボタンなどに動きを持たせました。また、ヴィジュアルを目に留まるようにして、動きを感じさせるものにいたしました。▲PCでの見え方▲スマートフォンブラウザでの見え方すべての内容を一枚に納めるランディングページ。適正な情報量で、とくにシニア世代の方にも見やすいものを意識して作成いたしております。ウェブページ「株式会社 North Star」ウェブページ作成こちらも一からHTML・CSSを編集することから始めております。企業イメージの「堅実」「透明」「世界」をイメージし、シンプルかつあらゆる世代にも見やすいように構築しました。また、上記ランディングページと同じく、スマートフォンに対応。ホームページのヴィジュアルは、透明感ある地球儀を入れ、爽やかなイメージとしております。▲PCでの見え方▲スマートフォンブラウザでの見え方スマートフォンでは、自動的に横幅を調整し「ハンバーガーメニュー」に切り替わるように設定しました。また、問い合わせフォームはPHPを用い、お客様と企業担当者様へ同時にメールを送信することができます。「シンプルで効果のあるレイアウト」「できるだけどの環境下（3Gなど高速の通信外）でも見やすいもの」「あらゆる世代にも通じるもの」を意識し、ランディングページとウェブページでデザイン・作り方を変えて制作いたします。重ねて掲載許可をいた

Webシステム開発の会社、Nickel Lab. です。今回は弊社のエンジニアがオススメする、HTML+CSSを覚えていきたい人の為の勉強方法を公開します！この方法を実践すれば、がむしゃらに勉強をするより素早く習得することができますので、是非試してみて下さい。よくつまづくポイントは皆同じHTML+CSSを始めるとつまづくポイントはいくつかありますが、皆さん大体同じだったりします。なにがわからないのかわからないできないところを検索しても解決できないある程度わかった後でも、プロみたいな綺麗な作り方がわからないそれ！と思った方には、今回の記事はかなり効果的かなと思います！実践はとても簡単です。順番通りにやってみましょう。1.HTML+CSSの基本中の基本を覚えよう（むしろ基本だけでいい）どんな方法でも、基本中の基本をある程度把握していなければ、手を動かすことができないものです。なので、やっぱりそこは触っておきましょう。HTMLであれば、・<head>と<body>・cssの読み方・見出しと文章の書き方・<div>の使い方・タグにclassを指定する方法これだけ！これだけわかればある程度のものは作れるようになります。フォームを作ったり、クリックしたら何か出来たり。といった事は後回しにしましょう。タグでいうと、以下のものがわかれば大丈夫です。<html><head><body><h1> <h2><p><div>まずはこれらのタグを使って、適当な小説から文章を構成してみて

はじめまして。ご覧にいただき、ありがとうございます。コーディングしてWebサイト・ホームページを作ってる、「ふる」と申します。Web制作会社さまや、個人デザイナーさまと、お仕事をさせていただいてます。これまで制作したものとしては、・１〜２ページのページ・3ページ以上の複数ページ、・ランディングページ（LP）・大規模Webサイトのチーム開発などです。また、Web業界に関わる前は、飲食店やクリーニング店で・店舗運営、店舗サポートなどのマネジメント職・社内研修講師・職人を経験し、様々な職場仲間やお客さまと接してコミュニケーション力を磨いてきました。その経験を今のコーディングにも活かしています。お相手とのイメージや意見のすれ違いを防ぎながら素早くスムーズなコミュニケーションを得意としています。お仕事を共にさせていただいた方たちからは「こちらが気づかなかったことに気づいてやってくれて助かります」「”よしなに”やってくださり助かりました」「返信が早くて助かりました。すぐ対応してくださりありがとうございました」「やりとりがスムーズでありがたいです」などなど、嬉しいお言葉をいただいております。もともとは、自分の手で作り上げていくことが好きで、コーディングもデザインを再現できることにワクワクして好きでやっています。デザイナーさんが考えに考えたデザインを文字（コード）を書いて、パッ！！！とWeb上に出てくるのが、面白いんです。楽しいんです。もちろん、なかなかデザイン通りに表現できないときもあります。そんなときは、とにかくもがいて、もがいて、もがいて調べまくるんですが、できたときの喜びたるや。。。爽

background-imageで画像を表示させる場合、その要素の幅・高さを指定する必要があると思います。widthやheigthが決まっている場合はbackground-sizeで対応できると思いますが、例えば画面いっぱいに広がるような画像の場合、アスペクト比を保とうとするとウィンドウサイズによって高さが変わってしまうのであらかじめ指定するのは難しいと思います。その為、動的に高さを計算したいと思います。計算式(画像の横幅 / 画像の高さ) * ウィンドウに対する割合(vw)ウィンドウに対する割合はvwの単位を使います高さ/横幅とすることで、横幅に対する高さの割合が出ます。その割合に対してウィンドウサイズを乗算します。ウィンドウサイズはvwを使う事で、動的な値を得ることが出来ます。具体例/*CSS*/ /*640×427の画像があり、ウィンドウいっぱいに表示させたいとき*/height:calc(427 / 640 * 100vw);以上です。ご依頼はこちらから。

select2というjQueryプラグインを使うことで、セレクトボックスに機能をつけることが出来ます。もちろんCSSなどでカスタマイズが可能です。カスタマイズ時には、記述したHTMLのコードに、自動生成されるコードを隣接セレクタとして指定することでカスタマイズすることが出来ます。コード例です。/*html*/ <select class="p-selectbox1">   <option value="こぶた">こぶた</option>   <option value="たぬき">たぬき</option>   <option value="きつね">きつね</option>   <option value="ねこ">ねこ</option> </select> /*js*/ /*select2基本的な使い方*/ $(document).ready(function(){     $('.p-selectbox1').select2(); }); /*css*/ /*カスタマイズ例　隣接セレクタを指定*/ .p-selectbox1 + .select2 {   overflow-y: scroll;   height:100px; }以上ですサービスのご購入はこちらから。

パララックスを使って動画のように背景画像を動かすことが出来ます。コードとしては概ね以下のとおりです。画像部分のみ載せています。ご参考になればと思います。/*コード例*/ /*HTML*/ <div id="parallax" class="p-frame"></div> /*CSS*/ .p-frame{   height:10rem;   width:29.8rem;   background-image:url(画像のパス);   background-repeat:no-repeat; }/*JS*/ $(window).scroll(function(){   var height = $(this).scrollTop(); 　　　　/*高さを調節*/  var yLine = height - 290; 　　　　/*parseInt( yLine / 2 )の整数部分(今回なら2)を調節することで、スクロール時の動きを調節。値を小さくすると、大きく動く*/  $('#parallax').css('background-position', 'left top ' +parseInt( yLine / 2 ) +'px');   });ご依頼はこちらまで。

jQueryにおける$(this)を使う事で、下記のように、同一のクラスに対してjQueryで何か操作をするとき、イベントがあった特定の要素にのみ動きをつけたり、値を取得したりできます。言葉だと説明しづらいので、CodePenやテキストエディタで以下のコードを入力してみてください。動画も載せておきます。/*html*/<p>ボタンを押すと色が変わります。</p> <p>thisを使わないと・・・ <div class="box-container1">   <button class="box1"></button>   <button class="box1"></button>   <button class="box1"></button> </div> <p>ボタンを押すと色が変わります。</p> <p>thisを使うと・・・ <div class="box-container1">   <button class="box2"></button>   <button class="box2"></button>   <button class="box2"></button> </div>/*css*/.box1{   width:4rem;   height:1rem;   margin-right:1re

Webサイトによってサイトデザインは様々ですが、header部分はある程度似通っている部分があると思います。そのため、案件を請け負った際に時間短縮をするためにheader部分においては、ある程度のテンプレートを作ってしまおうと思います。前回1パターン作っているので、今回は第3段です。PC時のレイアウトは以下のとおりです。サブメニューについては、クリックで表示させるようにしています。レスポンシブでハンバーガーメニューを表示させています。ハンバーガーメニューをクリックすると、横からサイドバーが表示されるようになっています。✕ボタンを押すと戻っていきます。こちらもよくあるパターンのレイアウトなので、時間短縮に繋げられると思います。ご依頼はこちらまでお願いいたします。

初めまして。大阪でWEBデザイナーをしておりますShirokumaDesignと申します。ディレクション、Webデザイン〜コーディングまで対応可能です。 Webや紙の制作物でお困り事があれば、お気軽にご依頼くださいませ♪ ありがたいことに、LP（ランディングページ）制作の依頼を多くいただいております。基本的にはWEBサイトのコーディングをメインで行っているのですが、案件のご依頼が多数あるため、LPのコーディング費用を明瞭化させていただきます。以下、依頼基本的な費用です。お客様にとってベストな提案ができればと思っております。WEBサイト構築がメインのため、合間にLP制作を進めさせていただくかと存じます。納期やスケジュール・費用感などの関係上、お受けすることが難しい可能性もございます。その点はご理解・ご了承くださいませ。ココナラでは「LP専門」のプロがいらっしゃいます。納期やコストなど見合わない場合もあるかと思います。その際は「LP専門」のプロにご依頼いただくのも選択の一つとして、ご一考いただければと存じます。お客様にとって、きっと満足にいくものを仕上げていただけるかと思います。■基本依頼をご検討いただいているお客様の、参考になれば幸いでございます。引き続き、ShirokumaDesignをよろしくお願いいたします。

ウェブ制作のスキルを上げるべく、時間を見つけて何かしらのメソッドを身につけています。コーディングしながら、メモをとる…の繰り返しで、まだまだ未知数の部分や理解できていない部分もあったり、こんなに大変なのかと日々痛感しております。ネットでウェブページ制作についていろいろ調べていて「パララックス」という手法があることを知り、早速取り入れてみました。「パララックス」とは「視差」を意味する用語で、画像に奥行きを出したりして効果を出すことをいいます。というわけで、試行錯誤しながら作ってみたのが「架空の温泉旅館」のサイトです。あいにく、ココナラブログは直リンできないので、動画にしたものを載せておきます。PC版では、背景画像を固定しつつも、要素はきちんとスクロールするように作りました。そして、テキストやボタンなどは下からふわっとフェードインするアニメーションを加えてみました。PC版（スクロールがカクカクしてます^^;）スマホ版…というわけで、これについてもHTMLやCSS、JQueryなどの文章を記載していきますが、階層違いでボタンが機能しなかったり、レイアウトが崩壊するなど、予想外の出来事が起きましたが、とことん原因を突き詰めれば解決するものだと勉強になったのでした。

最近ではWordPressやホームページビルダーなどで、ウェブページを作るのに難易度が下がってきています。実は20年ほど前にウェブページ作成のレクチャーは受けたんですが、長年携わっていないと忘れてしまうもの。また、Flashがなくなるなど環境も変化しているので、昨年改めてウェブ作成にチャレンジすることにしました。いつもIllustratorやPhotoshopなどのアプリを使っているので、Adobeのウェブ制作アプリ「Dreamweaver」を活用することにしまして、Adobeのサイトには動画でウェブの作り方を学ぶことができるので、それを見ながらメモをする…。そのノートも100ページを超えたかな。Adobeの推奨するやり方は「HTML」や「CSS」などといったコードを編集するというもの。ワード・エクセルなどのように、直接文字や図形を入力して直感的に作るのとは違い、コードを打ち込んではブラウザで開いて確認する。トライ＆エラーの繰り返しでした…。というわけで、先日。お客様から簡単なウェブページのお仕事をいただきまして、自分の魂に火がついてしまいました。本格的に、自分のウェブページを作ってみようと。HTML・CSSの編集からスタートしたわけですが、「margin」と「padding」の違いを改めて整理したり、CSSで飾りつけた文字や色やマージンが正確に表示されていなかったのを修正したり…。やっぱり日常的にコーディングをしないと、なかなか覚えられないです。ノートにまとめても、その内容を思い出せなかったり…。というわけで、Dreamweaverとノートや教本と格闘しながら復習すること数日

平素は私のページをご覧くださいましてありがとうございます。ココナラに登録し、昨年８月に初の受注。そして2021年に入り本格的に受注をいただき、20件を超えました！これもひとえに、皆様がご指名をくださった賜物と、感謝申し上げます。・パッケージデザイン・スイーツデコ作成・選挙案件（ビラ・ポスターなど）・ランディングページ制作など、たくさんの経験をさせていただきました。とくにHTML関連は以前学んだことを思い出しながら、まとめたノートをペラペラめくりながら作業するという、学校での勉強に似た懐かしさを感じながらのお仕事でした。また、選挙・パッケージは、細かな取り決め・法律がありますので、それをネットで調べ、遵守して表記することを学びました。ご発注いただきました皆様には、改めて感謝申し上げますとともに、これからご検討の皆様、ぜひお手伝いさせてください。↓マイページです↓https://coconala.com/users/843209

:hoverとは要素をマウスオーバーした際に実行される疑似クラス。（リンクを作成するときに使用するaタグと一緒に使用される）疑似クラスとは、すでにいくつか用意されているクラスで、要素が特定の証券になったときに適応されるもの。aタグに使用できる疑似クラスは…link → visited → hover → active がある。メリットとしては、マウスオーバーしたときに　『ココがリンクですよ！』とわかりやすくページに誘導することができます。こんな感じで背景カラーが変わるように設定！マウスオーバーすると文字や背景の色を変えることができました！WordPressのプラグイン【　シンプルカスタムCSS＆JS　】を使用して次のようにセレクタを指定してCSSを追加しました。.body .has-watery-red-background-color:hover{     background-color: #f2b8b8; ｝できるようになったことをブログで書き留めていきたいと思っています。参考になればと思います。もし間違えなどあればご教授ください。ではまた！さようなら～

使い勝手もよく、料金もほぼ最安値に近いということでオススメのサーバーがロリポップです。弊社もここを利用しています。ちなみに、HTML＋CSSでHPを作れば、弊社のように業務用でない限りは110円（月額）でOK。しかし、ワードプレスで作ったHPの場合はこのプランは使えません。最低価格が４４０円（月額）となり、そしてその料金表がこちら。これを見た方は、エコノミーはなぜダメなの？と思われるかと思います。その理由がこれ。そう、最安値のエコノミーは、ワードプレス非対応なんです。その際たる理由は、以前ブログにもあげましたが、データベースを使うか使わないかと言う点です。データベースに関することはここでは割愛しますので、ぜひ過去のブログを読んで下さい。簡単に言えば、HTML＋CSSで作ったサイトはサーバーを占有する容量が大したことはありません。一方、ワードプレスはブログ機能があるため、使用者が書けば書くほどデータベースに蓄積され、サーバーを占有する量がどんどんどんどん増えて行く。したがって、サーバーを提供する側からすれば、HTMLのHPとワードプレスを同額で提供するのはちょっとね。と言うことでしょう。ただ、長期で利用すれば料金は徐々に安くなっていきます。ちなみに、ワードプレスを無料で利用できるサーバーもあります。これを利用する際に注意する点は３ヶ月更新であること。更新が近づいてくると、メールが届きます。これをクリックするだけで更新完了。忘れたら契約打ち切りとなります。現在のところ、更新回数に上限はありませんので、一応、永久利用可と言ったところ。当面は広告出ませんが、長く利用すると広告が表示され

言葉は聞いたことがあるけど、この２つどう違うの？で・・・結局なに？そう言われる方も多いと思います。今日はこの２つの違いと目的について説明したいと思います。その前に簡単にインターネットの仕組みを理解していないと、ここまで辿り着かないもんで、先にその解説。インターネットの仕組みを簡単に解説すると、こう。①HPを製作したAさんは、A自身が契約する領域（サーバー）にあるプログラムを仕込んだデータをアップロードする。そして、そのサーバーにはURLと呼ばれる名称がある。　⬇︎②HPを見たいBさんは所有するスマホやPCの端末と呼ばれる装置でURLを打ち込み、サーバーにアクセス。　⬇︎③Aさんのサーバーは、Bさんからのアクセスを感知し、保存されているデータのコピーをBさんの端末に向けて送信する。　⬇︎④Bさんの所有する端末は、Aさんのサーバーから受け取ったデータのコピーを受信。結果、BさんはHPを見ることができる。ざっくり言えばこういう流れ。この一連の流れの中で、Aさんが仕込んだプログラムは２回発動するチャンスがあります。まず１回目は②または③の段階での発動。そして２回目は④の段階での発動です。④で発動されるプログラムこそが、Javascriptとなります。参考までに、Bさんの端末のことをフロントエンドと呼びます。そして、Aさんのサーバーのことをバックエンド。②と③の部分、つまり、フロントエンドとバックエンドのやり取りで動作するプログラムの代表がPHPですね。Javascriptはフロントエンドで動作するプログラムです。※一部、バックエンドで動作するのもあります。いわゆるコンピューターウイルス

何の記事で読んだのか、また詳しい背景を全く覚えていませんが、インパクトがあった記事でしたのでちょっとご紹介。ただはっきり覚えているのは、第三者の初見ではなく、Googleが発表した内容だということです。その内容とは、特定の企業の検索について、Googleでの検索ではなく、YouTubeでの検索の方が上回ったそうです。そう、「○○会社」と検索する際は、まずググるのではなく、まずYouTubeで探す。そんな時代になったらしいです。実際、企業紹介のYouTubeってどうなの？って聞かれる機会が本当に増えました。以前と違い、動画の敷居も低くなり、Appleユーザーでしたら、iMovieを使えば無料でそれなりの品質の動画編集が超簡単にできます。しかも、知識なくてもなんとなく出来上がる。これすげーなーとか思って触っています。でも実際、企業サイトでYouTubeにアップするかと思った際に、最初にぶち当たる壁。それはアカウント問題だと思います。YouTubeはご存知のとおり、2006年にGoogleが買収しました。よってGoogleのアカウントに紐づいている。ここまでは皆さんご存知な情報かと思います。でもそれが故に、俺がUpした動画ってバレたくないな。アカウント荒らされたら嫌だな。別アカ管理するの面倒臭せー。そんな気持ちをほぼ皆さん感じるかと思います。でも、バレもしないし、別アカを作る必要もないって知ってました？そう、YouTubeで自分のアカウント晒す必要はないんです。簡単にいうと、自分が有する本来のアカウントに子どものような別アカウントが取れて、しかもそれを親アカと紐付けることができる。だ