すべてのカテゴリ

レスポンシブ対応で迷うのはブレイクポイントの設定です。つまり、○○○ピクセル以上はデスクトップ用のレイアウト、○○ピクセル未満はモバイル用のレイアウトと云う決まりごとです。正直、開発者によって違います。わたしは今までの経験から以下の仕様をオススメしてますし、今まで困ったことはありません。max-width: 1440px; をベースにして、横幅 768px 以上はデスクトップ用、横幅 768px 未満はモバイル用の CSS を用意してます。更に、最近はモバイル環境でのブラウズが 60% を超えてることもあるので、モバイル用の CSS をベースにして、デスクトップ用の CSS を書き加えるスキームで仕上げてます。

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

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を使って、これらの雪の粒に動きを加えます。雪の粒それぞれに対して、画面の上から下へとゆっくり移動するように指示します。また、ランダムに左右に揺れる動きも加えることで、より自然な雪の降り方を演出

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

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

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

今回はテキストの縁取りです。デザインカンプにこんな縁取りのデザインがありました。結論から言えば、これをCSSのみで忠実に再現するのは困難でした。原因としては・縁取りの線が太めで、さらにくっきりしていることです。現在のCSSで縁取りができるプロパティは2種類あります。・text-strokeで縁取りをする。・text-shadowで影をつけていき、縁取りのように見せる。前者が圧倒的に簡単ですが、比較的新しめのプロパティで、対応ブラウザがまだ少なく、chromeでもベンダープレフィックスが必要なほどです。一つずつ解説していきます。⚫︎text-strokeで縁取りを行う場合こちらは非常に簡単で【HTML】<p>縁取り</p>【CSS】p {  -webkit-text-stroke: 2px #ff0000;  text-stroke: 2px #ff0000;}これだけで縁取りが完成します。縁取りのプロパティなだけあって、しっかり綺麗にできてます。境界線の前後に色をつけるようなので、あまり太くすると文字がつぶれていきますので注意が必要です。そういったこともあり、冒頭のような太めの縁取りは困難です。⚫︎text-shadowで縁取り風に影をつける場合基本的には影をつけるプロパティなので、結構CSSの量が多くなりますし、綺麗な表示にはならないので、ぼかさないと使えないかと思いました。【HTML】<p>縁取り</p>【CSS】p { text-shadow: 3px 3px 0px #ff0000, -3px -3px 0px #ff00

レスポンシブ対応は、現代のウェブデザインにおいて非常に重要な要素です。ユーザーが様々なデバイスや画面サイズでウェブサイトを閲覧することを考慮する必要があります。このような場面で、styled-componentsは強力なツールとなります。このライブラリを使って、Reactコンポーネントをスタイルする際にレスポンシブ対応を簡単に実現することができます。1. メディアクエリを活用したレスポンシブスタイル styled-componentsを使用すると、コンポーネント内に直接メディアクエリを埋め込むことができます。たとえば、特定の幅以下のデバイスに対してスタイルを変更したい場合、以下のように記述できます： 上記の例では、画面幅が768px以下の場合、StyledContainerコンポーネントのパディングが10pxに変更されます。 2. デバイスごとのスタイル styled-componentsを使用すると、特定のデバイスに対して異なるスタイルを適用することも可能です。以下のように、styled-componentsのcssヘルパーを使用して、特定の条件でスタイルを設定することができます： 上記の例では、StyledButtonコンポーネントにmobileプロップスが渡された場合に、フォントサイズが14pxに変更されます。 3. テーマの使用 styled-componentsは、グローバルなスタイルやテーマの管理にも適しています。テーマを使用することで、共通のスタイルやカラーパレットを一元管理できます。レスポンシブ対応においても、テーマを使用することで、異なるデバイスに適したスタイ

そのアニメーション本当に要る？Web制作においてCSS、JavaScriptを使ったアニメーションはよく見かけると思います。アニメーションは見た目にもインパクトに残りやすいですが、使いどころを間違うとそのサイトで伝えたいことが分かり辛くなる可能性があります。アニメーションを使うと分かり辛くなる例そのサイトの目的が文章を主とした情報提供である場合、アニメーションとは相性が悪いです。例えばニュースサイトやブログなどでスクロールするたびに文章がアニメーションで出てくるとどうなるでしょう？読み辛くなります。人間は文章を読む時、視線が上から下に動きます。しかし読んでいってもアニメーション待ちで下の方の文章が間に合っていないとストレスになりますし、そのサイトですべき文章での情報提供の価値が薄れてしまいます。また、初心者のポートフォリオサイトで無駄にアニメーションを使っているのがよくあります。自分の能力を見せるために動きのあるサイトを使いたくなる気持ちは分かりますがポートフォリオサイトの目的は"こんな作品を作った"、"こんな能力があります"とアピールすることが目的かと思います。それなら見やすく分かりやすいレイアウトを行いリンク先の自分の作品で適切なアニメーションを使うことができることをアピールした方が良いと思います。アニメーションを使うと効果的な例ビジュアルのみでユーザに価値提供できるようなサイトはアニメーションと相性が良いです。ファッション、フード、アニメなどなど...極端に言うと写真1枚でもそれがなんのサイトか説明できるジャンルはアニメーションと相性が良いです。日本と海外のサイトの違いと

簡単にアイコンを表示できるFont Awesome。今回は使い方の手順をご紹介いたします。一緒にやっていきましょう😊Font Awesomeのサイトhttps://　fontawesome.com/▼ヘッダーナビにある、Iconsをクリックするとさまざまなアイコンが出てきます。まずはFont AwesomeのCDNを入手！https://　cdnjs.com/libraries/font-awesome▼</>のマークのところをクリックすると必要なコードがコピーできます▼コピーしたコードは、htmlファイルのheadタグ内にペーストしますこれでFont Awesomeを使う準備は整いました！【方法1️⃣】iタグを使って表示する！使いたいアイコンを上記のFont Awesomeのサイトから選びます。https://　fontawesome.com/icons▼今回は、こちらのWeatherから選んでみます▼Freeアイコンをクリックすると、無料で使えるアイコンだけ表示されます。左上のcloudを使ってみたいのでcloudをクリック。▼iタグのところでクリックすると、コードがコピーされます。<i class="fa-solid fa-cloud"></i>をhtmlファイルのbodyタグ内にペーストするだけで、表示されます。⭐️iタグはspanでもOK。<span class="fa-solid fa-cloud"></span>でも出ます。【使用例】例えばこんなふうに使ってみる👑完成見本▼例えばこんなふうに、ヘッダーナビ

html, CSSを使っての作成のポイントを前回の記事を元にかいつまんでご紹介いたします。制作の参考になれば幸いです🌷▼完成見本はこちら今回は、こちらをどのような手順で作っていったかを説明していきます。余計なCSSをリセットするまず下記をhtmlファイルのbodyタグの中に書きました。また、htmlと同じ階層にimgフォルダを作って、その中にitem01.jpgなどを入れておきます。html<section>   <div class="item-container">    <h2>Recommended Items</h2>    <ul>     <li>      <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>CSSCSSはお

今回はhtmlとCSSを使って、レビューのレイアウトを作ってみます。動的に動かすわけでないので、レビューを更新したかったら自分で追加や削除をしなくてはいけませんが、とりあえずレビューを表示したいって時にいかがでしょうか？😊コピペできるようにコードも載せておきますね！よかったら参考にしてみてください🌈完成見本https://　tsuyu0102.github.io/css-sample/review-design/index.html▼1500px幅▼601px幅▼600px幅（600以下で画像を非表示にしています）html<section class="review-section">   <h2>REVIEW</h2>   <ul>    <li>     <img class="user" src="img/user01.png" alt="" />     <div class="review-area">      <p class="name">購入者さん</p>      <p class="star3"></p>      <p class="comment">いつもポイント倍や送料無料セールなどの時に利用しています。セールの時は売れ切れの商品が多いですが、メンズに絞って検索すると希にコスパの良い商品があります。対応も発送もとても早いです。リピさせて頂きます。</p>      <p class="dat

auto-fit（auto-fill）とminmaxを使ってレイアウトすれば、簡単にレスポンシブなレイアウトに！今回もコピペで使えるコード付き！一緒にやって行きましょう🎵完成見本https://　tsuyu0102.github.io/css-sample/grid-auto-fit/index.html▼1500px幅▼768px幅▼320px幅▼ホバーはこのようにしてみましたhtml<section class="item-section">   <h2>NEW ITEMS</h2>   <div>    <a href="#"><img src="img/item01.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item02.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item03.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">

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>   

こんにちは、michoです。今日はWordPressで記事を書く際の「見出し」について書きたいと思います。WordPressで記事を書く際「見出し」をうまく使えていますか？「見出し」は記事においてとても大切な要素です。■なぜ「見出し」が必要？見出しがなく本文だけがずらっと書かれている記事は要点が分かりにくく、読み手の知りたい情報になかなか辿りつけなくなってしまいますよね。見出しをつけて話題を少しずつ区切ることによって、読み手にとって読みやすく、内容も把握しやすくなります。見出しを適切につけることができると、ページの滞在時間や離脱率にもいい影響があり、SEO対策にもつながるとされています。■「見出し」にはhタグを使うhタグにはh1～h6までの6種類があり、WordPressでは通常h1はタイトルに使われるので、本文にはh2以降を使います。また、hタグは検索エンジン等に記事の構成を伝える重要な要素でもあるためh2の次はh3、その次はh4というように使う順番に気をつける必要があります。■効果的な「見出し」を作るより見やすい記事にするために、h2>h3>h4と段階的にデザインを整えるとよさそうですね。見出しのデザインはCSSを追加して変更することができます。サイトのコンセプトに合わせたデザインや色味に変更してみませんか？

今回もイラスト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

今回はイラストACから素材をダウンロードして色々装飾していきたいと思います。サイトのお飾りの参考にしてみてください⭐️完成見本https://　tsuyu0102.github.io/css-sample/floating-png/index.html▼1200px幅▼480px幅⭐️上のお飾りは背景の右上、左上に固定されていて、下の音符と星はぷかぷか浮いているようにアニメーションで動かしています。イラストACから素材をダウンロードイラスト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_rewardedPNGかAIだと背景が透明なのでおすすめです。▼使うパーツごとに色をつけて、png形式で保存。imgフォルダに入れました。html<div class="container">   <h2>NEW ITEM</h2>   <p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500

今回はマテリアライズという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フレームワークの一つで、簡単にいうと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で簡単に出来ますので一緒にやってみましょう！見本松屋 楽天市場店さんに付いていました。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

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

サイトで流れる文字を見たことがあるでしょうか？<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: #

前回Google Fontsのはじめ方（<link>タグを使った方法）について、ご紹介しました。今回はもう一つの＠importを使った導入方法をお伝えしていきます。Google Fontsにアクセス▼サイトはこちらhttps://　fonts.google.com/Google Fontsにアクセスしたらフォントを選んで追加していきます。今回はKaisei Decolというフォントを使ってみたいと思います。フォントの太さが3種用意されていました、今回はRegular 400とBold 700を選んで追加してみます。使いたいフォントを選び終わったら、右上の(■+)のアイコンをクリックして詳細を見ます。現在選んでるフォントが出てくるので、使わないフォントはRemoveしておきます。今回はKaisei DecolのRegular 400とBold 700を使いたいので、Rampart Oneフォントは (-) で消しておきます。そして今回は＠importを使ってみたいので、そちらのラジオボタンをチェックしてコードをコピーします。その下のCSSもコピーします。今回はhtmlの<style>タグ内にコピペしてみました。▼html。クラス名p01にスタイルをつけます。このhtmlファイルをブラウザで開いてみます。▼表示されました！▼Bold 700の方を使いたい時は、font-weight: 700;　を追加します。▼太くなりました！⭐️ダミーテキストちなみにダミーテキストはLorem Ipsumというサイトからのものです。サイト作成時などで、とりあえずダミーで何か

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

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

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

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を適用してねと指定する）外

楽天RMSがCSSでいっぱいになってしまった！入力文字数が足りなくなってきそうだ！誤って触ってしまわないか心配だ！そんなときは思い切って（？）、GOLDに入れてしまうのもアリかと思います。ただ修正するときはGOLDにアクセスしなければいけないので、あまりいじらないものはGOLDに入れておくというのもいいかもしれません。やり方としては、<style>と</style>の間にあるコードをコピペして、.cssという拡張子で保存します。例えば、以前のブログの例で言うと、下記のようになります。(a)charset "UTF-8";.newyear2023 {border: 5px solid #000;text-align: center;padding: 10px;}.red {color: red;}このとき、1行目に、(a)charset "UTF-8";↑(a)のところはアットマークにしてください。と書いておくと、font-familyとかの日本語が文字化けしません。そしてこれを例えば、rms-style.cssという名前で保存して、GOLDにcssというフォルダーを作って、その中に入れたとします。そしたらこのCSSのURLは、https://　www.rakuten.ne.jp/gold/ ショップID /css/rms-style.css↑ブログで禁止ワードに引っかからないようにスペースを空けています。。。となります。そしてこのCSSをRMSで呼び出したい場合は、下記のようなコードを、ヘッダーコンテンツやフッターコンテンツなどに書けばOK。<li

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

React で表示する文字に色をつける！Vue の場合も表示する文字に色をつけるために、CSS の記述が必要でした。React でも同じように CSS の記述が必要です。React の場合は、別のファイルに CSS を記述して「部品」のファイルである、「_xxxx.tsx_」でインポートする方法を使います。CSS で記述すれば簡単！前回の連載のVue 公式チュートリアル（英語版）をご覧になった方ならば、今回の課題は簡単です。同じように CSS を記述すれば簡単に実現できます。 今回のステップ３の実装例です。import React from "react";import "./styles/step3.css";export default function Step3(): JSX.Element {  const titleClass: string = "title";  return (    <div className="step3">      <h1 className={titleClass}>Make me red</h1>    </div>  );}　この「部品」の記述は、「Make me red」を Web ブラウザで表示するための、HTML に対応する部分(JSX)を作っています。実際に文字を赤くするのは、HTML に対応する部分（JSX）に CSS で装飾を指定するためのタグ（className）をつけて、CSS ファイルで指定します。今回は、「_./styles/step3.css_」をインポートし

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

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

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

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

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

自動でPC画面とスマホ画面での見え方を変えてくれるJimdo（クリエイター）ですが、スマホ画面での表示は基本的にコンテンツを縦一列に表示します。これはJimdoの標準的な仕様なので仕方がないといえばそれまでなのですが、いざサイトを作ってみると「スマホで見た時、ここは2列で表示したいな〜」という箇所が出てきます。そういった場合は、CSSのプロパティ「Flexbox」を使用することで下の写真のような2列表示を実現できます。作業の工程上グーグルクロームの検証機能も使用するので、ある程度のHTML/CSSを読む力も必要になってきます。スマホ表示でカラムを2列にしたい方は、下記サービスよりお気軽にお問い合わせください。※このブログの内容はJimdo AIビルダーでは非対応なのでご注意ください。

CSS の手抜き 〜 BootstrapVue の公式チュートリアルでも、CSS の部分に関する学習は Javascript や HTML の部分に比べると少なくなっていました。Web 開発の「機能」という観点で見ると、重要なのは、HTML と Javascript になるのが大きな理由です。CSS は「見た目」をよくするという位置付けなのでどうしても優先順位は低くなります。最小限の手間で、見た目をよくする方法に、Bootstrap などの予め標準的な HTML の記述の装飾をまとめた仕組みを利用すると、最低限の知識で、見た目の良いページのデザインが可能になります。この記事では、Vue で Bootstrap を利用するやり方を紹介しています。Bootstrap とは？Bootstrap は、HTML で書かれたページの基本的な「飾り」を予め準備して提供している「フレームワーク」です。 この機能を利用すると、Web ページのデザインを行う際に、CSS を書くための時間を最小限に抑えることが可能になります。特に、Web アプリなどの開発では、機能の方が重視される傾向が強く、基本的な HTML の部品の表示の仕方にこだわらないでも良い場合も多いので、上手に利用すると開発の手間を最小限にできます。Bootstrap 以外にも似たような仕組みは沢山提供されているので、調べて利用すると好みのデザインのフレームワークを見つけられるかと思います。Bootstrap の利用例次に、Bootstrap を使うとどんな事ができるのかを「ボタン」を例に見てみます。 下のイメージは、三つの例を挙げてい

ーーーーーーーーーー■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の作成を含みます

Vue の公式チュートリアル　表示する文字に色をつけるVue の公式チュートリアルの第３回目です。ステップ３では、表示する文字に色を付けるやり方を学びます。これまで、Vue の「部品」のファイル「.vue」ファイルに HTML と Javascript を埋め込むやり方を学んできました。今回は、CSS を使って文字に色をつけます。前回までのポイントをもう一度まずは、前回までの復習です。 Vue の「部品」として表示する内容をまとめたファイルが「.vue」ファイルです。 このファイルには、三つの部分があります。＊　HTML を書く部分：「template」のタグの部分に書きます＊　Javascript のプログラムを書く部分：「script」のタグの部分に書きます＊　CSS を書く部分：「style」のタグの部分に書きます。　Javascript で、表示に使うデータを指定することもできます。 Vue のフレームワークでは、標準の HTML とは少し書き方が違っています。また、Javascript も特有の書き方で書くので、まずは標準的な書き方を覚えてしまう方法で学習を進めます。今回の学ぶのは？ステップ３で学ぶのは「表示する文字に色をつける」やり方です。標準的な HTML の文字も CSS を使うと、「体裁（見た目）」を整える事ができます。Vue でも、同じコンセプトで、表示のデータの「体裁（見た目）」を整える事ができます。これまでの復習で書いた通り、Vue の部品の「.vue」ファイルの中は、三つの部分から構成されていて、HTML/CSS/Javascript を記述できます。

Vue の公式チュートリアル（ステップ１）をやってみる！フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください！Vue の公式チュートリアルフロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。（日本語版のサイトはサイトはサイトはこちら）日本語のサイトは英語のサイトと同じではないようです。（2022 年 2 月現在） 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。最初の課題は？最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプ

CSS は後回しにしても良いWeb 開発の基本は、HTML/CSS/Javascript です。基本的にどれも勉強しなければいけないのですが、優先度を考えると後回しにできる物もあります。Web アプリを開発する場合には、CSS は後で学習する事にしても良いもの一つです。Web ページを作るには必要Web ページを作る際には、HTML と CSS は必要です。これは、目的が「Web ページ」を作ることにあるためです。HTML だけでは、ページの細かい装飾ができないので、どうしても CSS を使って体裁を整える必要があリます。一方で、Web アプリの開発を考えた場合は、少し話が違ってきます。 Web 開発でも、最終的なページの体裁を整える場合には、CSS を使う必要があります。しかし、当面の目的は、「機能」の実現になるので、HTML と Javascript を中心に進めた方が効率的です。多少、体裁が悪くても機能は検証できるので最初は、HTML と Javascript で CSS は後回しにするか、最低限の利用でも問題ありません。CSS は手抜きもできるもう一つの理由は、Web アプリの開発の場合は、ある程度、手抜きができます。 Bootstrap などを利用すると、CSS の細かい部分を知らなくてもある程度の体裁を簡単に整える事ができます。基本的な CSS の記述を Bootstrap が提供してくれているので、細かい記述は書く必要が無いからです。もちろん、Bootstrap などでカバーされない部分もあるので、最終的にはその部分は CSS を使って記述する必要があります。しか

少々早いですが…年末のご挨拶をさせていただきます。2021年2月に登録したココナラですが、約10ヶ月経過していたとは、時の流れる早さに驚かされますね。沢山の方々の支えもあり、私早苗はここまで活動することができました。最高位プラチナランクを継続し、気持ちの良い状態で年越しを迎えられそうです。ご依頼いただくお仕事を通して、私は幾度となく成長してまいりました。今では提供できる価値に自信を持つことができます。また、本日も納品させていただいたクライアント様より、お礼のコメントをいただくことができました。大変嬉しく思います！まだまだ早苗のココナラは続いていきます。年末ギリギリまでご依頼を受け付けておりますので、どうぞお気軽にご相談くださいませ！皆さま、良いお年を。

初めまして。大阪でWEBデザイナーをしておりますShirokumaDesignと申します。ディレクション、Webデザイン〜コーディングまで対応可能です。 Webや紙の制作物でお困り事があれば、お気軽にご依頼くださいませ♪ ありがたいことに、LP（ランディングページ）制作の依頼を多くいただいております。基本的にはWEBサイトのコーディングをメインで行っているのですが、案件のご依頼が多数あるため、LPのコーディング費用を明瞭化させていただきます。以下、依頼基本的な費用です。お客様にとってベストな提案ができればと思っております。WEBサイト構築がメインのため、合間にLP制作を進めさせていただくかと存じます。納期やスケジュール・費用感などの関係上、お受けすることが難しい可能性もございます。その点はご理解・ご了承くださいませ。ココナラでは「LP専門」のプロがいらっしゃいます。納期やコストなど見合わない場合もあるかと思います。その際は「LP専門」のプロにご依頼いただくのも選択の一つとして、ご一考いただければと存じます。お客様にとって、きっと満足にいくものを仕上げていただけるかと思います。■基本依頼をご検討いただいているお客様の、参考になれば幸いでございます。引き続き、ShirokumaDesignをよろしくお願いいたします。

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

ウェブ制作のスキルを上げるべく、時間を見つけて何かしらのメソッドを身につけています。コーディングしながら、メモをとる…の繰り返しで、まだまだ未知数の部分や理解できていない部分もあったり、こんなに大変なのかと日々痛感しております。ネットでウェブページ制作についていろいろ調べていて「パララックス」という手法があることを知り、早速取り入れてみました。「パララックス」とは「視差」を意味する用語で、画像に奥行きを出したりして効果を出すことをいいます。というわけで、試行錯誤しながら作ってみたのが「架空の温泉旅館」のサイトです。あいにく、ココナラブログは直リンできないので、動画にしたものを載せておきます。PC版では、背景画像を固定しつつも、要素はきちんとスクロールするように作りました。そして、テキストやボタンなどは下からふわっとフェードインするアニメーションを加えてみました。PC版（スクロールがカクカクしてます^^;）スマホ版…というわけで、これについてもHTMLやCSS、JQueryなどの文章を記載していきますが、階層違いでボタンが機能しなかったり、レイアウトが崩壊するなど、予想外の出来事が起きましたが、とことん原因を突き詰めれば解決するものだと勉強になったのでした。

面倒なCSS!？Web プログラミングには基本的に HTML/CSS/Javascript が必要です。この中でも意外に面倒なのが CSS です。この記事ではなぜ CSS が面倒なのか考えてみました。HTML と Javascript は意外にシンプルHTML と Javascript の方が、学習することは多いのはあきらかで。 しかし、HTML の場合は、記述が誤っていると目で見てわかりまし、間違いの箇所は比較的簡単に特定できます。Javascript の場合は、少し事情が変わってきます。 Javascript の問題は、大きく二つあります。＊　Javascript の記述上の誤り（文法のエラー）＊　プログラムの論理的な誤り（バグ）　Javascript の記述上の誤りは、その箇所を実行した場合はエラーメッセージがコンソールに表示されるので間違いの場所の特定は簡単です。 プログラムの論理的な誤り（バグ）の場合は、場所の特定は少し難しくなります。しかし、デバッガーなどを使って、データの中身を見たりして工夫することで、バグを見つけることができます。いずれにしても、プログラミング言語でプログラミングをする場合、バグを見つけて修正するのはプログラミング開発の一部です。CSS は何が違う？CSS が特別というわけではありませんが、CSS の場合、問題の箇所を見つけるのが意外に難しいという事情があります。 HTML と同様に目に見えるという点では、想定通りに動作しない場合は、思ったような表示になりません。そいう点では簡単に問題が見つかりそうです。しかし、実際は表示が思うようにされないけれ

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

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

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

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

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

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

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

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

シンプルな 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

まだまだIE11に対応したコーディングも必要だと思います。（かなり、状況は変わってきましたが）IE11は他のモダンブラウザと比べるとCSSの対応状況が悪いです。古いブラウザなのでしょうがないのですが...Flexboxなら、IE11でも使えるのかなっと思ったら、思い通りにならない事もありまして...IE11でflexのショートハンドにcalcは使えない→対応方法：全部書きましょう（煩わしいですが...)//3列に並べる、右にマージン20pxつける。.flex_item{flex:0 1 calc((100% - 40px) / 3);margin-right:20px;}.flex_item:nth-of-type(3n){margin-right:0}こんな感じでcalcを使いたい時があるのですが、IE11では、ショートハンド指定でcalcを使えないです。//こんな感じで書く.flex_item{  flex-grow:0;  flex-shrink: 1;  flex-basis:calc((100% - 40px) / 3);  }実はこれだけでは、IE11でまだ崩れる可能性があります。なぜなら、flex-basisにbox-sizingがデフォルトでは効かないからです。→対応方法：max-widthも併記する。max-widthも一緒に指定しましょう。.flex_item{  flex-grow:0;  flex-shrink: 1;  max-width:calc((100% - 40px) / 3);  flex-basis:calc((100% - 40px) /

ポートフォリオ機能を発見！さっそく制作物を登録。と言ってもまだ2つですが・・・。汗今回は「ハンバーガーメニュー」を実装。サイトの右上や左上に、二本線や三本線で表現されているアレです。よく見かけますよね。サイトを見て欲しい側としてはできるだけ多くの情報を提供したい。だけど、どこにどんな情報があるのかわかりにくいと、サイトを見に来た人はあっけなく離脱してしまいます。自分たちのことを知ってもらうチャンスを「サイトが見にくい、知りたい情報がどこにあるかわからない（見つけにくい）」という理由で逃すのは、すごくもったいない！＞＜そんな時に役立つのが「ハンバーガーメニュー」線をクリックやタップすれば、サイトのメニューを一目で確認できます。もちろん、そこから知りたい情報へ１タップで行けるので、見る側としてはノンストレス。ハンバーガーメニューがあるだけで【快適に利用できるサイト】という良いイメージが自然とつく。とても有効的な機能だと私は思っているのです。そんな理由もあって、あの二重線や三重線をいろいろなサイトやアプリで見かけるのでしょうね♪