すべてのカテゴリ

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、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-

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

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

私のサービス「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

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)

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サイトを運営する上で、時に「文字化け」という言葉を耳にすることがあるかもしれません。この現象は、サイトの訪問者にとっても、運営者にとっても困った問題です。しかし、この問題を理解し、適切に対応することで、快適な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を用いたホームページやランディングページの制作に特化し、出品サービスにも掲載させていただいております。下記が私が出品しているサービスになります。こちらは主に新規の静的サイトコーディングのサービスに

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

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

こんにちは、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サイトにも少し冬の魔法をかけてみませんか？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ページの今日の予定欄のところに時間割が表示される予定です。今日は短いですが時間割ページのご紹介でした。

HTMLシリーズを復習がてらに始めようと思います。これを見れば初心者の方でもプログラミングの基礎が学習できるように分かりやすく解説していきたいと思います。【htmlはマークアップ言語です】英語で「mark up~ = ~に印をつける」という意味ですが、ではプログラミングにおける印付とはなんなのでしょうか？プログラミングにおけるHTMLの役割は家で言うと骨組みみたいな役割です。と言ってもイメージが湧きにくいと思うので画像で見ていきましょう。色で囲っているところ(スペースや何を表示させるか)を定義するのがHTMLの役割です。もっとシンプルなhtmlのコードを見てみましょう⬇︎<!DOCTYPE html><html>  <head>   <title>タイトル</title>  </head>  <body>    <h1>見出し</h1>    <p>ここに何かしらの文章が入ります。</p>  </body></html>画面ではこう言うふうに表示されます⬇︎見出しここに何かしらの文章が入ります。<>で囲まれ部分をタグと言いますいろんなタグがありそのタグを使って組合せ、骨組みを作っていくのがHTMLの役割です。次回からは具体的にどのタグがどういう役割を果たすのかを見ていきたいと思います。ありがとうございました。

インスタグラムのAPIを使って、投稿写真を取得してみました。まず、インスタグラムのアカウントを作り、写真を投稿します。続いて、Facebookのアカウントからアクセストークンを取得し、Jsonデータを取得します。取得したデータをjQueryでHTMLに埋め込みます。余談ですが、左下の本の写真を文字に埋め込んでタイトルにしています。同じ要領で、BASEなどのHTMLを自分で編集できるプラットフォームにインスタグラムのタイムラインを表示することも可能です。自分でサーバーを立ち上げなくても利用できるサービスは写真を保存するのに苦労しますが、インスタグラムにおいておけばいろいろなことに使えそうですね。

Web 開発はフリーランスや転職に向いた分野です。実際に、Web 開発を学習してフリーランスや転職を目指す方も多いと思いますが、それにはちゃんと理由があります。この記事ではその理由に迫ってみました。現在、Web 技術を学習中の方は参考にして頂ければ幸いです。たくさんあるソフトウエアの仕事実は、プログラミング技術というかソフトウエアを生かせる仕事は Web 開発意外にもたくさんあります。その中で、フリーランスや転職を目指す方が多いのには実はきちんとした理由があります。Web 技術は「体験」できるプログラミング技術一番の理由は、Web 技術は簡単に「体験」できるプログラミング技術だからです。 どういう事かと言うと、PC １台あれば、作ったものを誰でも「目で見られる形にできる」からです。しかも、殆どの場合、それほど高性能の PC も必要ありません。この「体験」できると言うのがとても大きな意味を持っています。実際に、フリーランスになったり、転職を成功させるためには、プログラミング技術を身につける必要があるのは当然ですよね？そのために必要なことは、学習を続けてプログラミング技術を確実に自分のものにする必要があります。Web 開発の場合、勉強を開始して覚えた簡単な事でも、「形」として見ることができます。実際に作った物が「形」になると「できた」という実感が得られる物です。出来ることが多くなると学習も楽しくなってきます。そうしたことが、学習を続けるモチベーションになっていって続けやすくなります。たくさんの情報がある二番目の理由は、たくさんの情報がある事です。よく、Web 学習で行われる「模写」

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

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

HTMLの基本的なSEOテクニックは、ウェブページのランキング向上に役立つ方法の一つです。まず、各ページにユニークなタイトルタグを設定することが重要です。タイトルタグは検索結果ページのスニペットやブックマークのラベルとして使用されます。次に、メタディスクリプションタグを適切に設定します。これは、ウェブページの内容を簡潔に説明するタグで、検索エンジンがそのページのスニペットを作成する際に使用します。 また、重要なキーワードを含む見出しタグ（H1、H2など）を使用することも重要です。これらのタグは、ページの主要なトピックを検索エンジンに伝える役割があります。さらに、画像のalt属性を使用して、画像の内容をテキスト形式で説明することが求められます。これにより、検索エンジンは画像の内容を理解し、視覚的にウェブページを閲覧できないユーザーにとっても有用な情報を提供できます。 最後に、ウェブページ内の他のページへのリンクを適切に設定することが重要です。これにより、検索エンジンはウェブサイトの構造を理解し、各ページの関連性と重要性を評価することができます。これらの基本的なHTMLのSEOテクニックを適用することで、ウェブページの視認性と検索エンジンのランキングを向上させることが可能になります。

はじめに・よくあるデザイン　情報を一覧表示する際、行の高さは最も大きなものに合わせて上部を揃え、各列の横幅を固定とするのが一般的である。これをHTMLで実装しようとすると画像の破線のような箱を用意して情報を敷き詰めていくだけとなり、非常に簡単であることからよく見かけるデザインである。　しかしながら、赤色の部分のように無駄な空間ができてしまい、それが大きくなるほど非常に見栄えが悪くなる。高さを無理やりそろえたデザイン　先ほどの無駄な空間を無くそうと考えた場合、他よりも数が多いタグや長くなるタイトルを削ることが真っ先に思いつくだろう。　文字数などで制限をかけてしまうのも良いが、当たり前であるが削った分ユーザーが得る情報は減ってしまう。これを許容できるかどうかは、扱う情報の性質を考えて検討する必要があるだろう。情報を削らずに無駄な空間を作らないデザイン　それでは、情報を削らずに無駄な空間を作らないデザインはできないのか。それを実現するデザインは存在しており、横幅のみを固定して、高さの制約を無くすることで実現することができる。　ただし、行の概念がなくなるため、若干実装難易度が上がる。その他、横方向には位置がそろわないため、情報が整理されていない印象を持たれないか注意する必要がある。最後に　PHP-ZONE.com では今回紹介したどのデザインでも対応可能です。部分的なカスタマイズから、サイト全体の改修まで対応可能ですので、お気軽にご相談ください。

「プログラミングって何から学べば良いかわからない‥」「プログラミングスクールって高額過ぎて踏み出せない‥」そんな風に思っていませんか？　私もそうでした。私は4人子供を育てながら小学校で教員をしていましたご存知のように教員は超絶ブラック。子供に学びを教える喜びを味わいながらも、自分の働く環境について強く疑問を持つようになりました自分を変えたい、新しい技術を学びたい。プログラミングって興味あるけど、何から始めたらいいかすらわからない。独学は挫折の連続。スクールは高額で決心がつかず、迷って動けない時期がずっとありました結局貯金をはたいて、某有名プログラミングスクールに通うことに決めましたそこでの学びは私にとって本当に有意義でした。専属の先生が一つ一つの質問に丁寧に答えてくれて、安心して学ぶことができました。子育て仕事と苦労しながら先生の支えがあってなんとか卒業できましたしかし卒業後に、ある後悔をしました。それは、「スクールが即戦力のエンジニアまで専門性を高められるほどの環境」だからこそ、私のような「基礎基本もわからない初心者にとって無駄に高額すぎる環境」だという気づきです例えるなら初心者にとってスクールは【小学生が算数を学ぶのに大学に通う】ようなもの私はプログラミングを学んだ嬉しさと、どこか満足しきれない思いを抱えて卒業しました。もしこの話を聞いて少しでも興味を持っていただいた方には、私のような思いをさせないように、私がプログラミングスクールに150万円以上費やして学んだ知識・経験から、基礎基本の部分をまとめ、お子さんから大人まで初心者の方にも分かるように、安価な値段でお教えします。

CSSだけでもする〜っとした動きは作れます。今回は質問欄を押したら、解答欄がスルスル〜っと出てくるようなものをCSSだけで作ってみます！完成見本https://　tsuyu0102.github.io/css-sample/faq-accordion/index.html▼1200px幅▼601px幅▼600px幅（レスポンシブ対応にしました）html<div class="container">   <h2>Q&A</h2>   <div class="qa-container">    <input type="checkbox" id="q01" />    <label for="q01">Q01：今日注文したらいつ届きますか？</label>    <p>ご注文確定から５日前後となります。</p>   </div>   <div class="qa-container">    <input type="checkbox" id="q02" />    <label for="q02">Q02：送料はかかりますか？</label>    <p>全国一律送料無料となっております。<br />※ただし購入商品が大型、またお届け先が沖縄及び離島・その他一部地域では追加料金を加算される場合がございます。また一部の商品に限り送料をいただく場合がございます。</p>   

サイトで流れる文字を見たことがあるでしょうか？<marquee>タグでも出来るようですが、こちらのタグは非推奨となっているようです。今回は<marquee>タグに変わって、CSSアニメーションでやってみたいと思います！<marquee>タグ【参考サイト】https://　developer.mozilla.org/ja/docs/Web/HTML/Element/marquee▼でも使い方は簡単！marqueeタグで囲むだけ。▼Google Chromeでは動きましたでも非推奨でいつ使えなくなるかわからないので、animationを使ってみましょう🎵CSSアニメーション▼htmlはこのようにしてみました<div class="loop-area">   <p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、1500 年代に未知の印刷業者がタイプのギャレーを取り、それをスクランブルしてタイプ見本帳を作成して以来、業界の標準的なダミーテキストでした。</p>  </div>pタグの中に適当に文を入れてみてください。▼CSSはこのようにしてみました<style>   body {    margin: 0;    padding: 0;   }   .loop-area {    background-color: royalblue;    display: flex;   }   .loop-area p {    color: #

下記を用意します。名前はなんでも良いです。- index.html- script.jsscript.js内に下記JavaScriptを書いて、時間を取得します。const today = new Date()console.log(today)▼index.htmlをGoogle Chromeなどで開いて、コンソール画面を確認します。※Google Chromeだと右クリック→検証→Consoleをクリックします。console.log(today)が出ています。続いて下記を追記して、時間と分を取得します。const hour = today.getHours()const minutes = today.getMinutes()console.log(hour)console.log(minutes)▼コンソール画面で確認します。時間と分が出ました！次は◯時◯分という形で出してみましょう！以下を追記します。1行目はバッククォートで囲んでいます。↓コレ`const time = `${hour}時${minutes}分`console.log(time)次に先ほどのhourを使って、もしも18時以降なら（hourが17より大きかったら）…こんばんは上記当てはまらなくて、もしも12時以降なら（hourが11より大きかったら）…こんにちは上記当てはまらなくて、もしも5時以降なら（hourが4より大きかったら）…おはようございますどれにも当てはまらなかったら、（hourが4以下）…無理しないでくださいを表示してみます。下記を追記してください。function greeting()

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

コーディングのお仕事を40件近く担当して、依頼内容で多いものをご紹介します。スクロールで画像等の要素が表示されたらふわっと表示させる色々なサイトでも良く見ますね。実装方法はいろいろ考えられると思いますが、私はJavaScriptの「Intersection Observer」を使います。JavsScriptならscrollイベントなどでも実装するのですかね。ご依頼主様からは、処理が重くなる心配をされる方もいますが、重くなる事はないと思います。要素が画面内に入ったら、Intersection Observerでclassを付けて、CSSで処理させるので、実装もしやすいと思います。バーガーボタンクリックでスマホメニュー表示バーガーボタンはCSSで作るのですが、私としては、CSSが少し複雑ですね。before疑似要素、after疑似要素を使って作ります。気を付けているのが、スマホメニューを透過で表示させたときに、メニューを操作に連動して、下層のコンテンツが動いてしまうこと。bodyにposition:flexd;overflow:hidden;width:100%の指定で防げると思います。バーガーボタンクリックで×ぼたんに変形させるのに、transformを使います。Intersection Observerは覚えておいて損はないと思います。お仕事募集中ですのでよろしくお願いいたします。

Vueを使ってMarkdownファイルを表示する前回は、Firebase ストレージに保存したファイルを Vue を使って表示する方法を紹介しました。これで簡単なブログなどのサービスを実現できます。今回は、HTML ではなく、Firebase のストレージに保存した Markdown のファイルを Vue で表示する方法を紹介します。こちらの方が、原稿を書く際書きやすく、そのままの形でも読みやすいというメリットがあって便利です！Markdown とは？Markdown は以前にもこの連載で取り上げていますが、マークアップ言語です。 そのままの形でも、比較的読みやすく HTML などに比べると初心者でも書き方を簡単に覚えられるので便利です。 便利なのは、この形式で書かれたファイルを公開されているモジュールで簡単に HTML に変換する事が可能になっている点です。 ブログなどの記事は、ある程度文章の形が決まっていて、特別な HTML を書く必要はあまりありません。そう考えると、原稿を Markdown で書いておいて、表示する際にプログラムで HTML に変換して表示するという方法はブログサイトを運用するには都合の良い仕組みです。プログラムの履歴を管理するのに、Git がよく利用されますが、Git をベースにオンラインでプログラム開発のプロジェクトを保存して、共有したり公開するのに広く利用されている GitHub のドキュメントも Markdown を採用しています。この記事では、これまで学習してきた Vue を使って、Firebase に保存した Markdown を表示する方法

皆さんこんにちは。山本佑樹です。ここ最近は短い睡眠時間が続いており、夜の作業がかなり辛くなってます。あともう一踏ん張りしたいと思います！！さて、今日はWordpressでホームページを制作するメリットについて、ご説明できればと思います。ホームページ制作を検討されている方でしたら、一度は「Wordpress」というワードを聞いたことがあるかと思います。もちろんWordpressを使うデメリットはありますが、今回はメリットにフォーカスしてお伝えしていきます。メリット①コンテンツ・ブログ記事の追加や編集などホームページの更新を自身で行うことができるメリット②プラグインが豊富で、簡単に機能を加えることができるメリット③無料のものも含めてテーマテンプレートの種類が豊富なため、さまざまなデザインのホームページを作ることができるメリット④SEO対策がしやすいメリット⑤Wordpressに関する情報がたくさんあるので、わからないことや問題が出てきたときに、解決しやすい以上の5つとなります。よく言われるメリットをお伝えしましたが、まだありますのでまた機会がございましたらより詳細をお伝えさせていただきます。Wordpressでの制作も承っておりますので、お気軽にご相談くださいませ。

Vue公式チュートリアル　〜　部品にデータを渡すVue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。前回までのポイントは？前回のステップでは、これまで学習に使っていたメインの部品（ページ）から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。今回の学ぶのは？今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。例えば、ページの先頭に書く情報（ヘッダーと呼ばれる場合もあります）に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。今回の変更前のコードです。(App.vue)<script>import ChildComp from