すべてのカテゴリ

こんにちは！Webコーダーの【くまこ】と申します。ブログをご覧いただき、ありがとうございます！８月になりましたね。毎日、蒸発しそうなほど暑いです…。子どもたちは夏休みですねぇ。いつもとは違った生活サイクルになっている方もおられるかもしれません。お盆休みにお出かけの計画を立てているという方もたくさんいらっしゃるのではないでしょうか。そんな中、「普段よりも仕事が進められていない」「旅行までにLPを仕上げたいけど時間が足りない」というお悩みはありませんか？・夏休み中のお子さんと過ごされているママデザイナーさん・お盆に予定があるフリーランスの方・クライアントがお盆休みの間に仕事を進めておきたい方そんな皆さんにこちらのサービスがオススメです！現在「コーディング代行」を出品しております。お盆も休まず対応できますので、お悩み解決のお手伝いができると思います。「進捗が不安なので、出先から状況を確認したい」というお客様に向けて、テスト環境へのアップロード対応も可能です。（ほんとは、お出かけ中にお仕事のことなんて考えたくないとは思うのですが・・・）＾＾；よろしければ、上記のリンクから当サービスをご覧ください。ご不明点などお気軽に連絡いただければ幸いです。最後までお読みいただきありがとうございます。皆さんが暑い夏を元気に楽しく過ごせますように！

初めまして、Webコーダーの【くまこ】と申します。ブログをご覧いただき、光栄です。最近は色んな場面で自分の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; }以上ですサービスのご購入はこちらから。

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

今回はコーディング練習としてCodestepさんの【HTML/CSS コーディング練習】入門編：フォトサイト2／LPを模写しました写真追加では適当に写真を持って来てそれっぽくしてみました。 スマホ版とPC版があります。見本模写写真追加スマホ版見本模写写真追加困った点どう頑張ってもピクセルパーフェクトとはいかないですね。PC版はだいぶ見本に近い間隔になっていますが、スマホ版は全体の長さがやはり長くなってしまいます。感想今回作ってみた感想としてcodestepさんのフォトサイト／LPと比べてみるとコンテンツ間の間隔も変更する必要があるのでよりボリュームが多く倍ほどの時間がかかりましたが今の自分にないコンテンツの配置の仕方を学べて楽しかったです。最後にスマホ版、PC版で画像の並べ方やborderの引き方を変える技術が要求される課題でした。ここまで読んでいただきありがとうございました。 コーディング、HP作成の出品もしていますので、ぜひ検討してみてください

今回はコーディング練習としてCodestepさんの【HTML/CSS コーディング練習】入門編：フォトサイト／LPを模写しました写真追加では適当に写真を持って来てそれっぽくしてみました。 スマホ版とPC版があります。 見本模写写真追加スマホ版見本模写写真追加困った点今回XDファイルを見本にしながら作成したのですが、detail左部分の画像の高さと右の文字部分の高さが微妙に合わいませんでした。 上の画像を見てもらうと青い方の画像と文字部分で高さの違いがあるのが分かるかと思います。XD通りの文字同士の間隔に設定したのですがずれてしまいました。 フォントファミリーが違うことの影響なのか、そもそもXDは大体の大きさでしか表示していないのか。。。感想今回作ってみた感想としてcodestepさんのプロフィールサイト／LPと比べてみると若干ボリュームは少ない感じがしました。プロフィールサイトを作った方なら直ぐに作れると思います。最後に背景色の設定の仕方、flexbox、table要素の使い方を確認できる課題でした。ここまで読んでいただきありがとうございました。 コーディング、HP作成の出品もしていますので、ぜひ検討してみてください

今回はコーディング練習としてCodestepさんの【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP</a>を模写しました。写真追加では適当に写真を持って来てそれっぽくしてみました。スマホ版とPC版があります。見本模写写真追加スマホ版見本模写写真追加感想今回作ってみた感想としてHTML,CSSを一通り勉強し、初めてコーディングをしてみるという人向けの課題だったのでそこまで手こずることなく完成させることができました。制作時間は大体3時間ほどでpc版の方を作るのに大半の時間を費やしたという感じで、スマホ版はそこまで変更する点が無かったので1時間もかからず作ることができました。 この課題はflexbox、文字の配置、画像の配置、コンテンツ同士の間隔を復習できる課題でした。 困った点としてpc版での自転車の画像を配置する時、両端ぞろえで配置しろという課題でした。私はflexboxのspace-betweenを使ったのですが画像同士の間隔が見本とは異なり大きくなってしまいました。その場合画像の大きさを変更するしかないのか。。。最後にある程度HTML,CSSを勉強している方ならそこまで時間がかからず作成できるかと思います。自身が学んだことがちゃんと身についているか確認できる最適な課題でした。ここまで読んでいただきありがとうございました。コーディング、HP作成の出品もしていますので、ぜひ検討してみてください    

今回はデザイン練習兼コーデイング練習として、いぐちようこさんが無償で提供している架空サイト「コーヒーショップLP」の模写をしました。私が模写したものと見本を見比べてみると次のような感じになります。見本模写感想 作ってみた感想としてはコンテンツの配置の仕方や文字の配置の仕方は見本通りに作成することができたのですが、文字のフォントを見つけることができず似た文字を使ったため文字サイズが微妙に異なり、全体のLPサイズが変わってしまいました。 制作時間は大体10時間くらいで、コンテンツの配置に時間がかかったというよりかは文字の大きさやコンテンツ同士の間隔を見本と大体同じ大きさにするのに時間がかかりました。 最後に 画像の編集が必要なく、適度なボリュームでデザインに必須なflexboxとgridレイアウトの練習になるのでとてもいい練習になりました。コーディングの出品もしていますので、ぜひ検討してみてください

例えば文章やコンテンツ毎のまとまりについてどのようなタグを使ってコンテンツを囲むか、コーディングの時にarticleタグを使うのか、sectionタグを使うのか迷うことがありました。どういった使い分けをしていくのか一度整理してみたいと思います。また、本来であればMDNをご確認いただくのがいいのでURLを載せたいのですが、こちらのブログではURLを載せることが出来ないので、割愛いたします。articleタグ文書やアプリケーションの中で自己完結しており、例えばブログ記事や商品カード、対話型のウィジェット、そのほか独立したコンテンツの項目が含まれるとのことです。文書の中に複数の記事を含めるような場合、例えばスクロールされるたびに各記事のテキストを次々と表示するようなブログであればarticleタグの中にsectionタグが含まれるような形式になるようです。sectionタグ文書の独立した一般的なセクション（区間）を表すようです。そのセクションを表現するより意味的に具体的な要素がない場合使用するとのことです。セクションというのが先に述べているように区間という意味のようですので、文書の区間を示す場合、他に何か適切なタグがない場合は使うような感じのようです。また、見出しが必要になるようです。使い分けとしてはarticleタグは独立したコンテンツとして配信しても意味が通じるものに対して使用。sectionタグは様々なタグの中で文書間の区間を示すために適切なタグがない場合使用sectionタグは汎用的に使えると考えていましたが、逆に適切なタグがない場合のみ使うような感じなので、使い方に気をつけ

コーディング代行、WordPress構築などのご相談乗ります！！一度ポートフォリオをご覧いただけたらと思います。ポートフォリオ内容◇WordPress構築まで実施した企業サイト■制作期間・約145h■主な実装内容・TOPの成功事例部分と下層ページの料金部分はカスタムフィールドでクライアント様から変更しやすくしております・お知らせ部分はカスタム投稿で対応・ブログ記事ページでは関連記事とおすすめ記事を実装しておりSNSリンクを設置・お問い合わせフォームは自動返信メールなどの設定・公式テーマユニットテストデータを用いて表示崩れがないか確認しております◇コーディングのみの温泉旅館サイト[ID]ishii-kadan　[PASS]kadan-kadan1■制作期間・約55h■主な実装内容・mainviewのアニメーション・宿泊予約ボタンからモーダル表示・お知らせのカテゴリーをタブで切り替え・全体の要素をふわっと表示※どちらもXDデザインカンプ（PCサイズのみ）からのコーディングです何かきになることがあればお気軽にお問い合わせ下さいませ🙇🏻‍♂️

ご覧いただきましてありがとうございます！ご覧いただきましてありがとうございます。愛知県でフリーのコーダーとしてお仕事をさせていただいておりますこばゆたと申します。今こちらのサービスを出品しておりますが、サービス内容のページでは文字数が足りない！というこということでこちらのページに「基本料金に含まれるもの」と「各オプション」の詳細を記載をさせていただきます。お問い合わせや相見積もりの参考になれば幸いです。基本料金サービスの基本料金には以下の内容が含まれております。オプション料金ご検討いただいているお客様の、参考になれば幸いでございます。ご縁がございましたら何卒よろしくお願いいたします。ご依頼、ご相談お待ちしております😃

はじめまして、幸鈴と申します。フリーランスでwebサイト制作をしています。このたびココナラでwebサイト制作のサービスを出品しました。サービス内容としては、「コーディング代行」です。主にweb制作会社様やコーディングが苦手なデザイナーの方向けに行なっているサービスです。Adobe XDやPhotoshop、illustratorで作成されたデザインデータをいただいて、デザイン通りにコーディングしていくサービスとなっています。私がコーディング代行をする際に気を付けていることは以下の3点です。・デザインを忠実に再現するピクセルパーフェクト・返信は即レス・納期は絶対に守る当たり前のことしか書いていませんが、意外と当たり前のことをできない人が多くいるそうです。ですので、初心を忘れずにお客様と気持ちいいお仕事ができればと考えています。ご相談いただければ、すぐに対応可能ですので何卒よろしくお願いいたします。

先日、ココナラで購入していただいた方。誠にありがとうございます。誠心誠意つくし、ご満足いただけ大変うれしく思います。今後ともよろしくお願いいたします。

border-radius等を使えば、ある程度簡単な形であれば画像の表示を工夫することが出来ますが、複雑な形の再現が難しい場合が多いです。そんな時はSVGと、clipPathを使う事で再現することが出来ます。こちらは比較的分かりやすい形でしたが、工夫次第でもっと複雑な形にも出来ます。ご依頼はこちらから

Webサイトのデザインはそれぞれ違っていても、header部分などはある程度共通の仕様になっていることが多いです。そこで、header部分について作業時1からコーディングをしなくてもすむように、パーツを作ってしまうことにしました。左側にロゴがあって右側がナビゲーションメニューになるようなパターンです。レスポンシブ時はナビゲーション部分がハンバーガーメニューに変わります。お仕事のご依頼はこちらから最後までお読みくださりありがとうございました。