すべてのカテゴリ

Micro CMSの解説記事、第3回目です。今回からはいよいよ、投稿した記事をサイトに表示させますよ！前回の記事はこちら↓APIキーを使ってデータを読み込もうでは前回作った、メニューコンテンツを表示させていきましょう！まずはブラウザでAPIを表示させるために、sdkを読み込む必要があります。これはごく普通に、HTMLファイルに記載すればいいだけですね。ですが、公式のドキュメントにGetting Startedとして雛形が用意されていますので、それをまるっと使用しましょう。service-domain というところと api-key というところは、自身の使用しているmicro CMSのドメイン、APIキーに書き換える必要があります。※注　前回の記事でも記載しましたが、これから行う方法はブラウザ上でAPIキーを読み込む方法です。APIキーがそのままソースに表示されるため、実際にサイトとして公開することはセキュリティ上おすすめしません。理由等は前回の記事をご覧ください。また次回の記事では、公開しても問題が内容にAPIキーを隠す方法を記載する予定です。service-domain は XXXX.microcms.io の XXXX 部分をそのまま記載しておきます。シングルコーテーションは削除せず、残しておくよう気をつけてください。APIキーの確認方法作成したメニューコンテンツを表示し、表示させたい記事をクリックすると、右上に以下のような「APIプレビュー」という表示があるかと思います。それをクリックします。すると以下の画面になります。キャプチャでは塗りつぶしてありますが、X-API-

はじめまして。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だけであれば簡単にコ

1. HTML5の成功と進化 HTML5は、ウェブデザインの分野で大きな成功を収めました。これにより、動画や音声などのマルチメディア要素が直接サポートされ、開発者はより洗練されたウェブアプリケーションやコンテンツを構築できるようになりました。HTML5の導入により、ユーザーエクスペリエンスが向上し、ウェブページは対話的で魅力的なものとなりました。 未来においても、HTMLはこの成功を受けて進化を続けるでしょう。新しい機能や要素が加わり、開発者はますます多彩なコンテンツを提供できるようになるでしょう。 2. ウェブ標準の進化とHTMLの役割 HTMLはW3C（World Wide Web Consortium）などの標準化団体によって管理・更新されています。これにより、ウェブ標準が確立され、異なるブラウザ間での互換性が向上しました。将来的にも、新しいウェブ技術やプラットフォームが登場する中で、HTMLはウェブデザインの基準としての役割を果たし続けるでしょう。 標準の進化により、開発者はより信頼性の高いコードを記述し、ユーザーは異なるデバイスやブラウザで一貫性のある体験を享受できるようになります。 3. モバイルファーストの考え方とHTML モバイルデバイスの普及に伴い、モバイルファーストのデザインが注目されています。HTMLはこれに対応し、モバイルデバイスに最適なコンテンツを提供するための手段として利用されています。今後もHTMLは、様々なデバイスに適応できる柔軟なコーディングの手法や機能を導入することが期待されます。 これにより、ウェブデザイナーは異なる画面サイズや解像度に適し

こんにちは、山本佑樹です。先日からWordpressのプラグインについてご紹介させていただいておりますが、今回はそのプラグインのインストール方法を3つご紹介させていただきます。①WordPressの管理画面からインストールこちらが1番簡単な方法になります。以下がインストールの流れです。1、Wordpressの管理画面にログイン2、左側のメニュー「プラグイン」より「新規追加」をクリック3、右上の検索ボックスにインストールしたいプラグインを入力4、「今すぐインストール」をクリックして有効化これでインストールは終わりです。基本的にはこの方法でインストールするのが簡単なのでオススメです。②プラグインのファイルをアップロードWordpress公式配布サイトなどからダウンロードしたファイルをアップロードしていきます。1、Wordpress公式配布サイトからプラグインを検索し、Zipファイルをダウンロード2、Wordpress管理画面の「プラグイン」より「新規追加」をクリック3、「プラグインのアップロード」をクリック4、「ファイルを選択」もしくは「ドラッグ&ドロップ」でインストールあとは有効化して完了です。有料で購入したプラグインなどはこちらの流れでインストールすることになるかと思います。③FTPファイルに直接ダウンロードこちらはあまり使う機会はないかと思いますが、念のためご紹介致します。1、自身が利用している「FileZilla」「Cyberduck」などのFTP画面を開く2、「ドメイン名 → public_html → wp-content → plugins」とクリックし、pl

こんにちは、山本佑樹です。昨日はWordpressのオススメプラグインをご紹介させていただきましたが、今回はプラグインを導入する際の注意点を3つ挙げさせていただきます。Wordpressのプラグインは種類も豊富で便利なのですが、いくつか気をつけなければいけないことがありますので、ご参考ください。注意点①「必要なプラグインだけインストールする」プラグインは多く入れすぎるとファイルが重たくなり、サイトのパフォーマンスに影響してきます。なので、できるだけ不要なものは入れない方がいいでしょう。注意点②「ウイルスに注意する」プラグインをインストールすることでウイルスに感染するケースもあるようです。(私は経験がありませんが・・)対策としては、口コミや評判を確認する、Wordpress公式のプラグインをインストールする、更新日がかなり古いプラグインは避けるなどが挙げられます。導入したいプラグインを一度自身で調べるてみるのがいいでしょう。注意点③「一つ一つ順番にインストールする」プラグイン同士で干渉を起こし、不具合が生じる場合があります。もしそうなってしまった場合に、どのプラグインが原因か特定しにくくなってしまいます。プラグインを導入した際は、サイトの表示などに不具合が出ていないか都度確認するようにしましょう。以上、3つの注意点をご説明しました。今後Wordpressを作成する際に、少しでも参考になれば嬉しいです。

XserverにWEBサイトをアップしたのですが、CSSファイルを修正して再度アップしてサービスにアクセスしてブラウザで表示したところ・・・CSSが反映されない！！！！ことが何回かありました。対処法下記の解決法を試してみました。1.ブラウザ側のキャッシュを削除する2.サーバー側のキャッシュを削除する3.Disable cacheにチェックを付けてリロードするちなみに私は1.ブラウザ側のキャッシュを削除するで解決しました。そもそもキャッシュって？キャッシュとはパソコンやスマホに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組み。1.ブラウザ側のキャッシュを削除する①GoogleChromeのデベロッパーツールを開くGoogleChrome上で表示された画面でoption+⌘command+Iを押すもしくは画面上で右クリック→検証をクリックすることでデベロッパーツールを起動できます。②リロードボタンを右クリックしてキャッシュの消去とハードの再読み込みをクリックします。ちなみに、PHPファイルをブラウザだけで表示している場合に修正箇所が反映されないことがよくあるのですが、この方法で解決します。2.サーバー側のキャッシュを削除するサーバーに公開しているサイト・サービスの場合はブラウザ側だけでなくサーバー側にキャッシュが残っている場合があるみたいなのでこれを削除する方法です。Xserverでのサーバー側のキャッシュを削除方法を説明します。①Xserverのサーバーパネルにログインする②サーバーキャッシュ設定をクリックする③修正したいサイトのド

みなさん、こんにちは。nikoniko 21です。今回はココナラでのお仕事の感想を書きたいと思います。私はココナラのHTML・CSSコーディングのお仕事をこれまで2回行いました。その中で、私はお客様と綿密なコミュニケーションをトークルームでとっていてお客様とのやりとりを楽しく感じました。また、作業をしていてお客様のご要望通りにコーディングができたとわかったときはとても嬉しく感じました。ココナラでのお仕事はまだ回数が少ないですが、うまくいくとこんなにも楽しいものなんだなって思いました。前も書いたことですが、これからも勉強と集客を頑張ってよいお仕事に繋げたいと思います。本日はここまでです。最後まで読んでくださってありがとうございます。

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

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

こんにちは、親父デザインです。第二弾のポートフォリオ「インテリアショップ」を制作したので投稿しました。今回、インテリアショップを制作したのは前回よりはもうちょっとレベルアップしたものが作りたかったのと春なのでインテリアのサイトを作ろうと思い制作しました。前回の時より制作時間がけっこうかかりましたが個人的にはけっこういいのができたのではないのかなって思っています。制作時間は第一弾のポートフォリオを投稿してからすぐに制作にかかり、今日完成！（日数は覚えていません......）今回はけっこう色々なところでつまずきながら、途中で心が折れそうでしたが最後までやってよかったと思います。制作ポイントインテリアショップを題材にしたので家具の画像をけっこう使っています。単体のものからお部屋の雰囲気があるものまで色々使用して各セクションによって見出しの位置を変えたりしています。あと初めてバナーを作ってみたのでよかったらポートフォリオと合わせてみてください。

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

商品画像とか、ブログの記事とかに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は装飾系を指定するもの。文字サイズを指定したり、色をつけたり、背景に画像をつけたり。。。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を適用してねと指定する）外

僕がフリーランスとして活動するために使用している屋号の「Lifement」ですが、Life(人生)とmoment(瞬間)を組み合わせた造語になります。また、「ment」は動作を表す英単語に使われることが多く、人生は常に行動し続けることでより良いものになる。今この瞬間を心から楽しみ、前に進み続けるという意味を込めています。過ぎ去った時間に囚われず、この変化の目まぐるしい時代の中で先の未来を見据えて、今この瞬間を大切にして行動する。お客様とともに瞬間瞬間を全力で楽しみ、未来を明るくする。「Lifement」はお客様に寄り添いWebの力を活かして、時代の変化を楽しみ続けたい。という想いのもと屋号を決めました。僕自身、個人でお仕事を進めることもありますが、チームで開発をしたりして上手く分業し、お仕事を行うことも多々あります。自分の専門スキルを最大限に活かしつつ、得意ではない分野は他の人にお願いしているので、屋号にふさわしく「今この瞬間を心から楽しみ、前に進み続ける」ということを体現できているかと思っております。フリーランスとして活動していて本当にお仕事が楽しいので、今後も日々精進していきます！今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです！！よろしくお願いいたします！

印刷媒体や動画の制作に慣れていると、ウェブ制作がいかに大変かがわかります。というのも、印刷デザインや動画編集の場合は直感的に作業ができるのですが、ウェブの場合はHTMLやCSSなどのコードを書き込むことで組み立てていくという、間接的な行程が待ち受けているのです。最近はワードプレスなどもあり、WordやExcel感覚で作ることもできて便利になりましたが、現在使っているAdobeのアプリに「Dreamweaver」というウェブ編集アプリケーションがあり、それを利用しています。白い背景の部分はHTMLと呼ばれる「ウェブの骨格部分」。灰色の部分はCSSと呼ばれる「骨格に肉付けや色などを盛り付けていく部分」。一つずつ数値などを当てはめていき、ダメだったらやり直す…の繰り返しです。ところで、私の場合はウェブデザインの参考本のほかに、Adobeのサイトで視聴できる「ウェブ制作の手引き」動画を見ながらメモをしていました。動画を見ながら実際に少しずつ組んでみて、コードをプリントアウトしてルーズリーフに貼り付けて、マーカーで線を引きメモをしていく…の繰り返し。そうしないと、すぐに忘れてしまう。そのほかに気がついたことを逐一メモをしていきましたので、総ページ数が200を超えました。ルーズリーフの輪に収まらないほどにまで、膨れ上がっています。でも、後々これが大いに役に立つのでした。というわけで、架空の食堂をイメージして作り上げたウェブサイト。ホームのページはもちろん、各ページもスマホとPCで表示が切り替わる「レスポンシブデザイン」を取り入れました。ホームはイメージ写真を背景にドーンと載せる「フルスクリ

みなさん、こんにちは（ちょっと遅いか）。nikoniko 21です。本日は少し遅い時間に失礼します。今回は昔の概念と今の概念について書いていきたいと思います。私は学生時代は勉強があまり好きではありませんでした。テストで悪い点をとるのが嫌で、小学生の頃はテストの日が近づいてからいやいや勉強をして、中学・高校・大学ではいやいやでもちゃんと毎日少しずつ勉強してまあまあな点をとっていたといったところです。それ以外はとにかく趣味とか遊びに時間を使ってました。しかし、今は違います。好きでプログラミングの勉強を自発的にしています。HTML・CSSやJavascriptやPHP...そういった言語やIT関連の用語を自発的に覚えてプログラミングの仕方やITの世界がわかるようにしています。ココナラの仕事のためでもありますが、好きでやってもいます。子供の頃と違って大人になってこんなにも勉強が楽しくなるとはと思います。勉強は楽しくない、仕事は面倒くさいもの...。大人になったら勉強は楽しい、仕事は真面目にやるもの。大人になるとここまで変わるものなんですね。本当にすごいです。本日のブログはここまでです。最後まで読んでくださってありがとうございました。

今回は、WordPressでアンカーリンクを設定したのに 👉 「目的の場所を通り過ぎてしまう」問題を解決した話です。 --- ### ■ 起きた現象 ページ内リンクをクリックすると… * 見せたい見出しを通り過ぎる * 1つ下のブロックまでスクロールされる * 目的の内容が一瞬で消える 👉 「ちょっとズレる」どころではなく **完全に流れてしまう状態**でした。 --- ### ■ アンカーリンクとは？ 簡単に言うと👇 👉 ページ内の特定の場所にジャンプするリンク 例えば ```text #movie ``` のように設定すると、その場所までスクロールされます。 --- ### ■ よくある原因（今回もこれ） 原因は👇 👉 **スクロール位置が“ピッタリすぎる”こと** ブラウザは 👉 「指定した要素の一番上」を画面の上に合わせます その結果👇 * 見出しの高さ * 余白 * ブロック構造 などの影響で 👉 **見出しがすぐ画面外に消える → 下のブロックが見える** --- ### ■ 今回のポイント よくある「ヘッダーに隠れる」問題とは違い 👉 **そもそもスクロール位置が深すぎる状態** でした。 --- ### ■ 解決方法 CSSでスクロール位置を手前に調整します。 ```css #movie {   scroll-margin-top: 300px; } ``` --- ### ■ どう変わる？ ```text 少し手前で止まる ↓ 見出しがしっかり表示される ↓ 通り過ぎない ``` --- ### ■ 数値の考え方 数値は固定ではなく、 * ヘッダーの高さ *

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

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

Google FontsのアイコンはPNGとSVGのダウンロードもできるので、今回はこちらを試してみたいと思います！Google Fontsのアイコンにアクセスhttps://　fonts.google.com/icons▼今回はAccount Circleというアイコンを使ってみます。Fillにチェックを入れて、Weight700にしてみます。▼使いたいアイコンをクリックすると、コードが出てきます。今回は右下にある、SVGとPNGというのを使ってみたいと思います。SVGとPNGをダウンロードそれぞれクリックしてダウンロードします。▼名前を変更してimgフォルダに入れてみました。SVGの方がサイズが若干軽いようです。html下記のように書いてみました。 <p>▼png</p>  <img src="img/account.png" alt="" />  <hr />  <p>▼svg</p>  <img src="img/account.svg" alt="" />⭐️hrとは区切り線のことです。⭐️CSSで背景に色をつけて、imgのサイズを少し大きめに指定してみました。▼ブラウザで確認。違いがわかりますでしょうか？PNGはドット絵になっていて拡大されるとギザギザに見えます。SVGはベクターデータなので拡大されても綺麗に見えます。【参考サイト】SVGとPNGの違いと使い分けhttps://　kinsta.com/jp/blog/svg-vs-png/CSSで色を変更！下記サイトを参考にCSS で

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

はじめまして鈴木と申します。普段はwebサイト制作を行っております。皆さんはホームページ制作というとHTMLによるコーディングによる作成を思い浮かべるかと思いますが、実はコーディングをしなくてもホームページを作成できることをご存じですか？現在私はSTUDIOというツールを用いてサイト制作を行っております。STUDIOの特徴はHTMLコーディングをしなくても簡単に直感的にホームページ制作を行えることです。HTMLコーディングのいらないホームページ制作ツールにはWixやペライチなどもありますが、これらはカスタマイズの自由度が低いというデメリットがあります。しかし、STUDIOはノーコードツールでありながらデザインの自由度もかなり高いことが特徴です。簡単に直感的にHTMLコーディングよりも速くおしゃれなサイトが作成できるSTUDIOであなたもホームページ制作をしてみませんか？現在、STUDIOによるコーディングを承ってます。

今回は、WordPressで「テキストの左側に余白を入れたいのにCSSが効かない…」という場面に遭遇したので、その解決方法をまとめます。---  ■ やりたかったこと 2カラムレイアウトで、 * 左：動画 * 右：テキスト という構成にした際に、 👉 テキスト側の左に少し余白を入れたかった ---  ■ 最初にやったこと（うまくいかなかった） とりあえず追加CSSで ```css .wp-block-column:nth-child(2) {   padding-left: 20px; } ``` を入れてみましたが… 👉 　全く効かない---  ■ 原因 原因はシンプルで、 👉 HTMLに直接CSSを書いてしまっていたこと実際にはこんな感じになっていました👇 ```html <div class="wp-block-column is-vertically-aligned-top .wp-block-column:nth-child(2) { padding-left: 20px; }"> ``` これでは当然CSSとして認識されません。 ---  ■ 解決方法①：追加CSSクラスを使う WordPressのブロックには「追加CSSクラス」を設定できるので、これを使います。  手順 1. テキスト側のカラムを選択 2. 「高度な設定」→「追加CSSクラス」にクラス名を入力 例： ```text text-padding ``` ---  ■ 解決方法②：CSSを追加 外観 → カスタマイズ → 追加CSSに以下を記述 ```css .text-padding {

【概要】コンセプト「ある数値より大きい素数を、昇順に出力して欲しい」使用ツール・HTML・CSS・Javascript【コード構造】 1.変数K、Nの取得 2.変数の補正 3.エラトステネスの篩 4.K以上の素数をN個見つけるまで、篩にかけ続ける 5.答えを出力する 今回のテーマは、「K以上の素数をN個見たい」です。ここでNは自然数。大きくなりすぎると表示画面が見にくくなるので、1以上100以下で制限をかけています。エラトステネスの篩にかけ素数を探索しながら、今調べている素数がK以上ならば素数列Primeに保存しておきます。Primeの長さがNに達した時点で、篩の処理を終了します。あとは出力。素数1つごとに出力して表示できるように、HTML文で答えを送っています。【使用例】【今後の改善点】装飾をほとんどしておらず、現在は殺風景です。今後HTML・CSSを勉強して、デザインを施そうと思います。

ホームページ制作は初心者にとってその全てを理解するのは難しいものです。この記事では、ホームページ制作の基本的な知識をわかりやすく解説したいと思います。この記事を読み終えることで簡単な全体像を掴むことができるでしょう。ホームページとは？基礎構造を知ろうホームページを制作する前に、その基本構造を理解しておくことが重要です。ホームページの仕組みを知ることで、設計やデザインの効率が上がります。ホームページの構成要素ホームページは、大きく以下の要素で構成されています。1.ヘッダー: ロゴやメニューが配置されるエリア。2.メインコンテンツ: ページの主役となる情報を表示する部分。3.フッター: 著作権情報やリンク集が含まれるエリア。これらをHTML（構造）、CSS（デザイン）、JavaScript（動作）で組み合わせることで、ユーザーに情報を伝えやすいページが完成します。ヘッダー、メインコンテンツ、フッターを組み合わせて制作すると、以下のような構成でホームページを作ることができます。サーバーとドメインホームページを公開するためには、インターネット上にページを配置するサーバーと、ユーザーがアクセスするためのドメイン（例: example.com）が必要です。この2つを正しく設定することで、サイトは全世界からアクセス可能になります。分かりやすく言うと、サーバーは「土地」ドメインは「住所」と言うイメージです。そのため、ホームページを制作する際には、サーバーとドメインを取得する必要があるのです。今では、レンタルサーバーを契約することができ、年間1万円ほどで取得可能です。HTML・CSSの基礎ホーム

みなさん、こんにちは。Site Creativeの熊谷俊介です。Webサイト制作をされているWebデザイナーはたくさんいらっしゃいます。ココナラにもたくさんの方がいらっしゃいます。でも、「このWebデザイナーさん、HTML&CSSのコーディングのことわからないんじゃないの？」という方も多々お見受けします。WordPressでしか作りません、studioでしか作りません、WIXでしか作りませんなどなど。もちろん、ちゃんとHTML&CSSのコーディングを理解されているうえで、需要の多いWordPressやstudioなどの分野に特化してサービスを提供されているWebデザイナーの方もいらっしゃいます。私もそうです。HTML&CSSのコーディングでWebサイト制作もできますが、提供しているサービスとしてはWordPressを中心としたWebサイト制作です。でも、明らかにHTML&CSSのコーディングがわからないから、WordpressやStudioなどノーコードでWebサイト制作しますという方も結構存在します。ずっと前の話ですが、Web制作会社にインターンとして通っていたときのことです。その中にHTML&CSSのコーディングが苦手だったインターンの方がおられました。その方はいつも「WordPressがあったらHTML&CSSなんて覚える必要ないでしょ」「WordPressさえあれば・・・」とおっしゃっていました。WordPressがあれば、どんなデザインのWebサイトでもノーコードでいとも簡単に制作できると思っていたようです。そう、某美容

迅速・丁寧にご対応いたします。

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

案件受注しました。期待に応えるられるよう丁寧に全力で取り組みます。

カード型レイアウトを実装の際 display: grid;で3行でシンプルに実装できます display: grid;　/*gridレイアウト指定*/ gap: 30px;　/*隣り合う要素間の数値を指定*/ grid-template-columns: repeat(3,1fr);　/*カラム数の指定*/ コードがシンプルになり使いやすい

みなさん、お久ぶりです。nikoniko 21です。これまでずっとブログを書いていなくてすみません💦。私はこれまでWebプログラミングの勉強をしていました。ブログをやっていたときからWebプログラミングの知識と技術はありましたが、もっと知識と技術があったほうがいいと思ってしばらく集客を休んでプログラミング言語やWebプログラミングの知識と技術の勉強をしていました。そして、以前集客していたときよりもできることが増えました。従いまして、今後どなたかにお仕事を任せていただきたいと思います。私ができることHTML・CSSコーディング・デザインカンプの通りにWebサイトをコーディングしてレスポンシブデザイ　　ンもする。・JavaScriptを用いたアニメーションの実装（ハンバーガーメニュー等）・部分修正（画像の差し替えやテキストの差し替え等）これまでWebプログラミングを勉強して、プログラミングはやはり奥が深いと思いました。しかし、勉強してできることが増えていくのは楽しいのでこれからも勉強していきたいと思います。本日のブログはここまでです。最後まで読んでくださってありがとうございます。

【概要】数値Kを入力すると、N進法（Nは2以上36以下）での表記に変換してくれます。このページはHTML/CSSの勉強用に作りました。装飾の練習をするため、シンプルなアルゴリズムで動作するページにしてあります。【機能紹介】最初は出力欄には何も表示されていません。Kを与えられると、変換用関数Changeが動作して出力欄が表示されます。N = 2 ... 36 と、上から順に変換値が並びます。出力結果は真ん中に揃えて表示したかったのですが、そのまま出力すると下に進むほど文字列が短くなり、見栄えが悪くなります。そこで今回は、tableタグを併用して表の形で出力しました。JSファイルにて、tableを出力しながら入力に合わせて中身を変更するようにコードを組んでいます。なお今回は、ボタンを使わずに出力できます。Kの値が変化すると、リアルタイムで出力値も変化します。また、文字列出力用にフォントも変えました。デフォルトのフォントだと、「1」と「I（大文字アイ）」と「l（小文字エル）」が紛らわしいからです。【使用例】 ・K=47 ・K=9876543210・K=0.125 ・K=( 空白 ) 【現時点で思いつく改善点】 ページを下側にスクロールした時、ページ上部に戻るボタンを右下に配置したいですね。 実際にコードを調べて実装しようとしたのですが、コードが予想より複雑で理解が足りず、断念。時間がある時に追加しようと思います。

ブロック要素とインライン要素の違いは、HTMLやCSSを学ぶ際に非常に重要な概念です。この2つの違いを理解しておくことで、Webページのレイアウトやデザインが効率的にできるようになります。ブロック要素とインライン要素とは？ブロック要素ブロック要素は、文書の中で「大きなまとまり」を表現する要素です。以下の特徴があります。特徴:画面全体にわたる幅（デフォルトで親要素の幅いっぱい）を取る。常に新しい行に表示される（縦に積み重なる）。他の要素に対して「ブロック」のように振る舞う。例：<div>, <h1>〜<h6>, <p>, <ul>, <li>など。インライン要素インライン要素は、文書の中で「小さな部分」を表現する要素です。以下の特徴があります。特徴:必要な幅だけを取り、他の要素と同じ行に表示される。インライン要素は、他のインライン要素と同じ行に並んで表示される。例：<span>, <a>, <strong>, <em>など。2つの要素の違いまず、ブロック要素は画面上で親要素の幅いっぱいに広がり、必ず新しい行に表示されます。例えば、<div>や<p>などがブロック要素の代表的なものです。これらの要素は、他の要素と縦に積み重なるように表示されるため、大きなセクションやまとまりを表現するのに使われます。ブロック要素は、widthやheight、margin、paddingといったプロパティを使ってレイアウトをコントロールしやすいのが特徴です。一

ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果の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

今回はFont Awesomeのアニメーションを使ってみたいと思います！クラス名を追加するだけで出来ちゃいますので、一緒にやっていきましょう🎵まずは前回の記事を参考に、Font Awesomeのall.min.cssを<head>タグ内に設定しておいてください。😊↓完成見本今回は下記のようなリンクボタンを作ってみたいと思います。▼静止画で伝わりづらいのですが、それぞれのアイコンが動いています。マウスが上に来ると、背景色がつきます。Font Awesomeで用意されているアニメーション▼Font Awesomeのサイトで見本（動いてる様子）が見られます。https://　fontawesome.com/docs/web/style/animatefa-beatなど、特定のクラス名を追加するだけで、アニメーションがつきます。クラス名というのは、class=""のダブルクォーテーション内に書きます。半角スペースで区切って複数つけることも出来ます。html<ul class="sns-list"><li class="youtube"><a href="#"><i class="fa-brands fa-youtube fa-shake"></i>YouTube</a></li><li class="twitter"><a href="#"><i class="fa-brands fa-twitter fa-bounce"></i>Twitte

CSS設計を学ぶ保守性が高く、きれいなコーディングができるように。BEMはSassと相性が良いので、身につければきれいなコードで今より短時間で記述できるようになるだろう

みなさん、お久しぶりです。nikoniko 21です。最近、HTML・CSSコーディングのお仕事が2件程来てとても嬉しかったです。納期に間に合うようにお客様のご要望通りにコーディングすることを意識しながらの作業で大変でしたが、なんとか早めに正確にお仕事を終わらせてお客様に高評価をいただきました。お客様に高評価をいただくと自信にとても繋がりますし、これからも勉強を頑張っていい仕事に繋げようとやる気が出ます。本当に、全力で作業をして認められるということは気持ちがいいことです。これからもがんばります！。本日のブログはここまでです。最後まで読んでくださってありがとうございます。

【概要】 「ここからここまでの値の中からテキトーに素数を探したいなー」と思った時に使えるものがあったらいいなー。という思いから作ってみました。【コード構造】 ・変数A、B、Nを取得する ・変数の補正 ・上限Bでエラトステネスの篩 ・篩にかけると同時に、A以上B以下の素数を記録する配列Primeを作成する ・配列PrimeからランダムにN個だけ要素を取り出し、答えを昇順に出力する 今回探索する範囲はA以上B以下。その中からN個だけ素数をランダムに出力します。ここで、Nは自然数。表示枠の見やすさの問題がありそうなので、今回はNの上限を100に定めています。なおNの値が「A以上B以下に存在する素数の数」よりも大きければ、出力結果は毎回変化します。詳しくは下の【使用例】をご覧ください。【使用例】 【今後の改善点】 ・HTML、CSSの勉強 Webページを見やすいものにするため、Webデザインと機能はある程度身に付けておきたいですね。 自分で作る以上の内容を勉強しておくと、他の人が作りたいWebページをちょっと作れるようになる可能性がありそうです。・さらなる技術を学習し、より高度な機能を持ったページを作るここまでの制作物は、すべてJSと素数で遊んできただけでした。さすがにそろそろ複雑なことをしても良いかなと思います。オセロとかジャンプゲームみたいな、簡単なゲームなど手を出してみたいですね。他にも、やることリストなども作ってみたい。以前Node.jsを使ったやることリスト作成を試したことがありますが、途中で断念しています。再挑戦してみたいです。

こんにちは、HiroDesignです。今日も天気が良く8月も半ばを過ぎてもまだまだ暑い日が続きます。先ほど外出している時、いきなり大粒の雨が降ってきて空は晴れているのに雨が降る、思わず「狐の嫁入り」っかと思わず車の中でつぶやいてしまいました。つぶやいたあとふっと思ったのは今時、狐の嫁入りなんて言葉使う人いるのかな・・・ってそんなことを思いながら車を走らせていると大粒の雨も2〜3分ぐらいで雨が止みました。

【要素を縦並びにしたときに、順番を入れ替える】 スマホ画面のときなど 縦並びにするだけなら display: block; だけでOK。 さらに、順番を変えたいとき 親要素に display: flex; flex-direction: column; 子要素に order: 　;で順番を指定すると 要素の順番を意図的に変えれます片メガネをかけた顔

こんにちは、親父デザインです。今回のポートフォリオは「デザイン制作会社」をイメージしました。前回のインテリアショップと比べると比較的、画像は少ないです。白ベースの２作品とは違い、グレー系でデザインしています。制作日数は6日です。個人的にはファーストビューが気に入っています。

こんにちは、親父デザインです。本日、ポートフォリオを制作しました。架空のカフェサイト「GreenCafe」というサイト名です。白をベースしたシンプルなデザインです。メニュー画像には個人的に美味しそう・食べたいと思ったものを使っています。カフェサイトを制作した理由は「ただただ、コーヒーが好き」そんな理由です。初めて制作するポートフォリオは「コーヒー」を使ったものを製作しようとおもいました。まだまだ経験不足の点もありますが、よろしかったら一度ご覧ください。