すべてのカテゴリ

はじめまして。Web制作会社で勤めています鐘倉（かねくら）と申します。今回から５回にわたって「静的サイトを高く売る方法」というテーマで連載をしていきます。※ここでいう静的サイトとはWord Press等のCMSを使わずHTML、CSS、javascriptで作成されたサイトを指します。単価が上がらない...Web制作を始められた方はまずHTML,CSSから入るかと思いますが、ひと通りコーディングが身に付いてくると直面する問題があります。それは、「静的サイト（not CMS）」だと単価が上がらない...といった問題です。でもHTML、CSSを使いこなせるって実はすごいことですよね。だってHTML、CSSができればそれだけでめちゃくちゃかっこいいサイトが作れちゃいますもの。ですが実際のところ、静的サイトのコーディングができる人は数が多いです。ライバルが多い＝需要に対しての供給が多い、であれば単価が上がらないのは市場原理ですよね（汗ですからある程度静的サイトコーディングができるようになってくると、やはりWord PressなどのCMSを覚えようかな...となってくるわけです。そんなこんなで奮起してWord Pressを覚えたはいいものの、Word PressでのWeb制作はそれはそれで悩みが多いです。ええ、かなり多いです...涙CMSのコスパの悪さ自身もWeb制作会社でCMSと日々格闘していますから本気で実感しているのですが、CMSでフルのWebサイトを作成するのは実はかなりコスパが悪いです。CMSで制作するがゆえにデザインに制約が出てしまったり、HTML＋CSSだけであれば簡単にコ

ブログやホームページでの見出しの基本的な使い方について説明していきます。見出し「ｈ１」についてホームページなどで言われる見出しというのは「ｈ１」等のタグで囲まれた文のところです。htmlでは<h1>見出しの基本</h1>このような書き方をします。ほとんどのブログサービスやwordpressなどではこのように書かなくてもh1～５くらいまでを簡単に選択できるようになっています。ココナラのブログでは見出しは一つしか選べないようになっているので間違って使うことがないですが、いざ自分のホームページを持ってそのホームページ内で記事を書こうとする際にはいろいろな注意が必要です。h1の使い方の注意点h1はそのページの表題ともいえるものなので一度しか使えません。グーグル検索時に大きく青字で出てくるのがこのh1です。そのページに書かれている内容を分かりやすく書いていきましょう。詳しく書こうとして長すぎてしまってもグーグル検索時に省略されて表記されしまうのであまり効果的ではありません。自分がページの内容を知りたくて検索した場合を想定してクリックしたくなるような見出し文を書いていくことをお勧めします。見出し「ｈ２」以降についてh2以降の使い方の注意点ｈ２以降は何度使っても大丈夫です。しかし、文脈に関係なくh２を連発してしまうのは避けましょう。グーグル検索のシステムの単純ではないのでそういった手法よりもきちんと本の目次のように書いていく方がSEO的に有利です。また、ｈ１、ｈ２、ｈ３、ｈ４と順番に使っていきましょう。例を出してみるとh1　生き物についてh2　変温動物についてh2　恒

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

私のサービス「Webサイトコーディング」が、Webサイト制作・Webデザイン ＞ HTML・CSSコーディングのカテゴリーランキングにて、１位を獲得いたしました。これまでご依頼いただいた方へ、本当にありがとうございます！今後ともよろしくお願いいたします。また、新規のご依頼もお待ちしております(^^)ホームページ・ランディングページを中心に、Webサイトのコーディングを承っております。「デザインは用意できているけど、その後のコーディングはどうすればいいんだろう…？」そんなお悩みを解消させていただきたいと思っております。コーディングからサーバーへのアップロードまで、一貫してお任せいただけます！その他、０からのサイト制作や既存サイトの修正・更新など、幅広く対応いたします。Webサイトについて不明なことがありましたら、電話相談のサービスもありますので、どうぞお気軽にお声掛けください☆今後ともよろしくお願いいたします。 早苗

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

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

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>

楽天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

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

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プログラミングの副業に活用

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

期限を設定してバナーを表示・非表示できたら、日時を気にして自分でいちいち外さなくていいし、楽天市場のキャンペーンみたいに夜中に終了しようと、時間になったらサッと非表示にできます！コピペで出来るので、興味がある方はぜひやってみて下さい⭐️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

はじめまして、ココナラで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ページの読み込み時間が長くなる可能性

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

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

10月となり、出品者ランクが最高位『プラチナランク』となりました！いつもご依頼いただいた方へ、心より感謝申し上げます。今後ともよろしくお願いいたします。 もちろん新規のご依頼につきましても、いつでもお待ちしております☆出品サービス経由でもいいですし、直接メッセージを送信いただいても構いません。まずはお気軽にご相談ください！私の活動としましては、ホームページ・ランディングページを中心とした、コーディングがメインです。サービスはこちら↓様々なデザインデータ（XD、Photoshop、Illustrator等）からのコーディングに対応しております。WordやPowetPointで作成されたデザインであっても、適切なサイズや余白を意識してコーディングするよう努めております。PC版のデザインしか無い場合でも、こちらでスマートフォン表示に適したレイアウトを考察いたしますので、ご安心ください！その他、既存サイトの修正・更新も大変好評となっております。Webサイトについて不明なことがありましたら、ビデオチャット相談のサービスもありますので、ぜひご活用ください！最後までご覧いただいたあなたの力になることができましたら、これ以上の喜びはありません。どうぞ早苗をよろしくお願いいたします。

text-align:center が効かない？原因は display:inline-block でした今回はホームページ制作のコーディング中に見出しを中央揃えにしたいのにうまくいかないという場面がありました。見出しのCSSは元々このようになっていました。.title {  font-size:28px;  margin-bottom:20px;  position: relative;  display:inline-block;}この display:inline-block は、見出しの下線を 擬似要素（::after）で作るために設定していました。例えばこのようなコードです。.title::after{  content:"";  position:absolute;  bottom:-5px;  left:0;  width:100%;  height:2px;  background:#333;}ここで width:100% を指定すると、見出しの幅いっぱいに下線が表示されます。text-align:center を指定してみた見出しを中央にしたくて、次のCSSを書きました。.title-center{  text-align:center;}しかし、見た目が変わりませんでした。原因：inline-block は要素の幅が文字サイズになるdisplay:inline-block の場合、要素の幅 = 文字の幅になります。イメージするとこうです。[事業概要]この状態では要素の幅が文字と同じなので、text-align:center を指定しても 中央に動く余白がありま

最初は普通に▶ ←この記号をそのまま使えばいいかなと思ったのですが、フォントによって形が微妙に違ったり、サイズ調整が難しかったりしてなんだかしっくりこなくて…。そこで今回はCSSで三角を作る方法に挑戦しました！borderを使うと、こんな感じで三角が作れます👇.title::before{  content:"";  display:inline-block;  width:0;  height:0;  border-left:12px solid #8FAF8E;  border-top:7px solid transparent;  border-bottom:7px solid transparent;  margin-right:10px;}線だけで作るので✔ サイズ調整が自由✔ 色も自由✔ デザインと統一できるというメリットがあって、見出しのデザインが一気に整いました✨ちょっとした装飾ですが、こういう細かい部分をCSSで作れるようになると楽しいですね！今日も一歩前進です☺️

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

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

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

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

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

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

こんにちは！サカモトです。今回は新しくローンチ予定のサービスに関してです。みなさん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

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

今回は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

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

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

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>まずはこれらのタグを使って、適当な小説から文章を構成してみて

本日も制作の勉強を進めました。現在は、HTMLとCSSで作成したサイトをWordPress化する練習をしています。最近は企業サイトや店舗サイトでもWordPressを使って制作されていることが多く、更新のしやすさや管理のしやすさが大きなメリットだと感じています。HTMLでサイトを作ることも大切ですが、実際のお仕事ではWordPressを使うケースも多いので、少しずつWordPressの仕組みも理解していきたいと思っています。まだ勉強中ですが、「HTML → WordPress化」という流れをしっかり身につけていきたいと思います。今日も少しずつですが前進です。今はまだHTML・CSSにて作成途中です。

今日は模写コーディングを進めていました。デザインを見ながらHTMLとCSSで組んでいく作業ですが、実際にやってみると「思った通りに配置できない…！」という場面も多くて、試行錯誤しながら少しずつ形にしています。特に今回は・画像の配置・余白のバランス・スマホ表示での折り返しこのあたりを調整しながら作成しました。模写コーディングは「デザインをどうやってコードで再現するか」を学べるので、とても勉強になります✨まだ細かい調整が残っているので、完成したらまたブログで紹介しようと思います！

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

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

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

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

商品画像とか、ブログの記事とかに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などと名前

ヘッダーなどに、「画像が切り替わって表示されるスライダー」があると目を惹きますよね！今回は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

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:

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

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

Visual Studio Codeは、比較的新しい入力エディタでWEBと言うよりバリなプログラマーユーザーのエディタと思ってます。サクイはmacromediaの頃からのDREAMWEAVERユーザーです。入力補助の温い環境に染まったしまった事もあり、縁のないものと考えていました。ところがたまたま目にした「Web制作で使えるVSCode」みたいな記事。入れてみました。Wordpressの管理画面から手入力もしてるんで、特に抵抗も無く使えそう。軽いし、良いわ、コレ（笑）保存時、勝手に整形してくれるんでインデントもキレイ。プラグインも豊富。SCSSの階層もわかりやすい。編集先に移動しやすい。まだ2つのエディタを行ったり来たりだけど、VScodeメインになる日が来たりして。グラフィックもあるんでフォトショとイラレは必要なんで、Adobeのプランはやめられないけどね（笑）

背景色、特にグラデーションにノイズを入れると良い感じになるので昔からノイズのpng画像を使ったりしてました。今朝、最近の手法があるじゃネって、ふと気になりました。ググってググって、BASE64使って疑似要素でってのが使いまわしが良さげです。朝からチョット得した気分になったサクイです。今デザインしてる案件に使えないかな（笑）

月曜日の朝。さて、「今週も楽しく頑張ろ～っ」自分に活を入れながら、一向にテンションの上がってこない自分を騙すかのようにネタ探しと称したネットサーフィンで時間を潰してしまっています（笑）そんな中、某サイトの情報。Google検索、IE11のサポート終了。これでクライアントに出来る言い訳の理論武装できたかな（笑）cssもunsetとか多用できるかな。わかんない時initialとか、結構便利に使ってるしな～（笑）機械翻訳だけど以下「Internet Explorer 11は、MicrosoftのWindows 8.1リリースの一部として2013年に最初にリリースされ、その後、人気のあるWindows 7に移植されました。当時はわかりませんでしたが、Internet Explorer 11は、Microsoftの悪意のあるユーザーの最終リリースになります。 Webブラウザー、最終的には2015年のWindows10の発売によりMicrosoftEdgeに置き換えられました。MicrosoftがGoogleのChromiumエンジンでEdgeブラウザを再構築するという大胆な動きをするまで、古いバージョンのWindows上のデバイスを使用しているユーザーはEdgeを利用できませんでした。これにより、GoogleChromeやMozillaFirefoxなどのサードパーティのブラウザをインストールすることにした場合を除き、Windows 7、8、および8.1のデフォルトのブラウザとしてInternet Explorer11が残りました。このため、Internet Explorerは依然として

こんにちは、まっく‘＠Studio MKです。今回は、WordPressで動画を設置した際に起きた 「スマホで動画が白画面＋再生ボタンだけになる問題」と、その解決方法をまとめます。 ---  ■ 発生した問題 動画自体は正常に再生されるものの、 初期表示が以下のような状態になっていました。 * 白い背景 * 再生ボタンのみ表示 * サムネイル（動画の静止画）が出ない 👉 見た目としてかなり違和感があります ---  ■ 原因 使用していたのは 「メディアとテキスト」ブロック このブロックには以下の制約があります。 * 動画の「ポスター画像（サムネイル）」が設定できない * videoタグの細かい制御ができない 👉 つまり 初期表示をカスタマイズできない仕様-- ■ 最初に試した解決方法 カスタムHTMLで以下のように対応 ```html <video controls poster="サムネ画像URL">   <source src="動画URL" type="video/mp4"> </video> ``` 👉 これは正しい方法ですが… ---  ■ 問題点 * レイアウト調整が面倒 * ブロックエディタとの相性が悪い * 実務では修正しづらい ---  ■ 最終的な解決方法（おすすめ）  👉 2カラム構成に変更  左：動画ブロック  右：テキスト これにより👇 * 動画ブロックでポスター画像設定が可能 * レイアウトも自然 * WordPress標準で完結 ---  ■ 実装イメージ ```text [ 動画（サムネあり） ]　[ テキス

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

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

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

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

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

今回は方向性を変えて、営業について自分が知る方法としては⓵クラウドサービスでの営業⓶web制作会社への営業③自分のtwitterかオフラインでの直接的な営業そんなところです、上から順により直接的な営業で効果は期待できそうかなと思ってますが

今日はcssの横並びについて、昔はfloatという機能が使われていましたが最近だとdisplay:flexという機能を使うのが主流です、これで単純な横並びから縦並び、逆あって並びなど応用が利くのでそうようお世話になります。

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

みなさん、いかがお過ごしでしょうか。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

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

バナーの上にマウスを乗せたらバナーの色が薄明るくなったり、リンクにカーソルを合わせたら文字の色が変化したりする時ありますよね、このようにマウスを乗せた時に起こる変化のことをホバーエフェクトと言います。今回は画像の上にマウスを置いたら画像が暗めになって、拡大するというホバーエフェクトを作っていきます！完成見本はこちら！↓マウスを置くと画像がグレーがかって拡大する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: