絞り込み条件を変更する
検索条件を絞り込む
すべてのカテゴリ
新着有料ブログ
お金のアファメーション100個とは
ライフスタイル
500円
和田多紀子♡...
2024/10/06
【魚座✖魚座】2024年10月の恋愛相性
占い
1,000円
広瀬可菜（タ...
2024/10/05
10月5日のスイーツアイコン
デザイン・イラスト
500円
mohumo...
2024/10/05
【人から影響を受けやすい敏感さんにオススメ！簡単...
コラム
500円
HSPスペシ...
2024/10/05
【水瓶座✖魚座】2024年10月の恋愛相性
占い
1,000円
広瀬可菜（タ...
2024/10/05
【水瓶座×水瓶座】2024年10月の恋愛相性
占い
1,000円
広瀬可菜（タ...
2024/10/05
『オーラ』ってなに？
占い
1,000円
祐〜ゆう〜
2024/10/05
天と呼応し、地に属する自分を認識してください
占い
1,500円
Practi...
2024/10/04
第二弾！ebayで売れた物、16品ご紹介
マネー・副業
2,000円
しもきた
2024/10/04
.png)
【山羊座×魚座】2024年10月の恋愛相性
占い
1,000円
広瀬可菜（タ...
2024/10/04
【山羊座×水瓶座】2024年10月の恋愛相性
占い
1,000円
広瀬可菜（タ...
2024/10/04
『予告』黒魔術の使い方〜マインドセット＃43
占い
500円
ひすい＠気と...
2024/10/04
30 件中 1 -
30 件表示
【CSS】ボタンがマウスオーバーしたら色が変わっていくようなアニメーションのパターン
ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果の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
0
HTMLの今後の展望
1. HTML5の成功と進化
HTML5は、ウェブデザインの分野で大きな成功を収めました。これにより、動画や音声などのマルチメディア要素が直接サポートされ、開発者はより洗練されたウェブアプリケーションやコンテンツを構築できるようになりました。HTML5の導入により、ユーザーエクスペリエンスが向上し、ウェブページは対話的で魅力的なものとなりました。
未来においても、HTMLはこの成功を受けて進化を続けるでしょう。新しい機能や要素が加わり、開発者はますます多彩なコンテンツを提供できるようになるでしょう。
2. ウェブ標準の進化とHTMLの役割
HTMLはW3C（World Wide Web Consortium）などの標準化団体によって管理・更新されています。これにより、ウェブ標準が確立され、異なるブラウザ間での互換性が向上しました。将来的にも、新しいウェブ技術やプラットフォームが登場する中で、HTMLはウェブデザインの基準としての役割を果たし続けるでしょう。
標準の進化により、開発者はより信頼性の高いコードを記述し、ユーザーは異なるデバイスやブラウザで一貫性のある体験を享受できるようになります。
3. モバイルファーストの考え方とHTML
モバイルデバイスの普及に伴い、モバイルファーストのデザインが注目されています。HTMLはこれに対応し、モバイルデバイスに最適なコンテンツを提供するための手段として利用されています。今後もHTMLは、様々なデバイスに適応できる柔軟なコーディングの手法や機能を導入することが期待されます。
これにより、ウェブデザイナーは異なる画面サイズや解像度に適し
0
Font Awesomeを使ってみよう！2️⃣
今回は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
0
CSSで"NEW"タブをつけよう！
商品画像とか、ブログの記事とかに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などと名前
0
HTML & CSSそしてJs！
こんにちは！サカモトです。今回は新しくローンチ予定のサービスに関してです。みなさんwebデザイナーになってみたいと思いませんか？webデザイナーになるのって結構難しいと考えていませんか？HTMLやCSSをスラスラ書けないといけないとかいわゆるプログラミング言語をガッツリ学習しないといけないとか間違えた記述をしたらパソコンが壊れるんじゃないかとかざっくり言いますと全部間違いです！本当に基本さえ抑えていれば割となんとかなっちゃうのがwebデザインで学習に関しても一つ一つ "わからない" をクリアすることで確実にステップアップできます。わからないところはググって、、、と簡単に言いますがそのググり力がなかなか課題だったりしますよね。今回公開予定のサービスはそんな初学者の皆さんの"わからないにとことん向き合う"そんなサービスを予定しています！しかも所謂webスクールより超絶低価格でご提供ですよ〜皆さんお楽しみに！
0
SVGとPNGのアイコンを表示してみよう！
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 で
0
CSSファイルを作ってみよう！
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
0
【コピペでOK】ホバーエフェクト：画像暗くなって拡大
バナーの上にマウスを乗せたらバナーの色が薄明るくなったり、リンクにカーソルを合わせたら文字の色が変化したりする時ありますよね、このようにマウスを乗せた時に起こる変化のことをホバーエフェクトと言います。今回は画像の上にマウスを置いたら画像が暗めになって、拡大するというホバーエフェクトを作っていきます！完成見本はこちら！↓マウスを置くと画像がグレーがかって拡大する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:
0
【コピペでOK】画像の上にマウスが来たら変化！
今回は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
0
楽天ショップの会社概要ページに、ボタンを設置する
楽天市場の会社概要ページって味気ないと思いませんか？ナビボタンを設定していない、トップページに戻るボタンとかお店のロゴや看板も何もない、という店舗様も少なくはないようです。▼会社概要ページ（パソコン）▼会社概要ページ（スマホ）パソコンで見てもスマホで見ても、戻るボタンを押してもらわないとお店のページに戻れないし、ほぼ文字しかないページになります。このページにもトップページや商品ページへのリンクを設置した方が親切かと思いますので、今回はお客様にわかりやすいボタンの設置の仕方を解説したいと思います！1回設定すれば、パソコン・スマホ両方で表示されます。少しでも離脱や機会損失などのリスクの少ないお店を目指しましょう！出来上がり見本▼出来上がりはこんな感じ。トップページや商品一覧ページに戻れるようにわかりやすくボタンを設置します。RMSの会社概要ページで設定するでは早速。RMSにログインしたら、店舗設定→[5 基本情報設定]→会社概要ページに進みます。▼説明文項目の3つ目にある、[説明文1]をクリック▼会社情報ページ 説明文タイトルと説明文を埋めていきます。①②③は各ボタン。＊タイトルは何かしら入れないといけないようです。付けたくなかったら、スペースでもOK。ここに入れたものは見出しになります。例えば、「ショッピングを続ける」とか「買い物を続ける」などはいかがでしょうか？😉①TOPへのボタン⭐️下記をコピペでOK♪ https:の後のスペースは詰めて下さい。<a href="https: //www.rakuten.co.jp/shopname/" style="backgroun
0
ポートフォリオ第二弾 「インテリアショップ」
こんにちは、親父デザインです。第二弾のポートフォリオ「インテリアショップ」を制作したので投稿しました。今回、インテリアショップを制作したのは前回よりはもうちょっとレベルアップしたものが作りたかったのと春なのでインテリアのサイトを作ろうと思い制作しました。前回の時より制作時間がけっこうかかりましたが個人的にはけっこういいのができたのではないのかなって思っています。制作時間は第一弾のポートフォリオを投稿してからすぐに制作にかかり、今日完成！（日数は覚えていません......）今回はけっこう色々なところでつまずきながら、途中で心が折れそうでしたが最後までやってよかったと思います。制作ポイントインテリアショップを題材にしたので家具の画像をけっこう使っています。単体のものからお部屋の雰囲気があるものまで色々使用して各セクションによって見出しの位置を変えたりしています。あと初めてバナーを作ってみたのでよかったらポートフォリオと合わせてみてください。
0
CSSを適用させる3つの方法！
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を適用してねと指定する）外
0
プロのWeb開発エンジニアが教える、これからHTML+CSSを勉強したい人の勉強方法
Webシステム開発の会社、Nickel Lab. です。今回は弊社のエンジニアがオススメする、HTML+CSSを覚えていきたい人の為の勉強方法を公開します！この方法を実践すれば、がむしゃらに勉強をするより素早く習得することができますので、是非試してみて下さい。よくつまづくポイントは皆同じHTML+CSSを始めるとつまづくポイントはいくつかありますが、皆さん大体同じだったりします。なにがわからないのかわからないできないところを検索しても解決できないある程度わかった後でも、プロみたいな綺麗な作り方がわからないそれ！と思った方には、今回の記事はかなり効果的かなと思います！実践はとても簡単です。順番通りにやってみましょう。1.HTML+CSSの基本中の基本を覚えよう（むしろ基本だけでいい）どんな方法でも、基本中の基本をある程度把握していなければ、手を動かすことができないものです。なので、やっぱりそこは触っておきましょう。HTMLであれば、・<head>と<body>・cssの読み方・見出しと文章の書き方・<div>の使い方・タグにclassを指定する方法これだけ！これだけわかればある程度のものは作れるようになります。フォームを作ったり、クリックしたら何か出来たり。といった事は後回しにしましょう。タグでいうと、以下のものがわかれば大丈夫です。<html><head><body><h1> <h2><p><div>まずはこれらのタグを使って、適当な小説から文章を構成してみて
0
『Wordpress』プラグインをインストールする方法
こんにちは、山本佑樹です。先日から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
0
『Wordpress』プラグインを導入する際に注意したいこと3選
こんにちは、山本佑樹です。昨日はWordpressのオススメプラグインをご紹介させていただきましたが、今回はプラグインを導入する際の注意点を3つ挙げさせていただきます。Wordpressのプラグインは種類も豊富で便利なのですが、いくつか気をつけなければいけないことがありますので、ご参考ください。注意点①「必要なプラグインだけインストールする」プラグインは多く入れすぎるとファイルが重たくなり、サイトのパフォーマンスに影響してきます。なので、できるだけ不要なものは入れない方がいいでしょう。注意点②「ウイルスに注意する」プラグインをインストールすることでウイルスに感染するケースもあるようです。(私は経験がありませんが・・)対策としては、口コミや評判を確認する、Wordpress公式のプラグインをインストールする、更新日がかなり古いプラグインは避けるなどが挙げられます。導入したいプラグインを一度自身で調べるてみるのがいいでしょう。注意点③「一つ一つ順番にインストールする」プラグイン同士で干渉を起こし、不具合が生じる場合があります。もしそうなってしまった場合に、どのプラグインが原因か特定しにくくなってしまいます。プラグインを導入した際は、サイトの表示などに不具合が出ていないか都度確認するようにしましょう。以上、3つの注意点をご説明しました。今後Wordpressを作成する際に、少しでも参考になれば嬉しいです。
0
屋号「Lifement」の由来
僕がフリーランスとして活動するために使用している屋号の「Lifement」ですが、Life(人生)とmoment(瞬間)を組み合わせた造語になります。また、「ment」は動作を表す英単語に使われることが多く、人生は常に行動し続けることでより良いものになる。今この瞬間を心から楽しみ、前に進み続けるという意味を込めています。過ぎ去った時間に囚われず、この変化の目まぐるしい時代の中で先の未来を見据えて、今この瞬間を大切にして行動する。お客様とともに瞬間瞬間を全力で楽しみ、未来を明るくする。「Lifement」はお客様に寄り添いWebの力を活かして、時代の変化を楽しみ続けたい。という想いのもと屋号を決めました。僕自身、個人でお仕事を進めることもありますが、チームで開発をしたりして上手く分業し、お仕事を行うことも多々あります。自分の専門スキルを最大限に活かしつつ、得意ではない分野は他の人にお願いしているので、屋号にふさわしく「今この瞬間を心から楽しみ、前に進み続ける」ということを体現できているかと思っております。フリーランスとして活動していて本当にお仕事が楽しいので、今後も日々精進していきます！今後もこちらのブログで情報発信を行う予定なので、フォローやお気に入り登録してくださるととても嬉しいです！！よろしくお願いいたします！
0
STUDIOでのコーディング代行を承っています
はじめまして鈴木と申します。普段はwebサイト制作を行っております。皆さんはホームページ制作というとHTMLによるコーディングによる作成を思い浮かべるかと思いますが、実はコーディングをしなくてもホームページを作成できることをご存じですか？現在私はSTUDIOというツールを用いてサイト制作を行っております。STUDIOの特徴はHTMLコーディングをしなくても簡単に直感的にホームページ制作を行えることです。HTMLコーディングのいらないホームページ制作ツールにはWixやペライチなどもありますが、これらはカスタマイズの自由度が低いというデメリットがあります。しかし、STUDIOはノーコードツールでありながらデザインの自由度もかなり高いことが特徴です。簡単に直感的にHTMLコーディングよりも速くおしゃれなサイトが作成できるSTUDIOであなたもホームページ制作をしてみませんか？現在、STUDIOによるコーディングを承ってます。
0
サーバーにアップしたCSSファイルが反映されない時の解決法
XserverにWEBサイトをアップしたのですが、CSSファイルを修正して再度アップしてサービスにアクセスしてブラウザで表示したところ・・・CSSが反映されない！！！！ことが何回かありました。対処法下記の解決法を試してみました。1.ブラウザ側のキャッシュを削除する2.サーバー側のキャッシュを削除する3.Disable cacheにチェックを付けてリロードするちなみに私は1.ブラウザ側のキャッシュを削除するで解決しました。そもそもキャッシュって？キャッシュとはパソコンやスマホに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組み。1.ブラウザ側のキャッシュを削除する①GoogleChromeのデベロッパーツールを開くGoogleChrome上で表示された画面でoption+⌘command+Iを押すもしくは画面上で右クリック→検証をクリックすることでデベロッパーツールを起動できます。②リロードボタンを右クリックしてキャッシュの消去とハードの再読み込みをクリックします。ちなみに、PHPファイルをブラウザだけで表示している場合に修正箇所が反映されないことがよくあるのですが、この方法で解決します。2.サーバー側のキャッシュを削除するサーバーに公開しているサイト・サービスの場合はブラウザ側だけでなくサーバー側にキャッシュが残っている場合があるみたいなのでこれを削除する方法です。Xserverでのサーバー側のキャッシュを削除方法を説明します。①Xserverのサーバーパネルにログインする②サーバーキャッシュ設定をクリックする③修正したいサイトのド
0
【続・続】ウェブページ制作珍道中…『少しずつコーディングにも慣れてきた！』
印刷媒体や動画の制作に慣れていると、ウェブ制作がいかに大変かがわかります。というのも、印刷デザインや動画編集の場合は直感的に作業ができるのですが、ウェブの場合はHTMLやCSSなどのコードを書き込むことで組み立てていくという、間接的な行程が待ち受けているのです。最近はワードプレスなどもあり、WordやExcel感覚で作ることもできて便利になりましたが、現在使っているAdobeのアプリに「Dreamweaver」というウェブ編集アプリケーションがあり、それを利用しています。白い背景の部分はHTMLと呼ばれる「ウェブの骨格部分」。灰色の部分はCSSと呼ばれる「骨格に肉付けや色などを盛り付けていく部分」。一つずつ数値などを当てはめていき、ダメだったらやり直す…の繰り返しです。ところで、私の場合はウェブデザインの参考本のほかに、Adobeのサイトで視聴できる「ウェブ制作の手引き」動画を見ながらメモをしていました。動画を見ながら実際に少しずつ組んでみて、コードをプリントアウトしてルーズリーフに貼り付けて、マーカーで線を引きメモをしていく…の繰り返し。そうしないと、すぐに忘れてしまう。そのほかに気がついたことを逐一メモをしていきましたので、総ページ数が200を超えました。ルーズリーフの輪に収まらないほどにまで、膨れ上がっています。でも、後々これが大いに役に立つのでした。というわけで、架空の食堂をイメージして作り上げたウェブサイト。ホームのページはもちろん、各ページもスマホとPCで表示が切り替わる「レスポンシブデザイン」を取り入れました。ホームはイメージ写真を背景にドーンと載せる「フルスクリ
0
【Micro CMS】静的サイトを高く売る方法 ３/５【完全無料】
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-
0
【Micro CMS】静的サイトを高く売る方法１/５【完全無料】
はじめまして。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だけであれば簡単にコ
0
30
件中
1 - 30
件
あなたも記事を書いてみませんか？
多くの人へ情報発信が簡単にできます。
ブログを投稿する
多くの人へ情報発信が簡単にできます。