すべてのカテゴリ

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、YouTube、Viemo、アニメーション、音声、ナレーションなどをページに展開できます。＼リンクと埋め込み／配置した要素をインタラクティブにできます。 要素へのマウス操作で詳細情報をポップアップウィンドウに表示したり、関連Webサイトに移動できます。ブックのページから離れることなく、シームレスな情報提供ができます。 リンクと埋め込みでインタラクティブなブックにできます。＼アニメーション効果／配置した要素を回転、ズームイン/アウト、バウンスなどアニメーション効果を表現できます。 ページをより魅力的に表現でき、読者をブックに集中させることができます。＼IDとパスワード／閲覧、ダウンロード、コピー防止としてIDとパスワードを設定可能。 ＼ブック配信／パソコン、タブレット、スマートフォンでの閲覧に対応。 オンライン、オフラインで閲覧できます。＼Googleアナリティクス／ブックにトラッキングIDを設定することにより、ブックの各ページが追跡できます。 訪問閲覧者のトラフィック、ページビュー、継続時間、直帰率などのイベントが測定され、マーケティングでの指標を分析、管理できます。 また、検索エンジンにブックのタイトル、キーワ

サービスを予定しています「マイ・トラベリング・ブック」についてブックのページめくりのサンプルです。「マイ・トラベリング・ブック」は、そのページに表現するコンテンツはなんでも可能です。サービスとしては、ブックのコンテンツを旅行ということにしています。今回は、ブックのページめくりの状況を動画にしましたのでご覧下さい。ページの内容は旅行ではありませんが、ページめくりのサンプルとなります。／ページめくり／PC／インフォグラフィックス素材のブック／※PCではマウスでの操作になります。／ページめくり／スマホ／GIFアニメーションのブック／※スマホ、タブレットでは指での操作になります。※横に回転すると見開きで表示されます。※「マイ・トラベリング・ブック」はHTML5、CSS、JavaScriptにて構築。「マイ・トラベリング・ブック」のサンプルができるまで、このようなサンプルを時々に投稿したいと思っています。宜しくお願いします。／名前のない空を見上げて／MISIA／hima.cover／／夏をあきらめて／サザンオールスターズ／hima.cover／こちらもご覧下さい。（以前投稿した動画）　

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-

本日は、現在制作中のホームページでHTML・CSSの調整を行いました今回はデザインカンプを見ながら、カードデザインの細かな部分を再現していく作業です。「ここを数px動かすだけで印象が変わる」そんなデザインの奥深さを改めて感じた一日でした。アイコンの位置を微調整今回一番時間をかけたのは、アイコンの配置です。画像を差し替えたことで位置のバランスが変わり、CSSで* `position`* `left`* `top`* `justify-self`などを使いながら、デザインカンプに近づけていきました。数pxの違いでも見た目の印象が大きく変わることを実感しました。リボンデザインもCSSだけで実装カード左上のリボンは、画像ではなくCSSだけで作成しました。特に印象に残ったのが、擬似要素（`::after`）を使ってリボンの先端を作る方法です。今までは画像で作るものだと思っていましたが、CSSだけでもここまで表現できることに驚きました。デザインカンプとの比較コーディングでは「動けばOK」ではなく、デザインカンプを見ながら* アイコンのサイズ* タイトルとの距離* 余白* 線の位置などを何度も見比べて調整しました。細かい作業ではありますが、この積み重ねが完成度につながるのだと感じています。--- 学んだことHTMLやCSSはコードを書くだけではなく、「どう見せるか」を考えることも大切だと改めて感じました。デザインを忠実に再現するためには、1px、2px単位の調整を繰り返すことも少なくありません。少しずつですが、自分でもデザインカンプとの差を見つけられるようになってきたことが今日一番の成長です

Chromeの拡張機能って知っていますか？Chromeで行う様々な操作をカスタマイズすることができる機能です。Chromeウェブストアで公開されていて、色々と便利な拡張機能が簡単にインストールできます。そんなChromeの拡張機能ですが、自分で作ることができます。私は趣味で10点程作成しました。その内、1つはChromeウェブストアで公開しています。その経験から拡張機能を作る良さについて語りたいと思います。良さを語る前に真逆なことを言います。正直Chromeの拡張機能はブームが過ぎ去ったと思います。一時期は様々な拡張機能が作成され、便利なchrome拡張機能を紹介する記事が溢れていました。しかし、拡張機能でユーザーの情報を不当に収集したり、ウィルスをダウンロードするものが作られ、Chromeの拡張機能は危険であると言われるようになりました。そこでユーザーが離れていきましたが、致命的だったのが2020年9月21日にChromeウェブストアで有料の拡張機能の新規公開を中止したことだと思います。これで多くの開発者が離れていきました。それでブームは去ってしまったと考えています。現在でも様々な無料の拡張機能がウェブストアで公開されていますが、以前のような活気はないように感じます。また、パソコンを使うユーザーが減りスマートフォンへ移行したことも要因の一つとして考えられるでしょう。そんな斜陽なChrome拡張機能ですが、私はこれの作成にハマっています。良さについて語ります。斜陽とは言いましたが、WebブラウザとしてはChromeはまだまだ現役です。Webブラウザシェアランキング(2021年6

こんばんは。今回は教科別スケジュールのページです。いわゆる学習指導要領が科目別に確認追加編集できるページになっています。右側の項目から参照したい科目を選択します。試しに国語を選択してみます。これも今月の授業内容が初期表示されるようになっています。こちらはこの画面で全て内容を確認できるようにしています。⚙マークで編集画面↓登録画面は科目を選択できるようになっています。そしてこれまで同様に情報を登録していきます。目指しているのはアプリ内で授業の準備が全て整う状態にできることです。将来的には学習資料を更新・検索・リンク付・印刷までできるようにして、授業の下準備が効率的に行えるようなシステムを作っていきたいです。今回は以上です。ありがとうございました！

本日は、Web制作でカードデザインに使用するリボン装飾をCSSだけで作成しました。一見シンプルなデザインですが、実際に作ってみると「こんな表現もCSSだけでできるんだ！」という発見がたくさんありました。---リボン本体を作るまずは長方形のリボン本体を作成しました。```css.reason-ribbon {  position: absolute;  top: -2px;  left: 12px;  width: 24px;  height: 30px;  background: var(--gold);}```カードの左上に配置し、背景色を設定することでリボンのベース部分が完成します。ここまでは比較的シンプルなコードです。---ポイントは擬似要素！今回一番勉強になったのが、この部分です。```css.reason-ribbon::after {  content: "";  position: absolute;  left: 0;  bottom: -7px;  border-left: 12px solid var(--gold);  border-right: 12px solid var(--gold);  border-bottom: 7px solid transparent;}```最初は「三角形の画像を使うのかな？」と思っていましたが、実は**border**だけで作られています。左右のborderに色を付け、下側だけ透明にすることで、リボンの先端がV字にカットされたような形を表現できます。画像を使わずにここまで表現できることに驚きました！CSSだけで装飾が作

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

Web制作を行う上でプログラミング言語を知らなくても、サイトやランディングページは「CMS」を利用することで出来てしまいます。しかし、自分の好みのデザインに変更したり、SEO効果を上げようとすると基本的なプログラミング言語の知識が必要になってきます。プログラミング言語と聞くと難しく感じるかもしれません。しかし、「HTML」「CSS」などは、初心者の方でも比較的習得しやすい言語になります。今回はその中から基本用語を中心にご紹介します。HTMLとはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、インターネット上の情報を共有する為に各個人のコンピュータ環境に依存しない統一した規格の言語になります。簡単に言うとWebページを書く為の言語です。 「ハイパーテキスト」とは情報を結びつけるハイパーリンク機能を持ったテキスト文書の事。またはその仕組みの事です。 【リンクについてはこちら】「マークアップ」とは、文書の構造や段落、改行、表、リストなど文章中の役割や意味などに専用の「しるし」をつけるという事です。 「ランゲージ」は、その文法や決まり事の意味で使われています。 HTMLの文書には様々な内容が部品のように組み合わされて出来ています。HTMLではこの部品をそれぞれ「要素」として分類し、該当の箇所がどの要素なのかを分かるように「タグ」という印をつけて示しています。 タグ付けされた文書を解読し、定義に沿って適切に表示をするのが「ブラウザ（Google、Safariなど）」の役割となります。  HTMLの標準仕様とは今までは、HTMLの標準仕

マクロ展開機能はとっても重要さて、前回のブログでは、CMSで必要なデータ構造体 element型について、かなり突っ込んで書きました。今回は、element型に入っているデータからHTMLを生成して、ブラウザに返すところについて書いていきます。で、そのキモとなるのは、マクロ展開です。マクロ展開というのは、生成されるHTMLのテキストの中に、マクロ定義された文字列があったら、その文字列を定義されている別の文字列に変更する、っていう話です。AWExion HOTPortは、一応、分散サーバ型のNFTプラットフォームということになっているので、同じC言語のソースコードで動くサーバが多数あるわけですね。そうすると、サーバのURLなどをソースコードに埋め込んでしまうと、他のサーバで利用するときには、いちいちそこを書き換えたりする、みたいな話も出て来るから、そこは、生成されるHTMLの中で、たとえば、ThisHostと書いておいて、その部分を、実際のサーバのURLに変換してくれたりすれば良いわけです。書き方は簡単です。生成されるHTMLの中で、${ThisHost} という部分を見つけたら、その ${ThisHost}というのを、別の、たとえば、Https://coconala.com (頭のHは本当は小文字です)に変換してくれたりすれば良い、ということになりますね。ほかに、こういうプラットフォームでは、ログインして、アクセスしてきたユーザのIDやセッションID（ログイン中に付加されるID）をあちこちに埋め込まないといけませんから、UserIdとかSessionIdとかも、マクロ定義してお

HTMLのもととなる構造体 element 型さて、前回のブログは、CMSについてHTMLの重大な問題について、ほぼ愚痴としてぐちぐち書きました。今回は、もっともっと具体的な話になります。HTMLをベタ書きしてWEBページを造ることはほとんどなくなり、HTMLというのは、いわば裏にかくれたWEB用ページ記述言語になっています。しかも、WEBページを生成する CMS 自身がHTMLを生成することもなくなりつつあり、HTMLを生成しているのは、WEBページ内に埋め込まれた、あるいはWEBページからリンクされたJavaScriptのスクリプトが、なんらかのページの元となるデータ（構造化されたコンテンツとかいうものかな）から、HTMLを生成する、という形がほとんどです。最初のブログ↓にも書きましたが、WEBサイトというのは、多層構造になっています。まず、WEBサイトのいろいろなページの元になるデータがデータベースサーバに入っています。そして、ブラウザからのリクエストでCGIが、リクエストされたページの元になるデータをデータベースに問い合わせて、そしてデータベース中のページの元からHTMLページを作り出すわけですね。ブラウザからのリクエストの中には、データベースの内容を書き換えることを要求するものもあって、その場合は、CGIがデータベースの内容の更新をする問い合わせをデータベースに対して行う、というような構造です。ということで、データベースの中には、WEBページの元になるデータを表現する仕組みが必要です。そのWEBページの元になるデータとはどういう構造をもったデータ構造か、というのが今回

C言語のプログラミングしますということで、こちらのブログでご紹介しておりますシステムのソースコードをサービスとして御提供します。WEBとは何かココナラで、人気のサービスの上位にくるのがWEB制作サービスです。そして、ネットを検索すると、実にたくさんのWEB制作会社があります。つまり、WEB制作は非常に需要が高いサービスだということがわかります。つまり、WEBサイトやホームページを持ちたい！という人が多いわけですね。そこで、インターネットが一般化（1994年）する前のインターネット黎明期（1990年）から、インターネットを利用してきたアラカンのIT企業社長として、WEBとはなにか、あるいは、WEBはここ1990年からの30年余りでどう変遷してきたのか、さらには、最近いろいろ噂されている Web3についても、知っている範囲で（大して知らないけど）書いてみます。WEBの始まりWorld Wide Web は、1990年にCERN（欧州原子核研究所）のティム・バーナーズ＝リーがHTML（ハイパーテキスト記述言語）を開発したときに始まります。その段階で、元祖のHTTPプロトコルが開発されて、ネットワークで繋がったコンピュータ間で、互いにリンクされて繋がったドキュメントをシェアする仕組みができました。1990年までのインターネットでは、ネットワークにつながったコンピュータ間でのメッセージのやり取りするには、mail とnewsgroupが主に使われていました。mailは、現在とほぼ同じものす。また、newsgroupは、投稿されたメッセージがネットワークで繋がっているコンピュータの間に拡散

こんにちは。山本佑樹です。家の近くにある桜が散りつつありますが、次に満開の桜を見ることができるのが1年後と思うとなんだか寂しい気持ちになりますね・・・。さて、昨日はWordpressでホームページを制作するメリットについて、ご説明しましたが、今日はデメリットについてご説明できればと思います。Wordpressに限らずなんでもそうだとは思いますが、メリットもあればデメリットももちろんございます。今回はWordpressを使用する際のデメリットにフォーカスしてお伝えしていきます。デメリット①通常の静的ページと比較して、ページの読み込み速度が遅くなるデメリット②プラグインやテーマとの互換性がない場合に、ページエラーや不具合が生じるデメリット③テーマやプラグイン、Wordpress本体の更新が定期的に必要になるデメリット④複雑なパスワード設定ができていなかったり、定期的に更新できていないとセキュリティーの脆弱性やハッキングが懸念される一般的に言われているのが、以上の4つとなります。ホームページ制作においてWordpressはかなりオススメできますが、メリットとデメリットのどちらも理解した上で使っていきたいですね。当方では上記デメリットの対策もきちんとさせていただきますので、ご安心ください。ホームページ制作に関する相談も承っておりますので、お気軽にご連絡くださいませ。

今日も暖かい一日でしたね。皆さまいかがお過ごしでしたでしょうか。 私は先日から行っているホームページの改装を進めておりました。 昔はHTMLが書けないと自分でホームページなど作れなかったのに、今は選択するだけで簡単にテキストのフォントや色、レイアウトなどが変えられたり、お店だって作れてしまう。 本当に便利な世の中になりましたね。 お陰で、あともう少しで公開出来そうです^_^ 少しだけどんな感じかお話しますと、今までお問い合わせやDMでお受けしていたものも、ホームページから簡単にお申込いただけるようにしています。 出来るだけ早く公開できるよう、明日も頑張りますね！！ それでは今日もあたたかくしておやすみくださいませ。

初めまして「ゆずサポート」です。今回の記事ではプログラミング初心者の私が実際に使用した学習サイトをご紹介致します。私が学習している言語は以下のものです。・C#・HTML・CSS・JavaScript・Python上記になります。　C#の学習時間が長いのですが、ゲーム開発に主に使っていたため初心者にはとても難しいと今でも思っています。その後にその他の言語を学習したのですが、C#が難しすぎたので少し入りが簡単に感じました。ゲーム開発も面白かったのですが、Web開発もとても面白いです。最近はメインで・HTML・CSS上記を学んでいます。この２つの言語は２つで１つみたいなところがあるので、セットで覚えることになると思います。とても学習しやすかったのでおすすめの言語です。＜参考にした学習サイト＞・progate・ドットインストール＜参考にしたYoutuber＞・しまぶー・いまにゅ上記になります。今まで学習した言語はサイトやSNSで検索するとある程度の事が学習できる様になっています。なのでとても学習しやすくて分からなければ検索すると大抵の問題が解決します。これから学習を考えている方はとても学習しやすい環境が整ってますので、ぜひ挑戦してみてくださいね！

今回はクラスページの生徒情報に関するページについて紹介したいと思います。ここのページで生徒の連絡先などがわかるようになっています。今回から各ページのビジュアルとワークフローを載せていきたいと思います。【緊急連絡のときにすぐに情報が引き出せるように】写真のように生徒の氏名、住所などがわかるようになっています。名前をクリックすると⬇︎情報の変更・削除ができるようになっています。最初はこちらから情報登録をします⬇︎【バリデーションつきの登録フォーム】⬇︎【確認ページ】⬇︎【登録完了ページ】⬇︎【反映された生徒ページ】⬇︎教員の仕事は多く煩雑な印象があるので、できるだけシンプルに目的を絞ったページ展開意識しました。次回はクラス予定のページを紹介します！

　こんにちは、今回から少しずつLaravelでの学校や塾向け業務効率化Webアプリ開発の過程をここに残していきたいと思います。　Laravelを学び始めた人や、プログラミングに興味がある初心者の方にわかりやすい内容を発信できればと思います　　　　　　（僕は全て独学です！誰でもできます！！！）。　兎にも角にも今回はこのアプリケーションで何ができるのかを紹介していきたいと思います。　top画像の左にあるのが用意しているメニューです。⬇︎こちら（きっかけはいつも日本の学校の先生って仕事量の多さが異常に多いなと思っていて、それを解決できるアプリ作ったら面白そうだなと思ったからです。ちなみに文部科学省の『教員が担うべき業務』を読んで内容を考えました。）それぞれの大まかな内容として•トップページ 　--  今日の天気、予定、行事などが閲覧できるページ•クラスページ　--　先生が担当のクラスに関する情報が閲覧できる•成績管理　　　--   クラスの成績管理閲覧ページ•学校行事　　　--   学校行事の詳細を閲覧できるページ•カレンダー　　--  予定一覧がカレンダーで確認できるページ•メッセージ　　--  メールのような機能をつけたい（まだ開発していません）•職員フォロー　--  教員同士の掲示板のようなページ•指導要領　　--授業で必要なプリントなどを選べる（まだ開発していません）•情報登録画面　--  各情報の登録ページトップページクラスページ成績管理学校行事職員フォロー情報登録画面　こんな感じの見た目で開発しており、使いさすさシンプルさ、直感的な操作性を意識して見た目を整えています。　

さて今回からは、実際にMicro CMSの使い方を解説していきます。まずはMicro CMSのサイトにアクセスし、新規登録をおこないます。第一回はこちら↓コンテンツの追加左側のメニューからまずはコンテンツを追加します。＋ボタンを押すことで追加できます。ここでいうコンテンツとは、サイト内のどんな内容を表示させるか？ といったものです。例えば「お知らせ」とか「メニュー」とかそんな感じでOKです。今回はお知らせを作っていこうかと思います。次に「APIの型を選択」という画面が現れます。通常は左側の「リスト形式」でOKです。すると「APIスキーマ（インターフェース）を定義」という画面に移動します。今回作りたいお知らせのイメージは、TOPページに一覧で・◯月◯日　お知らせを投稿しました・◯月◯日　お知らせを投稿しましたのようにテキストだけを投稿するものにしたいです。必要な項目はまずは日付とタイトルですね。それと各お知らせをクリックしたら、リンク先に飛べるようにしたいです。ですので「リンク先」の項目を作りましょう。こんな感じ。この時にそれぞれの項目でフィールドID、表示名、種類というものを決める必要があります。・フィールドIDはデータを呼び出すときに必要なものです。半角英数字でつけます。・表示名は、管理画面で表示される名称です。わかりやすいものならなんでもOK・種類はテキストや画像など、その項目においてどんな種類のものを投稿できるようにするか、というものです。テキストにはテキストフィールド、テキストエリア、リッチエディタの３種類があります。各項目の種類についてまず最初の項目にdateがありま

シンプルな Web サイトの作り方シンプルな Web サイトは Firebase のホスティング機能を利用すると簡単に作成できます。HTML と CSS で必要なページを作成して公開する方法です。各ページの中身（コンテンツ）を作成すれば、簡単にインターネットで公開で s きます。この Web サイトの作成に必要なのは以下の項目です＊　基本的な HTML と CSS の記述方法＊　Google アカウント（Firebase を利用するには Google アカウントが必要です）＊　Web サイト作成用の PC（Windows/Mac/Linux）＊　インターネットアクセス費用は基本的に無料ですFirebase プロジェクトの作成Firebase のホスティング機能を利用して公開するので、Firebase のプロジェクトを作成する必要があります。 Firebase は Google が提供するサービスで利用するためには、Google アカウントが必要です。 まだ、Google アカウントをお持ちでない場合は、最初に Google アカウントを作成してください。Google アカウントはこちらのサイトから作成できます。Google のアカウントの準備ができららFirebase コンソールにアクセスします。Firebase の利用が初めての場合は、以下のような画面が現れますので、「_Create a project_」をクリックします。Firebaseプロジェクト作成画面次に表示する画面では、プロジェクト名を入力します。Firebaseプロジェクト名入力画面次の画面は Google An

今日は、WordPressでサイト制作を進めるうえで重要な**「テンプレート階層」と「固定ページの設定方法」**について学びました。最初は「なぜ同じページなのに表示が違うんだろう？」と疑問に思っていましたが、WordPressにはページごとに表示を切り替える仕組みがあり、それを理解することで制作の幅が大きく広がりました。WordPressには役割ごとのPHPファイルがあるWordPressでは、ページの種類によって使用されるPHPファイルが変わります。例えば、home.php … トップページsingle.php … ブログ記事の詳細ページpage.php … 固定ページarchive.php … 記事一覧ページというように、それぞれ役割が決まっています。この「テンプレート階層」を理解することで、「なぜこのページだけ表示が違うのか」が少しずつ分かるようになってきました。固定ページごとにテンプレートを切り替える方法今回は来店予約ページだけ専用のデザインにしたかったので、page.phpをコピーしてpage-reserve.phpを作成しました。そして、ファイルの先頭に次のようなコメントを書きます。このコメントを書くことで、WordPressの管理画面から**「テンプレート」**として選択できるようになります。固定ページごとに違うデザインを作れる便利な仕組みだと知り、とても勉強になりました。デフォルトテンプレートとの違い通常の固定ページはデフォルトテンプレート（page.php）を使用します。しかし、来店予約ページだけは来店予約テンプレート（page-reserve.php）を選択

すみません、ザックリとCSSでのボタンデザインです。内容は、画像を一切使わなくても、このくらいのグラフィカルなボタンがデザインできますよー、という内容です。（画像を使用しないので、画像ボタンやバナーよりは読み込みが速いと思われます。）サンプルでは、<button>タグと<a>タグの2パターン用意しております。■ボタン１（<button>タグ用）▼CSSbutton{    position: relative;    width: 100px;    height: 100px;    background: radial-gradient(50% 80%, circle, #00D1F2, #0055C1);    border: 1px solid rgba(0,0,0,0.5);    border-radius: 50%;    color: #fff;    font-size: 15px;    line-height: 1.2em;    font-family: inherit;    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5) ,        0px 0px 4px rgba(255, 255, 255, 1);    box-shadow: 0 2px 6px rgba(0,0,0,0.5),        0 2px 10px rgba(0,100,255, 0.7),        inset 0 0 10px rgba(0,0,150,0.6);    cursor: p

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

今回もイラストACの素材と、CSSで素敵にお飾りします！よかったら参考にしてみてくださいね🎶完成見本https://　tsuyu0102.github.io/css-sample/blinking-hearts/index.html⭐️左上、右下のテープは、固定していて、右上のハートはアニメーションで点滅させています。▼1200px幅▼480px幅▼320px幅PNG▼画像は、イラストACのこちらの素材をダウンロードしました。https://　www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewarded⭐️イラストACの利用にはアカウント（無料）が必要です。⭐️今回は、素材それぞれに色をつけて、tape.png, heart01.png, heart02.pngという名前で保存しました。それらをimgフォルダ内に入れました。大きさは変えてないです。背景は透明です。html<div class="container">   <h2>INFORMATION</h2>   <img src="img/tape.png" alt="upper-tape" class="upper-tape" />   <im

マテリアライズとはCSSフレームワークの一つで、簡単にいうとCSSのセットのことです。これを使って簡単にレイアウトしていけるというものです。他にもBootstrap（ブートストラップ）というCSSフレームワークもありますが、今回はMaterializeを使ってみたいと思います！私と一緒にちょこ〜っと試してみましょう〜🎵完成見本今回は下記のようなレスポンシブレイアウトを作ってみたいと思います。▼幅が1201px以上の場合（.xl）…画像4個並ぶ▼幅が993px〜1200pxの場合（.l）…画像3個並ぶ▼幅が601px〜992pxの場合（.m）…画像2個並ぶ▼幅が600px以下の場合（.s）…画像1個並ぶこんなレスポンシブなレイアウトもクラス名をちょこっとつけるだけで出来ます。こちらの実際のコードに関しては、下記の「レスポンシブレイアウトを作ってみよう！2️⃣（.row, .col）」でご紹介しますが、まずはマテリアライズを使えるようにコードをコピペします。Materializeにアクセス最初にマテリアライズのサイトに行きます。https://　materializecss.com/htmlにMaterialize（マテリアライズ）をセットするトップページのピンクのGET STARTEDボタン、または左ナビのGetting Startedをクリック。HTML Setupのところにある、コードを丸っとコピーしてhtmlファイルにペーストします。▼そしたら下記のようになりましたが、今回は、materialize.min.cssとmaterialize.min.jsを、CDNのものを使い

さて、前回で最後にしようとおもったけど、まだ続けます。CSSがらみで、いろいろ書き足りないことがあったからです。これは前回のブログです。っていうか、CSSについてはほとんど触れてなかったし。ということで、HOTPortでの、CSS生成と、HTMLとのからんだところなどをここではしっかりと書いていきます。HTMLとCSSを組み合わせたいろいろなテクニックについては、ググったりすると、結構出て来ることが多いです。で、そういうテクニックを見ていると、ときに、「ここまでやらんでもできるでぇ」みたいなのも出くわします。iOSのブラウザで背景画像が固定できない、っていう点についても、かなり面倒な解決法が書かれていることもありましたし、あと、メニューを左右のサイドに固定する方法とかも、むちゃくちゃ面倒な方法が書いてあったりしました。で、そういうのを参考にしつつ、一番単純にできそうなものを、利用しています。JavaScriptは使っていません。タブの切り替えも、通常の方法ではなく、ページ遷移を使っています。だから若干反応が遅いこともあります。ただ、確実なのと、セキュリティ的に万全です。そのあたりで、最後に書いたように、打倒！WordPressなのでした。CSSはなんかややっこしいなんか、CSSって面倒なんです。大昔、CSSがないころは、HTMLの中にスタイルに相当するレイアウトとかがいろいろ簡単に書き込めて、それで、それなりになんとかなっていたんですが、いまは、ほとんどのWEBページが、パソコンとスマホの両方に対応する必要があるんで、そうなると、HTMLの中にスタイルを書き込んでしまうと、パソ

CMSの話の前にさて、前回のブログ↓は、とても気合をいれて長いものになってしまったので、内容も濃いし、ちょっと今回はリラックスして、短めに行きます。まずCMSとは、Content Management System の略です。WEBページのコンテンツ、つまり、文書とか、画像、動画、音声、添付のデータファイルとかを管理する仕組みのことです。で、WEBページはまず基本的にHTMLで書かれているわけで、CMSがやることは、ページの内容（content）を管理して、その内容からHTMLファイルを生成して、ブラウザに送り返すことをします。もちろん、CMSなんかなくても、HTMLでベタに書いておけば良いのですが、そうなると、内容を更新するときには、いちいちHTMLファイルを変更して、それをWEB サーバにアップロードする必要があって、ブラウザから簡単に内容を更新とか、画像を追加とかをすることはできません。だから、ページの更新とか内容の追加とか、そういうことを簡単にできるようにするには、CMSが必要だということになります。つまり、CGIを使ってページをアクセスできるようにして、ブラウザからのリクエストを処理して、ページをの内容を書き換えたりできないと行けないわけです。そのあたりのことは、最初のブログに書きました。で、CMSは、実体としては、CGI ＋ データベースサーバの形をとっていて、通常は、PHPなどで書かれていて、PHPがブラウザからのリクエストを読み込み、そしてデータベースにソケット通信でアクセスして、データベースの内容を取り出したり、あるいはデータベースの内容を更新したりして、その

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

これまでは、Vue の公式チュートリアルのページ上でコードを入力して動かしていましたが、実際に利用するにはこのままでは、Vue を利用する事ができません。今回は、公式チュートリアルの前半で学習したような、１ページで機能を実現するようなケースを考えてみます。インターネットに公開する方法Vue で開発したアプリをインターネットに公開する方法は幾つかあります。 今回は、一番簡単な方法として、「HTML ファイル」で公開する方法を紹介します。 HTML ファイルならば、通常の Web ページを公開するサービスを利用すればインターネットに公開する事が可能です。 ほとんどの場合は、PC で HTML ファイルを作成して、Web サイトをホスティングしているサーバーにコピー（アップロード）すれば公開できます。今回は、インターネットに公開する方法ではなく、HTML のファイルを作成する方法を紹介します。HTML ファイルの基本(*)「<!--」と「-->」の間は、HTMLの記述には関係ありません。この間にはメモのような事を書くことができます。プログラミングでは「コメント」と呼ばれます。Vue の書き方にも、基本的な枠組みがあったように、HTML にも同じように基本的な枠組みがあります。<!DOCTYPE html><html>    <head>        <!-- ヘッダー情報をここに書きます -->    </head>    <body>        <!-- HTMLの本体をここに書きます

最近なんとか三日坊主にならないよう筋トレを頑張っているあきです！さて、プログラミング初心者の人によく聞かれるのが「最初の言語でおすすめの言語はなんですか！？」とよく聞かれます。なのでその質問に対して答えていきますね！！まず前提条件で、プログラミングで学ぶ以上自分でサービスを出したい！つまり成果物を明確に作りたい！という仮定の元に議論していきます！まず成果物を作りやすいのはどのようなものあるのでしょうか！？自分が一通り経験した例を出しますね！ホームページ,ウェブアプリ,スマホアプリ,スクレイピングで比較してみました！！ホームページを作成する（静的）html cssホームページを作成する（動的）html css javascriptWebアプリを作成する（動的 + DB連携）html css javascript + DB (mySQL,AWS,Firebase)Webアプリを作成する（動的 + DB連携 + バックエンド処理）html css javascript + DB (mySQL,AWS,Firebase) ＋ Node.js(php)アプリを作成する（動的）swiftjava アプリを作成する（動的 + DB連携 + バックエンド処理）swift(iOS) + DB (mySQL,AWS,Firebase)java(Android) + DB (mySQL,AWS,Firebase)アプリを作成する（動的 + DB連携 + バックエンド処理）swift(iOS) + DB(mySQL,AWS,Firebase)  ＋ Node.js(php)java(Android)

ちょっと「コンテンツマーケット」なるものを使ってみたんですが、こちらの方がもっとブログらしいというかなんというか(笑)ブログの方では、「コード」ブロックが存在してないんですが、こちらにはあります。「ブログ」よりも「コンテンツマーケット」の方が扱いやすいですね(^^;)かなり「no+e」に近い仕様です。■コンテンツマーケット出品記事▼【JavaScript不要！CSSだけで高機能UI】CSSだけでアコーディオンBOXhttps://coconala.com/contents_market/articles/cmrmtdt4n00cnad0hbek0a1b0▼【JavaScript不要！CSSだけで高機能UI】CSSだけでタブ切り替えBOX https://coconala.com/contents_market/articles/cmrn0hwdu001nc20hxx6auvgz▼【JavaScript不要！CSSだけで高機能UI】CSSだけで折り畳みテーブルhttps://coconala.com/contents_market/articles/cmroe3ik9000hat0hq3rpou0p▼【JavaScript不要！CSSだけで高機能UI】CSSだけでtable絞り込み機能https://coconala.com/contents_market/articles/cmrof804u00j17y0hnnxctbd0とりあえず、HTMLとCSSの高機能なUIサンプルを4点ほど出品いたしました。で、このコンテンツマーケットですが・・・画像とかのアップはできるんですが、ZIP

前回のブログ投稿で、レスポンシブサイトでメディアクエリに触れましたので、今回ここを掘り下げてみようと思います。もうほとんどのクリエイターの方はメディアクエリ＠media screen and ( min-width: 768px ) {................}（768pixel 以上）＠media screen and ( max-width: 768px ) {................}（768pixel 以下）は、ご存じであると思いますが…ほぼこれで事足ります(笑)でも、メディアクエリは深堀りすると・・・結構色んな使い方ができるんですよね。今回はそこをご紹介いたします。※「＠」は、このブログでの都合上、全角を使用しております。ご了承ください。　（半角アットマークは禁止ワードに設定されているようです(^^;)）■複数条件の連結■AND条件・複数の条件を「かつ」で結ぶときは「and」キーワードを利用します＠media screen and ( min-width: 480px ) and ( max-width: 640px ) {................}　この場合、「画面の幅が、480px～640pxの場合」という意味になります■OR条件・複数の条件を「または」で結ぶときには、各条件を「, カンマ」で区切って記述します＠media screen and ( min-width: 480px ) , screen and ( max-width: 640px ) {................}　この場合、「画面の幅が、480px以下、または

本日は、現在制作を進めているWebサイトの「店舗紹介」セクションをHTML・CSSでコーディングしました。今回は、デザインカンプをもとに、レイアウトや装飾を細かく再現することを意識して制作を進めました。実務を想定したコーディングを行いながら、HTMLの構造やCSSのレイアウト、画像の配置方法など、多くのことを学ぶことができました。今回制作した内容今回作成したのは、店舗の魅力が伝わる「店舗紹介」セクションです。✔ HTMLで構造を設計まずはHTMLでレイアウトを組みました。セクションタイトル左側の店舗内観写真右側の店舗外観・相談スペース吹き出し特徴カードデザインだけを見るとシンプルに見えますが、実際は見やすく保守しやすいHTML構造を考えながら作成しています。✔ CSSでデザインを再現CSSではデザインカンプに合わせて細かく調整しました。例えば…CSS Gridを使ったレイアウトFlexboxでアイコンと文字を横並びborder-radiusで写真の角丸position:absoluteで吹き出しを配置object-fitで画像サイズを調整transitionを使った画像アニメーション見た目だけでは分からない細かな調整もたくさん行いました。✔ 吹き出しを画像として重ねる今回のデザインでは吹き出しの形が特殊だったため、HTMLでは画像を配置し、CSSのposition: absolute;を利用して写真の上に重ねています。吹き出しの位置も何度も微調整しながら、デザインカンプに近づけました。✔ カードデザインも調整店舗の特徴を伝えるカードも制作しました。アイコンサイズ文字位置行間背景

ブログ5記事目なんですが、語りだけだと技術の片鱗がまったく見えないなあ・・・と思いまして(笑)で、他では見ないと思われるサンプルを３点ほど、こちらで公開させていただきます。::before で描画するアイコン2点。もう一つは、ルーズリーフデザインのCSSです。先にコードを出しますね。いつも通り、結論から入ります(笑)■チェックマークのサンプル▼チェックマークHTML<ul class="check">    <li>あいうえおかきくけこさしすせそたちつてと</li>    <li>あいうえおかきくけこさしすせそたちつてと</li>    <li>あいうえおかきくけこさしすせそたちつてと</li>    <li>あいうえおかきくけこさしすせそたちつてと</li>    <li>あいうえおかきくけこさしすせそたちつてと</li></ul>  ▼チェックマークCSS/* ■■■■■ チェックマーク ■■■■■ */.check > li {    position: relative;    list-style: none;    padding-left: 28px;}.check > li:before {    content: '';    position: absolute;    top: 2px;    left: 0;    width: 20px;    height: 20px;    border: 2p

📚 本日の学習今日はCSSで背景画像の実装について学習しました。単純に画像を表示するだけではなく、`background-image`を使用することで、テキストやボタンを重ねたヒーローセクションなど、実務でもよく使われるレイアウトを実装。特に意識したのは、・`background-size: cover;`で画面サイズに応じた表示にすること・`background-position: center;`で被写体が崩れにくい配置にすること・コンテンツの視認性を考えたレイアウト設計「表示できる」だけでなく、「どんな画面幅でも自然に見えるか」を意識しながらコーディングしました。少しずつですが、デザインを忠実に再現するためのCSSの考え方が身についてきたと感じています。明日も一歩ずつ積み上げます💻#Web制作 #HTML #CSS #WordPress #コーディング #Webデザイン #今日の積み上げ

本日もJavaScriptの学習を進めました✨今回は、「スクロール量に応じてボタンの表示・非表示を切り替える処理」に挑戦しています！具体的には、画面をスクロールしたときにイベントを発火させて、スクロール量をpx（ピクセル）単位で取得し、一定の位置を超えたらボタンを表示する、という流れです。まだ途中ではありますが、・windowに対してイベントをつける・スクロール量を取得する（document.scrollingElement.scrollTop）・条件分岐で表示・非表示を切り替えるといった処理の流れが少しずつ理解できてきました。特に、「windowは画面全体を指している」という点が印象的で、これまでのHTML要素への操作との違いも少し見えてきた気がします。途中でカッコの閉じ忘れなどのエラーにもハマりましたが😂こういうミスも含めて理解が深まっているなと感じています。完成までもう少しなので、引き続き頑張っていきたいと思います✨

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

こんにちは、webサイト（ホームぺージ）に使われるHTML 、CSSなどのプログラミング言語を使って、WEBサイトなどを作ります。では早速説明したいと思います。プログラミング言語についてですか、HTML,CSS, javascriputなどあります。他にもrubyやjava、phpなどたくさんあります。webサイト作成で使う主な、プログラミング言語は、HTML,CSS,JavaScriputです。ではHTMLなんですが、HTMLを簡単に言うと骨組みといったところでしょうか、あと文字などもHTMLで書きます。CSSは、柄ですね。JavaScriptは、動きですね。ざっとこんな感じです。それで、HTMLCSSで、出来たのがこちらの写真です。こんな感じで、出来ます。大体動きをつけなくてもオシャレなサイトは作れます。まあ、これは１０分程で作った代物なので少しオシャレさには、かけます。この上のtopとかのボタン押しても普通に反応します。じゃあなんで、JavaScriptつけるの？っていう話ですよね。それは、JavaScriptを付けるとさっき言ったように、動きを付けることができます。動画をご覧ください。このようにクリックすると、開いたり閉じたりできるやつを付ける事ができます。いかがでしたでしょうか。お分かりいただけましたか。このように、HTML,CSSである程度で、できます。なのでJavaScriptは、付けたら便利ですが、絶対付けなくてもいいという感じです。ご覧いただきありがとうございます。これが私が出品しているサービスです。ご覧ください！！さっき言ったホームページ制作もやっています。

Webサイトを運営する上で、時に「文字化け」という言葉を耳にすることがあるかもしれません。この現象は、サイトの訪問者にとっても、運営者にとっても困った問題です。しかし、この問題を理解し、適切に対応することで、快適なWebサイトを提供し続けることができます。この記事では、技術的な言葉をなるべく避け、誰にでも理解しやすいように「文字コード」と「文字化け」について解説します。文字コードって何？文字コードとは、文字や記号をコンピュータが理解できる数字のコードに変換するルールのことです。私たちが普段見ている文字も、実はコンピュータ内部では0と1の羅列、つまり数字で表されています。この数字と文字を結びつけるルールが文字コードです。代表的な文字コード世界にはさまざまな文字コードが存在しますが、特にWebサイトでよく使われる代表的なものには以下のようなものがあります。- ASCII（アスキー）：主に英数字や記号を表すのに使用される基本的な文字コードです。- Shift_JIS：日本語を含む文字を扱うために開発された文字コードです。- EUC-JP：同じく日本語の表示に用いられる文字コードの一つです。- UTF-8：世界中のほとんど全ての文字を表現できる、国際的に広く使用されている文字コードです。文字化けってどうして起こるの？文字化けは、ウェブページを表示する際に使用される文字コードと、そのページが実際に使用している文字コードが異なる場合に起こります。例えば、Shift_JISで書かれた日本語のウェブページを、UTF-8の設定で開こうとすると、文字が正しく表示されずに化けてしまうのです。文字化け

楽天市場などで、画面の端っこにクーポンとかイベントバナーなどがくっついているショップを見たことがあるでしょうか？これもCSSで簡単に出来ますので一緒にやってみましょう！見本松屋 楽天市場店さんに付いていました。https://　www.rakuten.co.jp/matsuya/完成見本1️⃣▼今回は画面の右端につけたいと思います。最初に画像を用意して下さい。松屋さんのように縦長でも、上記のように横長でもOK。html1️⃣<a class="fixed-coupon" href="★リンクURL★">   <img src="img/coupon.gif" alt="10%OFFクーポン" /> </a>⭐️aタグのhrefには、クリックしたら飛ぶページのURLを入れる。⭐️imgタグのsrcには、画像の場所を入れる。⭐️imgのaltには、画像の説明を入れる。CSS1️⃣CSSはこれだけ！.fixed-coupon {    position: fixed;    top: 100px;    right: 0;}.fixed-coupon:hover {    opacity: 0.8;}完成見本2️⃣少しだけ見えていて、マウスホバーするとする〜っと表示されるバナー見たことありますか？次はそれをやってみたいと思います！▼少しだけ見えている↓▼マウスを置くとする〜っと現れる！今回の画像はこのようなサイズになっています。ですのでCSSは下記のようになります。htmlは1️⃣と同じです。CSS2️⃣.fixed-coupon {    pos

こんにちは！山本佑樹です！最近、娘が私と2人きりの時にちょっとだけ甘えてくるのが、すごく嬉しいです。まあこれもいずれすぐになくなるとは思いますが・・・今日はWordpressでホームページを制作する際にぜひ導入しておきたいプラグインを5つ紹介させていただきます。どのプラグインもいろんな方がブログ記事などでオススメされていますが、改めてご紹介します。①EWWW Image OptimizerWordPress内の画像を圧縮し表示を最適化できるプラグインです。②Contact Form 7WordPressで問い合わせフォームを作成できるプラグインです。③Google XML SitemapsXMLサイトマップを自動的に作成するためのプラグインです。④BackWPupブログ記事などのバックアップを取るためのプラグインです。⑤SiteGuardWordPressのセキュリティを強化してくれるプラグインです。以上5つは定番中の定番プラグインですが、Wordpressを使用する場合はぜひ取り入れておきたいプラグインです。ぜひ参考にしていただければと思います。当然ながら私がホームページを作る際にも導入しておりますので、ホームページ制作を検討されてる方はお気軽にご相談くださいませ。

ーーーーーーーーーー■HTML / CSS＊トップページ：25,000円〜 / 1ページ　┗レスポンシブ標準装備(ハンバーガーメニューを含む)＊下層ページ：10,000円〜 / 1ページ　┗レスポンシブ標準装備＊PCデザインカンプのみでのレスポンシブコーディング ：0円　┗経験をもとにSP版へレイアウト変更いたします＊CSSアニメーション：2,000円 / 3ヶ所　┗ボタンへのホバーアニメーション等ーーーーーーーーーー■jQuery＊スライドショー：8,000円 / 1ヶ所　┗「slick」を使用します＊タブ切り替え：8,000円 / 1ヶ所　┗タブ内の要素が3つ以下の場合の費用になります＊アコーディオン：5,000円 / 1ヶ所＊モーダルウィンドウ：8,000円 / 1ヶ所＊トップへ戻るボタン：3,000円 / 1ヶ所その他の機能実装やアニメーション等もご相談ください。ーーーーーーーーーー■Wordpress＊基本費用：5,000円〜 / 1ページ　┗htmlファイルからテンプレートファイルへの変更＊ループ機能実装：5,000円 / 1ヶ所　┗お知らせ等(メインループ1ヶ所のみ)＊カスタム投稿：10,000円 / 1項目　┗管理画面の構築およびページへの反映＊カスタムフィールド：5,000円 / 1ヶ所　┗管理画面の構築およびページへの反映＊カスタムタクソノミー：15,000円 / 1タクソノミー　┗taxonomy-〇〇.phpの作成を含みます

遅れての投稿となりますが、11月1日に出品者ランクが最高評価の【プラチナランク】となりました！ご依頼くださる方には感謝の気持ちしかありません。本当にありがとうございます！「即対応」「お客様の課題を解消する提案」「高品質」の3つを特に意識し、活動して参りました。もし、Web周りでお困りごとがあったり、「ホームページが欲しいけど分からないことだらけで不安。。」という方は私にメッセージをくだされば、迅速に対応させていただきますので、お気軽にご相談ください！お客様からは「迅速丁寧にこなしていただき、コミュニケーションもしやすく、大変助かりました。」「クオリティがよくご依頼して本当に良かったです！」とのお声をいただいており、技術面だけでなくコミュニケーション面でも高い評価をいただいております！本当にありがとうございます！常にお客様に寄り添った対応をさせていただいており、例えば、制作の流れとしては、（制作の流れ）ご相談→ヒアリング（お客様の目的、要望の把握）→要件定義（必要な機能、納期、費用）→制作着手→適宜進捗報告→初稿→納品という形で制作を進めております。特に最初のヒアリングを重要視しており、お客様のご依頼の目的をしっかりと把握し、ご期待を超えるようなサービスの提供をさせていただきます。主な活動内容としては、HTML,CSSなどの静的コーディングによるサイト制作やコード修正、WordPressを用いたホームページやランディングページの制作に特化し、出品サービスにも掲載させていただいております。下記が私が出品しているサービスになります。こちらは主に新規の静的サイトコーディングのサービスに

今回はクラスページのクラス予定に関するページについて紹介したいと思います。ここのページではクラスの予定のみが閲覧できるようになっています。それでは見ていきましょう。まずは基本のビジュアルから⬇︎月毎に閲覧できるようになっており、今月の予定が初期表示されるような仕様になっています。予定名、予定日のみが表示されるようにし、選択すると詳細が表示されます。こんな感じです⬇︎こちらの詳細ページで詳しく内容が確認できます。右側の⚙マークを押すと...⬇︎編集ページになっています。こちらですぐに内容変更ができるようになっておりアクセスしやすくしました。では登録画面を見ていきましょう⬇︎バリデーション(バリデーションは未入力のチェックや数字の半角指定などを判定する機能のことです！！)付きの情報入力画面です。確認ページ⬇︎(＊全画面に戻った時のセッションについてはコード解説の時に解説します)登録ページ⬇︎情報が反映されました⬇︎　予定をクラスごと、試験ごとなど分けていますがここに関して全て統一した予定でもいいのではないかとも思いましたが、例えば朝礼、夕礼での先生の話さなければならないことをすぐに確認できるのは便利だなと思い予定を細かく分けました。先生がいかに一つの仕事に集中できるかここが大事なのかなと思います。　こういうどうしたら先生の多すぎる業務を効率化できるか？と言う問に対してシチュエーションを想定しながらアプリの仕様を考えると、具体的な仕様が見えてきます(月毎表示の方がいいのではないか、すぐに内容修正をかけられた方がいいのではないか等)。次回は授業スケジュールのビジュアル紹介です。ありがと

今回は、WordPressホームページ制作サービスのイメージを、より分かりやすくお伝えするために制作した「デモサイト」をご紹介します。「ホームページ制作を依頼したいけれど、どのような仕上がりになるのか分からない」そんな不安を少しでも解消できるように、実際に操作していただけるデモサイトを用意しました。▼デモサイトはこちらの商品説明欄にリンクを貼っております※掲載している会社名・文章・サービスなどは、制作イメージをご確認いただくための架空の内容です。HTML・CSSでデザインを構築今回のデモサイトは、まずHTMLとCSSを使ってデザインやレイアウトを作成しました。写真が引き立つように余白を広く取り、落ち着いた色合いで、企業としての信頼感が伝わるデザインにしています。パソコンだけでなく、スマートフォンでも見やすくなるよう、画面幅に合わせてレイアウトが変化するレスポンシブ対応も行いました。完成後にWordPress化HTML・CSSで制作したサイトを、その後WordPressへ移行しました。WordPress化することで、公開後も管理画面からお知らせやブログを投稿・更新できるようになります。ホームページは、完成して終わりではありません。営業時間の変更や新しいサービスのお知らせ、休業日の案内など、必要な情報を自分で更新できることも大切です。専門的なコードを触らなくても更新できるため、ホームページに詳しくない方にも長く活用していただけます。ホームページに必要な機能も搭載今回のデモサイトには、事業用ホームページでよく使用される機能も取り入れています。・お知らせ・ブログの投稿機能・お問い合わせ

最近のホームページは、パソコン・スマホ・タブレットなど、画面サイズに合わせてレイアウトが変わります。これを「レスポンシブデザイン」と呼びます。レスポンシブ（responsive）は直訳すると、「反応が良い」「敏感に反応する」という意味になります。ですので「レスポンシブサイト」は、「画面サイズに応じて柔軟にレイアウトが変化するサイト」ということですね。昔は、「PC用サイト」「スマホ用サイト」と分けて作られることが多かった（場合によっては「iモードサイト」もｗ）ですが、現在は１つのサイトで、画面幅に合わせてHTMLのレイアウトが切り替わる方法が主流です。ちょっと時系列でどのような変遷があったのか、ご紹介いたします。■黎明期：２～３つの専用サイトを作る。先ほども述べたように、「PC用サイト」「iモード用サイト」「スマホ用サイト」を作っていた時代があります。これ、更新がすごく大変で・・・(^^;)1つのテキストを修正するだけで、3か所（3倍）の修正が必要でした。・・・端末って、たくさんの種類作られると、制作の人間はたまったもんじゃないです(笑)それぞれの専用サイトが作られ、ちょっと技術のあるところだと、PHPで判別させてリダイレクトかけるとかやってました。（そうでないところは、そのまま放置(笑)　Googleも「モバイル」と「PC」で検索結果を分けておりました）■JavaScript で表示を切り替える手法（このあたりからレスポンシブっぽい）JavaScript は、Window幅を取得できるので、window.onresize = function(){    if (window.

むかしむかし、とはいっても2022年の話です(^^;)色違い、指や矢印やハートマークのアニメーション、女性イラスト付き、などなどを、いろいろなパターンを作成しまして、どのパターンが一番クリックされるか、を試してみました。■2022年で私が行った、CV数実験▼これが、ボタンのサンプル画像です。で、クリックはPHPで自動計測できるように作成いたしました。▼その結果はこちらです。1位：オレンジボタン＋女性イラスト2位：ピンクボタン＋ハート回転アニメ3位：緑ボタン＋矢印アニメ4位：オレンジボタン＋ハート回転アニメこんな結果になりました。けっこうおもしろくないですか？(^^;)■有名な Mozilla のCV数実験それこそもっと昔に Mozilla の実験で、Firefox のボタンを色違い（青・紫・黄・緑）で用意した時にどれが一番押されるか、というのがあったんですが、これでは「緑」が圧倒的に押されたそうです。▼その時のボタンデザインがこれ。▼そして結果がこれ。Green が3倍以上の大差でクリックされたという結果です。もちろん、デザイン次第でクリック率は変わってきますし、同じ緑や赤でも、微妙な色合いでクリック率が変わってきます。■CV実験の結論やはり、赤系（ピンク・オレンジ）と緑系が強いなあ、という印象です。そういえば、赤と緑は色相的に逆の配置なんですよね。ああ、なるほど。だからあんなにクリスマスは強いのか(笑)納得です(^^;)こういったABテスト用のクリック計測や、WordPressへの実装、CV改善のためのちょっとしたカスタマイズも対応しております。お気軽にご相談ください。

むかしむかし、Internet Explorerには「Filter」という優れた機能がありました。（「とほほのWWW入門」にその残骸が残っております(笑)）Waveで画像を波打たせたり、本当にいろんなことができる機能でした。個人的には、「これが標準化されて他のブラウザにも実装されないかなあ」と思っておりました(^^;)ですが、W3Cの標準とは大きく異なる独自仕様だったため、IE10で廃止されてしまいます。ところが、その後CSS3で「filter」が登場。昔のIE独自Filterとは別物ですが、画像や要素の色を加工できる便利な機能として生まれ変わりました。昔、Google Mapの色を変更しようと思うと、Google Maps APIを使ってスタイル設定を行う必要がありました。設定もなかなか大変ですし、API利用料の問題もあります。ですが、埋め込み地図にCSSのfilterを適用するだけでも、意外と雰囲気を変えることができます。ポートフォリオからサンプルのURLに入ってみてください。そちらの方がわかりやすいです。https://coconala.com/users/6145929/portfolios/1404258個人的には、filter: sepia(70%);あたりの色合いが、ちょっとレトロで渋くて好きです(笑)■１．オリジナルのGoogle Map<iframe src="https://www.google.com/maps/embed?pb=～～～～～～～～～～" allowfullscreen=""></iframe>■２．彩度変更（satu

今日はJavaScriptを使って、スクロール時のフェードインアニメーションを実装しました！HTML・CSS・JavaScriptはそれぞれ役割が違います。今回は3つがどのように連携して動いているのかを整理しながら学習しました。① HTMLで「目印（タグ）」を付けるまずHTMLでは、JavaScriptが操作できるようにclass名を付けます。例えば、スクロール時に表示させたいセクションにはのようにを追加します。このfade-upが「あとでJavaScriptから動かしますよ！」という目印になります。② CSSで「どんな動きをするか」を決める次にCSSでは、「表示前はどんな状態にするか」「表示されたらどう変化するか」を設定します。例えばこれは最初は透明（opacity:0）少し下に配置する0.8秒かけて変化するという意味です。そしてになると不透明になる本来の位置へ戻るつまり下からふわっと浮き上がるアニメーションになります。③ JavaScriptで「いつ動くか」を決める最後にJavaScriptです。JavaScriptでは「どんなタイミングでイベントを起こすか」を決めます。今回はでHTMLのが付いた要素をすべて取得します。その後を使って画面をスクロールしたとき要素が表示されたかどうかを監視します。設定しているは要素が20％見えたらという意味になります。表示された瞬間にが実行されます。するとCSSのが適用されふわっと表示される仕組みです。今日学んだことHTML・CSS・JavaScriptは、それぞれ役割が違います。HTML：動かしたい要素に目印（class）を付けるCSS：表

今日はポートフォリオ制作を進めながら、CSSとJavaScriptを使ってサイトの見た目や使いやすさを改善しました。「デザインカンプをそのまま再現するにはどうすればいいのか？」を考えながら、一つひとつ調整を行いました。NEWSセクションのレイアウト調整まず取り組んだのは、お知らせ一覧のデザイン調整です。デザインカンプでは、各ニュースの区切り線が左右の枠線に少し余白を残したデザインになっていました。最初は border-top を使っていましたが、線が横いっぱいに表示されてしまうため、CSSの擬似要素（::before）を使って長さを調整しました。これにより、デザインカンプに近い上品な仕上がりになりました。枠線を二重にする方法を学習ABOUTセクションでは、外側の金色の枠だけでは少しシンプルに感じたため、内側にも細い金色のラインを追加しました。この時に使用したのがCSSの擬似要素です。position: relative; と position: absolute; を組み合わせることで、HTMLを書き換えずに内側の線を追加できることを学びました。CSSだけでデザインの幅が大きく広がることを実感しました。Googleマップのレスポンシブ対応ACCESSセクションでは、画面幅を小さくするとGoogleマップの高さまで小さくなってしまう問題がありました。原因を調べながら、heightaspect-ratiomin-heightなどの違いについて理解を深めました。レスポンシブデザインでは、幅だけでなく高さの指定も重要であることを学ぶ良い機会になりました。ファーストビューをスマホ向けに最

HTMLで、できない事・できることって、どこまで出来るのか解説します。まずHTMLは、WEBサイトで言う骨組みなどに当たる部分で、ホームページを作るときは必ずと言っていいほど使います。なので、ある程度はHTMLで骨組みを作成します。それで、HTMLはどこまでの機能などがあるのかを、上げてみました。【HTML,CSSで、出来る事】：文字を入力する欄、文字の送信ボタンを、表示することができる。（文字を、ある場所に送ったりすることはHTML,CSSだけじゃ出来ない）：画像表示：ヘッダー、フッター（ハンガーメニューは、JavaScriptが必要）：文字の構成：文字の書き込み：色付け（グラデーションも）：音楽挿入：動画挿入：urlなどなどHTML,CSS、だけで出来ることは、たくさんあります。こちらが今上で書いた【HTML,CSSで、出来る事】で書いた物のなかの、『文字と動画挿入、文字の構成、文字の書き込み、画像表示、色付け、ヘッダー、フッター、』などを合わせて作ったものです。これは、HTML、CSSを使ったWEBサイトです。これは、タイトルが＜h１＞と言うもので作っていて、一番文字を大きくしています。その次に、＜h２＞で『自己紹介という文字』を＜h３＞で『〜〜〜』を書きました。こんな感じで、HTML、CSSの深掘り解説でした、ご覧頂きありがとうございます。下記が、私が投稿しているサービスです。見てみてください。

こんにちは！冬の深まる季節、寒いですね。。私の家の外でも雪が降っています。今回は、あなたのWebサイトにも少し冬の魔法をかけてみませんか？JavaScriptを使って、訪問者に雪の降る体験を提供する方法を紹介します。エンジニアではないサイト運営者の方々でも簡単に実装できるよう、技術的な言葉を避けて説明します。なぜ雪の演出を加えるのか？Webサイトに動的な要素を加えることで、訪問者の注目を引き、記憶に残りやすくします。雪が降るアニメーションは、特に冬のプロモーションやイベントにぴったりで、サイトに季節感を加えることができます。それでは、どのようにしてこの魔法を実現するのでしょうか？JavaScriptで雪を降らせるJavaScriptは、ウェブページに動きを加えるためのプログラミング言語です。この言語を使って、雪の粒を画面上に描き、ゆっくりと下に落ちるアニメーションを作ることができます。基本的な考え方は、雪の粒を表す小さな要素をたくさん作り、それらがランダムに、そして自然に画面を横切るように動かすことです。実装のステップ1. 準備: まず、あなたのWebサイトに追加するHTMLファイルとJavaScriptファイルを用意します。3. 雪の粒を作る: HTMLの中で、雪の粒を表す要素を作ります。これは、CSSを使って白い丸や星の形にすることができます。4. 動きを加える: JavaScriptを使って、これらの雪の粒に動きを加えます。雪の粒それぞれに対して、画面の上から下へとゆっくり移動するように指示します。また、ランダムに左右に揺れる動きも加えることで、より自然な雪の降り方を演出

今回はマテリアライズというCSSフレームワークを使って、ヘッダーナビと、カード型のリンクを作ってみたいと思います。基本コピペでOK！今回も画像たっぷりでお届けします！完成見本レスポンシブレイアウトなのでそれぞれの幅の見栄えをご覧ください🎵⭐️ピンクのナビのところは上に固定してみました。スクロールしても常に上に表示されているのでいつでもアクセスできる形になっています。▼1500px幅（画像が3つ並びになっています）▼1000px幅（画像が2つ並びになっています）▼970px幅（右のナビメニューが消えて左にハンバーガーメニューが出ています）▼600px幅（画像が縦一列並びになっています）▼600px幅（ハンバーガーメニューをクリックすると左からナビが出てきます）マテリアライズのパーツ色々https://　materializecss.com/▼マテリアライズのサイトのCSSやComponentsのところにコピペで使える見本があります。今回はこれらをいくつか組み合わせて作成してみたものになります。1️⃣マテリアライズのCSSとJavaScriptをhtmlにセットする！早速作っていきます。▼まずは前回の記事を参考に、MaterializeのCSSとJavaScriptを設定しておいてくださいね🌈2️⃣jQueryを使えるようセットする！今回ハンバーガーメニューをクリックしてサイドナビが出るところでjQueryを使いたいので、使えるように設定しておきます。▼下記サイトにアクセスhttps://　cdnjs.com/libraries/jquery▼</>のマークをクリックす

今回はCSSでグラデーションの枠を作ってみました。もしよかったら参考にしてみて下さいね🎵完成見本1️⃣ボーダーに見えますが、実はグラデーションの四角の上に、ひとまわり小さい白い四角が置いてあります。html1️⃣  <div class="colorful-border">   <p>セール開催中！！</p>  </div>CSS1️⃣  <style>   .colorful-border {    display: flex;    justify-content: center;    align-items: center;    text-align: center;    background: linear-gradient(30deg, #7bffff, #ff7);    padding: 0.5rem;   }   .colorful-border p {    font-size: 2rem;    letter-spacing: 0.5rem;    color: tomato;    font-weight: bold;    background: #fff;    width: 100%;    height: 100%;    margin: 0;    padding: 2rem;   }  </style>完成見本2️⃣グラデーションの大きさをアニメーションを使って変えることで、ゆらりと色が変化して見えるボーダーとなっています。↓html2️⃣<div class=

今回はカラフルな文字をCSSで作ってみましょう！コピペで使えるサンプル3つご用意いたしました🎵気に入ったのがあったら参考にしてもらえたら嬉しいです😊完成見本1️⃣一文字ずつ色違いにしてみました⭐️html1️⃣<p class="colorful-text">   <span>♡</span>   <span>N</span>   <span>E</span>   <span>W</span>       <span>I</span>   <span>T</span>   <span>E</span>   <span>M</span>   <span>♡</span>  </p>⭐️タイトルとして使う場合は、pタグではなく、h1〜h6タグを使うのがおすすめです。⭐️♡は中抜きの♡、 は半角スペースのことです。CSS1️⃣  <style>   .colorful-text {    text-align: center;    font-weight: bold;    letter-spacing: 0.1rem;   }   .colorful-text span:nth-of-type(odd) {    color: light

2023年下半期よりindex_sp.htmlが表示されなくなるという情報をサイトで拝見しました。【参考サイト】https:／／gk-post.com/10742#GOLDですが、名前を変えればindex_sp.htmlはそのまま使えるようですので早速一緒にやっていきましょう♪index_sp.htmlを引き続き使うために！まず、index_sp.htmlを別の名前に変えます。アンダーバーをハイフンにして、index-sp.htmlとかでもいいんじゃないかな？と思います、多分。そしてそれをGOLDサーバーに入れます。次にそのページへのリンクを貼ります。▼バナーでは無く文字のパターン<a href="〜 ここにはリンク先のURLを入れる 〜">新スマホページはこちら</a>もしもindex-sp.htmlという名前でGOLDサーバー一番上の階層（フォルダに属さないところ）に入れたら、リンク先のURLは下記のようになります。https:の後のスラッシュ2つは半角にしてください。https:／／www.rakuten.ne.jp/gold/ショップID/index-sp.html「新スマホトップページはこちら」とか「特集ページはこちら」とか表示させる文字はお好きに変更してみてください。▼画像にリンクをつけるパターン（バナー）もしRMS上でこんなふうに入力出来るところがあったら、画像のURLとリンク先URLを入れましょう。バナー画像自体を入れておくところはGOLDでもR-CabinetでもOK。altは画像が表示されなかった時に出る文字。画像がなくてもわかる文字

私は日ごろはライター兼カメラマンとして活動しています。元は全国紙の記者・カメラマンでした。ほかの多くのWeb製作者とは違い、必要とあればコンテンツ（文章、写真など）までかかわることができます。著作権に対する意識も、「昨日今日、『仕事としてうまみがありそうだ』とWeb制作に飛び込んできた人とは大違い」と自負しています。この記事では、私がコーダーとしてどのようにWeb制作にかかわろうとしているかをご説明します。1.Photoshop やIllustratorで作ったカンプのクセや限界を理解しているまずは、この画像の左側のフォームをご覧ください。Photoshopで作られたカンプ（一部）をご覧ください。名前欄が上の名と下の名、電話番号欄が市外局番などを分けてある点などを除けば、ごくありがちなタイプです。しかし、よく見ると「名前」欄と「住所」欄、「メールアドレス」欄で高さが微妙に違っています。「メールアドレス」と「メールアドレス（確認）」の文字部分も「メールアドレス」のほうが出だしで少し右にずれています。「住所」「お電話番号」などの文字の上下の空き方にもバラツキがあります。これは本来は写真補正ソフトであるPhotoshopで作成したの主な原因でしょう。Illustratorでも同じことが起こります。また、Web制作のために開発されたFigmaやAdobe XDでも起こりうることです。私がコーディングした右半分をご覧ください。それを除くと、微妙な差とはいえ、スッキリしているはずです。（枠のラインがあったりなかったりするのは、キャプチャー画面を縮小したためです）Photoshopなどのソフ

関西、関東などの八地方区分で区切られている都道府県のプルダウンが欲しい。しかもvalueのとこはアルファベットであって欲しい！そんな方に！コピペ用プルダウンを。<select name="pref">    <option value="all-area">地域</option>    <optgroup label="北海道">        <option value="hokkaido">北海道</option>    </optgroup>    <optgroup label="東北">        <option value="aomori">青森県</option>        <option value="iwate">岩手県</option>        <option value="miyagi">宮城県</option>        <option value="akita">秋田県</option>        <option value="yamagata">山形県</option>        <option value="fukushima">福島県</option>    </optgroup>    <optgroup label="関東">        <opti

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

こんばんは、今日は授業スケジュールページのご紹介です。授業スケジュールページは写真のように時間割が確認できるのと、各科目の授業計画が確認できるようになっています。今回は時間割ページを紹介します。時間割ページはかなりシンプルで、編集・登録ページは写真のようになっています。最終的にはTOPページの今日の予定欄のところに時間割が表示される予定です。今日は短いですが時間割ページのご紹介でした。