すべてのブログから「#CSS」タグの検索結果

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

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

本日は、現在制作中のホームページで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サイトのメインビジュアルなどでよく見る、写真の上に文字を重ねるデザイン。おしゃれに見える一方で、「文字が写真に埋もれて読みにくい…」「白文字にしたけど、明るい部分だけ見えない…」ということもよくあります。今回は、そんなときに使える5つの対処法をまとめます。① 写真にオーバーレイをかける一番使いやすいのが、写真の上に半透明の色を重ねる方法です。例えば写真を少し暗くして、その上に白文字を置くと、文字がぐっと読みやすくなります。.hero::before {  content: "";  position: absolute;  inset: 0;  background: rgba(0, 0, 0, 0.3);}ポイントは、暗くしすぎないこと。写真の雰囲気を残しながら調整します。② グラデーションを使う写真全体を暗くしたくない場合は、文字がある部分だけにグラデーションをかける方法もあります。例えば左側に文字があるなら、左側は暗め → 右側に向かって透明にすると自然です。写真を活かしながら、文字もしっかり見せられます。③ 文字色を写真に合わせる「写真の上＝白文字」と決める必要はありません。明るい写真なら黒や濃いグレー、暗い写真なら白など、背景との明るさの差を意識すると読みやすくなります。色そのものだけでなく、明度差を見ることがポイントです。④ 文字の後ろに背景をつけるどうしても写真と文字が重なってしまう場合は、文字の後ろに半透明の背景をつける方法もあります。例えば、CONCEPT私たちについてのようなタイトル部分だけ背景をつけてもOK。デザインのアクセントにもなります。⑤ 最初

本日は、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サイトについて不明なことがありましたら、電話相談のサービスもありますので、どうぞお気軽にお声掛けください☆今後ともよろしくお願いいたします。 早苗

タイトルの通りなんですが、現在は、Wordpressの「SWELL」というテーマを使用することが多く、色々とCSSでサイトをカスタマイズする際に・・・「管理画面で設定した色はどういう風にして取得しようか」と考えるようになりました。Google先生に聞いてみようと検索もしてみたんですが、どうもSWELLのCSSの色変数を紹介している記事に巡り合えず・・・で、SWELLをちょっと自身で解析してみたんですが・・・でるわでるわ、けっこういろんなCSSの色変数がありましたので、ご紹介いたします。color: var(--color_main);color: var(--color_main_thin);color: var(--color_main_dark);color: var(--color_text);color: var(--color_link);color: var(--color_htag);color: var(--color_bg);color: var(--color_gradient1);color: var(--color_gradient2);color: var(--color_list_check);color: var(--color_list_num);color: var(--color_list_good);color: var(--color_list_triangle);color: var(--color_list_bad);color: var(--color_faq_q);color: var(--color_faq_a);color:

Web制作をしていると、要素を一時的に非表示にしたい場面があります。そんなときによく登場するのが、display: none;visibility: hidden;opacity: 0;この3つ。どれを使っても画面上では要素が「見えなくなる」ので、「結局、何が違うの？」と思ったことはありませんか？実はこの3つ、見た目は似ていても要素の扱われ方はかなり違います。今回は、それぞれの特徴と使い分けについて整理してみます。① display: none;まずはWeb制作でもよく使う、.box {  display: none;}です。display: none;を指定すると、要素は表示されなくなり、レイアウト上のスペースもなくなります。例えば、<div class="box1">BOX 1</div><div class="box2">BOX 2</div><div class="box3">BOX 3</div>このBOX 2に、.box2 {  display: none;}を指定すると、BOX 1BOX 2BOX 3と並んでいたものが、BOX 1BOX 3となります。BOX 2が使っていたスペースもなくなり、BOX 3がその場所へ詰めて表示されます。つまり、「要素ごとレイアウトから消したい」という場合に向いています。② visibility: hidden;続いて、.box {  visibility: hidden;}です。こちらも画面上では要素が見えなくなります。ただしdisplay: none;との大き

# 【Web制作学習】自分用の「献立・レシピ管理アプリ」を作ることにしました今日は、以前から「あったら便利だな」と思っていた、**自分専用のレシピ・献立管理アプリ**について、必要な機能や画面構成を考えました。普段レシピを探すときは、CookpadやYouTube、料理サイトなど、いろいろなサービスを利用します。ただ、「この料理また作りたい！」「前に作ったレシピ、どこで見たんだっけ？」「今週の献立をまとめて決めたい」ということがよくあります。そこで、気に入ったレシピだけを自分用にまとめて、さらに**1週間の献立まで作成できるWebアプリ**を作ってみることにしました。---## 今回作りたいアプリ今回考えているのは、レシピそのものを掲載するサイトではなく、**お気に入りレシピを管理する＋1週間の献立を作成する**ための自分専用アプリです。CookpadやYouTubeなどの元レシピはURLを登録して、必要なときに元サイトへ移動できるようにします。まずは機能を増やしすぎず、Ver.1では、* レシピ一覧* レシピ追加* レシピ詳細* 今週の献立作成この4つを中心に作ることにしました。買い物リストなどもあると便利ですが、まずは基本機能が完成してから追加する予定です。---## レシピに登録する内容レシピを登録するときは、次の情報を保存できるようにします。### ・料理名「鶏の照り焼き」「麻婆豆腐」など、料理の名前を入力。### ・カテゴリー主菜、副菜、汁物、ご飯・麺などをプルダウンから選べるようにします。### ・元サイト名CookpadやYouTubeなど、どこで見つけたレシピな

ちょっと「コンテンツマーケット」なるものを使ってみたんですが、こちらの方がもっとブログらしいというかなんというか(笑)ブログの方では、「コード」ブロックが存在してないんですが、こちらにはあります。「ブログ」よりも「コンテンツマーケット」の方が扱いやすいですね(^^;)かなり「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

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

初めまして「ゆずサポート」です。今回の記事ではプログラミング初心者の私が実際に使用した学習サイトをご紹介致します。私が学習している言語は以下のものです。・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がありま

CSSを書いたのに、「あれ？全然変わらない…」Web制作をしていると、こんなことがよくあります。コードは合っているように見えるのに反映されないと、どこを直せばいいのか分からなくなりますよね。今回は、CSSが効かないときに私が確認しているポイントを5つまとめてみます。① スペルミスがないか確認するまず確認したいのが、意外と多い単純な入力ミス。.title {  backgroud-color: green;}これではbackgroundの「n」が抜けているので反映されません。プロパティ名だけでなく、;を忘れていないか{ }が閉じているかクラス名が間違っていないかなども確認します。「絶対合ってる！」と思っているときほど、単純なミスだったりします② HTMLとCSSのクラス名は同じ？HTMLでは、<div class="staff-card">なのにCSSでは、.staff_card {  padding: 20px;}となっていれば、もちろんCSSは効きません。-と_の違い、大文字・小文字なども要チェックです。CSSだけを見るのではなく、HTML側のクラス名と見比べてみます。③ 他のCSSに負けていない？CSSには優先順位があります。例えば、.card {  color: green;}#staff .card {  color: black;}この場合、より詳細に指定されている#staff .cardの方が優先されます。「CSSは書いてあるのに色が変わらない！」というときは、別のCSSで上書きされていないか確認してみます。Chromeの検証ツールを見ると、どのCSSが

本日も、自分用に作成している**献立・レシピ管理ツール**の制作を進めました。今回は主に、レシピ一覧画面のカテゴリー機能を整えています。## カテゴリーごとに色分け一覧画面には、* すべて* 主菜* 副菜* 汁物* ご飯・麺のカテゴリーを用意しました。選択中のカテゴリーだけ色が付くようにし、どのカテゴリーを表示しているのか分かりやすくしています。また、レシピカード内のカテゴリータグも同じように色分けしました。例えば、主菜はオレンジ系、汁物はブルー系、ご飯・麺はベージュ系というように、カテゴリーごとに色を変えています。## JavaScriptで絞り込み機能を追加見た目だけではなく、JavaScriptを使って実際にカテゴリーごとにレシピを絞り込めるようにしました。ボタンを押すと、* 選択したボタンに`active`クラスを付ける* その他のボタンから`active`を削除* 選択したカテゴリーと一致するレシピだけ表示* 「すべて」を選択すると全件表示という動きになります。HTMLの`data-filter`と`data-category`を使って、ボタンとレシピカードを対応させています。今回の制作を通して、JavaScriptでクラスを追加・削除する方法や、HTMLに持たせたデータを取得して処理する方法も少しずつ理解できてきました。## レシピ追加ボタンも設置一覧画面には、右下に「＋」ボタンも追加しました。スクロールしても表示されるように`position: fixed;`を使い、ここから新しいレシピを追加できるようにする予定です。次回は、この「＋」ボタンから移動する**レシピ

今日は、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）を選択

前回のブログ投稿で、レスポンシブサイトでメディアクエリに触れましたので、今回ここを掘り下げてみようと思います。もうほとんどのクリエイターの方はメディアクエリ＠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以下、または

すみません、ザックリと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

今回もイラスト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の中にスタイルを書き込んでしまうと、パソ

Webサイトを作っていて、「ちゃんと配置できているのに、なんとなくダサい…」「参考サイトと比べると、なぜか素人っぽく見える…」と感じたことはありませんか？でも、この「なんとなく」には、ちゃんと理由があります。Webデザインは、派手な装飾や高度なテクニックを使えばオシャレになるわけではありません。むしろ、文字・余白・色・位置などの小さなルールを揃えることが、サイト全体の完成度を大きく左右します。今回は、Webサイトが「なんかダサい」と感じてしまう代表的な5つの原因と、その改善方法をまとめてみます。① フォントサイズがバラバラ最初にチェックしたいのが「文字」です。例えば、見出し：32px別の見出し：27px小見出し：21px別の小見出し：24px本文：16px一部だけ：15pxこのように、その場その場で文字サイズを決めてしまうと、サイト全体に統一感がなくなってしまいます。大切なのは「文字のルール」を決めること例えば、h1 {  font-size: 40px;}h2 {  font-size: 32px;}h3 {  font-size: 24px;}p {  font-size: 16px;}というように、最初にある程度ルールを決めておくとデザインが安定します。さらに大切なのが、**文字の「強弱」**です。すべてを大きくしたり太字にしたりすると、どこが重要なのか分からなくなります。「一番伝えたいものを大きく、それ以外は控えめにする」というメリハリを意識するだけでも、かなり見やすくなります。② 余白が不規則実はWebサイトの印象を大きく左右しているのが「余白」です。例えば、見出しか

ちょっとした実際のエピソードをお話し致します。先日自分が勤めている会社に、提携業者様から「スプーンなしでアイスクリームの差し入れ」がありました。そのアイスクリームは会社の冷凍庫に保管されておりました。で、スプーンがないので、誰もが食べることができない…もしくは自前のスプーンを持っている人しか食べられない、という状況でした。と、そこで・・・１００円ショップで「ミニスプーン」を買ってきて、アイスクリームのところにおいて、社内で告知いたしました。「ミニスプーン、アイスのところに置いておきましたよ～」と。※これが「ユーザビリティー」です☆すると、あっという間にアイスクリームが消費されたではありませんか(笑)そう、ユーザビリティーが上がると・・・消費されやすくなる。Webでも同じことで、ユーザビリティーが上がるとコンバージョン（CV）されやすくなる、ということなんです°˖✧◝(⁰▿⁰)◜✧˖°例えば商品を紹介するページで、常に固定の「かごに入れる」ボタンが存在するとか。(CSSで position:fixed; を使えばできますよね。)そういった配慮があると、CV率が上がったりします。ユーザビリティーって、ちょっとした「気づき」なんですよね。ユーザーが欲している（潜在的な事象も含めて）ことをさりげなく実現する。こういうのって、気配り上手な方がうまいのかもしれませんね(^^♪

# Webサイトにカルーセルを実装しました！想像以上に難しかった制作記録本日は、制作中のWebサイトに「カルーセル」を実装しました。カルーセルとは、複数の画像やカードを横方向へスライドさせて表示する仕組みのことです。店舗や施設などの写真をすべて一度に並べると、ページが長くなったり、情報量が多く見えたりします。カルーセルを使えば、限られたスペースの中で複数の写真を見せられるため、店舗紹介や制作実績などにも活用できます。今回は店舗内の写真を見やすく紹介するために取り入れましたが、完成するまでの調整が想像以上に難しかったです。## Swiperを使ってカルーセルを実装今回のカルーセルには「Swiper」というライブラリを使用しました。Swiperは、Webサイトにスライド機能を追加できるライブラリです。HTMLでスライドの構造を作り、CSSで見た目を整え、JavaScriptで動き方を設定します。大まかな仕組みは、次のようになっています。* カルーセル全体を囲む要素* スライドをまとめる要素* 1枚ずつのスライド* 現在位置を表すページネーション* カルーセルの動きを設定するJavaScriptただ写真を横に並べるだけではなく、Swiperで決められたクラスを正しく指定する必要があります。HTML・CSS・JavaScriptのどれか一つでも設定が合っていないと、横並びにならなかったり、スライドしなかったりするため、確認する部分が多くありました。## 写真の大きさをそろえるカルーセルに使用する写真は、それぞれ縦横の比率が異なります。そのまま表示すると、カードごとに高さが変わり、全体の

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

本日は、現在制作を進めている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デザイン #今日の積み上げ

本日は、Webサイト制作で使用した装飾パーツについてまとめます。今回は、CSSで平行四辺形のパーツを作成しました。まず、要素自体に `transform: skewX()` を指定することで、通常の四角形を斜めに変形させ、平行四辺形の形を作りました。ただし、そのままだと中の文字まで斜めになってしまうため、内側のテキストには逆方向の `skewX()` をかけて、文字が読みやすいように調整しています。さらに、右上と左下には `::before` や `::after` の擬似要素を使って、小さな三角形の装飾を追加することで作りたい六角形を完成させることができました。擬似要素を使うことで、HTML側に余計なタグを増やさずに、CSSだけでデザイン性のあるパーツを作ることができます。今回のような小さな装飾でも、サイト全体の雰囲気に合わせて形や色を調整することで、デザインの統一感を出しやすくなります。CSSだけで図形を作れるようになると、画像に頼らずに細かい装飾を表現できるので、今後の制作でも活用していきたいと思います。

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

こんにちは、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は、付けたら便利ですが、絶対付けなくてもいいという感じです。ご覧いただきありがとうございます。これが私が出品しているサービスです。ご覧ください！！さっき言ったホームページ制作もやっています。

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

楽天市場などで、画面の端っこにクーポンとかイベントバナーなどがくっついているショップを見たことがあるでしょうか？これも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

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

こんにちは！山本佑樹です！最近、娘が私と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を用いたホームページやランディングページの制作に特化し、出品サービスにも掲載させていただいております。下記が私が出品しているサービスになります。こちらは主に新規の静的サイトコーディングのサービスに

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

WebサイトをPCで作って、「よし、いい感じ！」と思ってスマホで確認してみたら……「あれ？なんか見づらい…」なんてことがあります。レスポンシブデザインでは、単純にPC版を小さくするのではなく、画面の大きさに合わせて見やすいレイアウトに変えることが大切です。今回は、スマホ表示で特に見直したいポイントをまとめます。① 3列・4列をそのまま表示しないPCでは横に3枚並んだカードも、スマホではかなり窮屈になります。例えば、PC → 3列タブレット → 2列スマホ → 1列というように、画面幅に合わせて変更すると見やすくなります。FlexboxやGridなどを使って、画面幅に合わせてレイアウトを変える方法は、コンテンツを見やすく保つためにも有効です。② 文字サイズもスマホで確認PCではちょうどよかった大きな見出しも、スマホでは何行にも折り返されることがあります。逆に小さくしすぎると読みにくくなってしまいます。**「画面に収まるか」だけではなく、「実際に読みやすいか」**をスマホで確認することが大切です。③ 余白をそのまま使わないPCで左右に80pxの余白を設定していても、スマホで同じ余白を使うと、コンテンツ部分がとても狭くなってしまいます。スマホでは、padding: 0 20px;など、画面に合わせて余白を調整します。④ 画像は画面からはみ出していない？画像に固定幅を指定していると、スマホで横にはみ出すことがあります。そんなときによく使うのが、img {  max-width: 100%;  height: auto;}画像だけでなく、文字やコンテンツが横にはみ出して横スクロールが発生

Webサイトを作っていると、ボタンやカード、画像などでよく使うのがborder-radiusです。角を少し丸くするだけでも、デザイン全体の印象はかなり変わります。今回は、角丸の大きさによってどんな印象になるのかをまとめます。border-radiusとは？border-radiusは、要素の角を丸くするCSSです。例えば、.card {  border-radius: 12px;}とすると、カードの四隅が少し丸くなります。数値を大きくするほど、丸みも強くなります。角丸が小さい場合例えば、border-radius: 4px;のように小さめにすると、きちんとした印象シャープな印象落ち着いた印象ビジネス向けになりやすいです。企業サイトや、少しかっちりしたデザインにも合わせやすいです。8px〜16pxくらいは使いやすいWeb制作では、border-radius: 8px;border-radius: 12px;border-radius: 16px;くらいは、とても使いやすいサイズです。このくらいなら、柔らかさは出るけれど、丸すぎないというバランスになります。カードや画像、入力フォームなどにも使いやすいです。角丸を大きくすると柔らかい印象に例えば、border-radius: 24px;border-radius: 30px;など、大きめにすると、親しみやすいかわいい柔らかいカジュアルな印象になります。美容系、カフェ、子ども向け、女性向けなどのデザインとも相性が良いです。50%にすると円になる正方形の要素に、border-radius: 50%;を指定すると、丸い形になります。プロフ

今回のも短めです。だって1命令で終わりなので(^^;)以前、スムーズななめらかスクロールを実現するためには、JavaScriptを書かなければなりませんでした。（ここではそのコードは割愛します。）それはそれは、けっこうめんどくさいものでした(^^;)ところが、そんなめんどくさいスムーズスクロールをCSSが1命令でやってのけちゃったのです。もったいぶらず、書きますね。【CSS】html {   scroll-behavior: smooth;}はい、これだけでスムーズなスクロールが実現します。ページ内のアンカーリンクなんかは、これ一つ入れておくだけで滑らかにページ移動しちゃいます☆これ、主要なブラウザで出そろったのは、なんと2022年でした(^^;)自分の記憶によると、一番最初に対応したのが FireFoxでした。それから2020年ごろには大体のブラウザで対応されていったんですが、Safariが一番最後に2022頃に導入して、現在は主要なブラウザでほぼ対応済みになっております。昔はJavaScriptで書いていたものですから、これのありがたみは本当に素晴らしいものでした。いちいち現在のスクロール位置を調べたりしなくて良いんですから(笑)まあ、このCSSにも弱点はありまして…それはスクロールスピードをコントロールできない、というところですね。「めっちゃ早くスクロールさせたい！」or「めっちゃのんびりスクロールさせたい～」という要望は、残念ながらかないません(^^;)でもまあ個人的には、ほどよいスピードだと思っております。CSSってどんどん便利になっていきますね。個人的にはスクロール

今日は、昨日考えた自分用の献立・レシピ管理アプリについて、実際に制作をスタートしました。まずはMAMPを使ってローカル環境を立ち上げ、htdocsの中に今回のアプリ用フォルダを作成。そこから、最初の画面となる**「My Recipe」のレシピ一覧画面**をHTML・CSSで作り始めました。まずはレシピ一覧画面から制作最初に作ったのは、登録したレシピを一覧で確認する画面です。今回の一覧では、カテゴリー料理名材料の一部料理写真をカード形式で表示するデザインにしました。材料はすべて表示すると長くなってしまうため、一覧画面ではニュース記事の抜粋のように、途中まで表示する予定です。詳細な材料については、今後作成するレシピ詳細画面で確認できるようにします。横長のカードデザインにスマートフォンでも料理を探しやすくするため、カードは左側に料理情報、右側に写真という横長レイアウトにしました。CSSではdisplay:flex;を使って、文字部分と画像部分を横並びにしています。画像には、object-fit: cover;を指定。これによって、元の写真の縦横比を崩さずに、決めたサイズの中へきれいに表示することができます。また、カードには角丸と薄い影を付けて、少しアプリらしい見た目になるように調整しました。カテゴリーをタグ風に表示料理のカテゴリーである「主菜」は、普通の文字ではなくタグのようなデザインにしています。.recipe-category{  display:inline-block;  font-size:14px;  padding:5px 10px;  color:#fff;  bac

こんにちは、Dr.WordPressです。WordPressでサイトの色を変更しようと思ってCSSを書いたのに、「色が変わらない」ということはありませんか？例えば、「文字色を変えたのに反映されない」「背景色を変更したのに元のまま」「追加CSSに書いたのに変わらない」「PCでは変わるのにスマホでは変わらない」といったケースです。CSSが反映されない原因は、コードの書き間違いだけとは限りません。今回は、CSSで色を変更したのに反映されないときに確認したい5つの原因をご紹介します。① セレクタが間違っているまず確認したいのが、CSSを当てている場所が正しいかです。CSSでは、class名やIDなどを使って変更したい場所を指定します。しかし、実際のHTMLとCSSで指定している名前が違っていると、スタイルは反映されません。よくあるのが、・class名のスペルミス・ドットやシャープの付け間違い・違う要素を指定している・親要素と子要素の指定が違うといったケースです。「CSSを書いたのにまったく変わらない」という場合は、まず正しい場所を指定できているか確認してみましょう。② 別のCSSに上書きされているCSSは、同じ場所に複数のデザイン指定がある場合、優先順位によってどのCSSが反映されるか決まります。自分で文字色を赤に変更していても、テーマ側などでより優先順位の高いCSSが設定されていると、そちらの色が表示される場合があります。WordPressでは、・テーマのCSS・プラグインのCSS・追加CSS・ページビルダーのCSSなど、複数のCSSが読み込まれていることがあります。ブラウザの開発者

今回はちょっとしたCSSでのユーザビリティー向上のテクニックです。アンカータグ<a> に、target="_blank" をつけると自動的に別窓アイコンを設置するというものです。疑似要素「::after」と疑似クラス「a[●●] 」を併用したテクニックになります。とりあえず、HTMLとCSSを載せますね。【HTML】<h2>①target="_blank" なしのアンカータグ</h2><p><a href="～～URL～～">別窓アイコンなしリンク</a></p><h2>②target="_blank" ありのアンカータグ</h2><p><a href="～～URL～～" target="_blank">別窓アイコンありリンク</a></p><h2>③target="_blank" ありの .icon-right 指定アンカータグ</h2><p><a href="～～URL～～" class="icon-right" target="_blank">別窓アイコンあり.icon-right 指定リンク</a></p>【CSS】/* ■■■■ 【CSS】別窓マークを自動的に設置 ■■■■ */a[target="_blank"]:after{    content: "\002197";    display: inline-block;    font-w

今日は、WordPressでお問い合わせフォームを作成する際によく使われる Contact Form 7 の設定確認と、フォームのデザイン調整を行いました。Contact Form 7のメール送信テストフォームを作成したら、まず大切なのが正常にメールが送信されるかの確認です。実際にフォームから送信を行い、お問い合わせ送信後に「ありがとうございました。メッセージは送信されました。」と表示されるか管理者宛にメールが届くか入力内容が正しく送信されているかを一つずつ確認しました。今回は最初メールが届かず焦りましたが、原因は迷惑メールフォルダに振り分けられていただけでした。フォームが正常に動作していても、送信先のメールサービスによっては迷惑メール扱いになることがあるため、受信できない場合は迷惑メールフォルダも確認することが大切だと学びました。Contact Form 7のCSS調整次に、お問い合わせフォームをスマートフォンでも使いやすくするため、CSSの調整を行いました。今回調整したポイントはこちらです。入力欄の高さを統一横幅を100%に設定し画面いっぱいに表示スマホでも文字が小さくならないようフォントサイズを調整日付入力欄（date）の高さを他の入力欄と揃えるボックスサイズを統一してレイアウト崩れを防止例えば日付入力欄には次のようなCSSを設定しました。.wpcf7 input[type="date"] {  width: 100%;  height: 56px;  min-height: 56px;  padding: 10px 16px;  font-size: 16px;  li

むかしむかし、とはいっても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などの違いについて理解を深めました。レスポンシブデザインでは、幅だけでなく高さの指定も重要であることを学ぶ良い機会になりました。ファーストビューをスマホ向けに最

text-align:center が効かない？原因は display:inline-block でした今回はホームページ制作のコーディング中に見出しを中央揃えにしたいのにうまくいかないという場面がありました。見出しのCSSは元々このようになっていました。.title {  font-size:28px;  margin-bottom:20px;  position: relative;  display:inline-block;}この display:inline-block は、見出しの下線を 擬似要素（::after）で作るために設定していました。例えばこのようなコードです。.title::after{  content:"";  position:absolute;  bottom:-5px;  left:0;  width:100%;  height:2px;  background:#333;}ここで width:100% を指定すると、見出しの幅いっぱいに下線が表示されます。text-align:center を指定してみた見出しを中央にしたくて、次のCSSを書きました。.title-center{  text-align:center;}しかし、見た目が変わりませんでした。原因：inline-block は要素の幅が文字サイズになるdisplay:inline-block の場合、要素の幅 = 文字の幅になります。イメージするとこうです。[事業概要]この状態では要素の幅が文字と同じなので、text-align:center を指定しても 中央に動く余白がありま

最初は普通に▶ ←この記号をそのまま使えばいいかなと思ったのですが、フォントによって形が微妙に違ったり、サイズ調整が難しかったりしてなんだかしっくりこなくて…。そこで今回はCSSで三角を作る方法に挑戦しました！borderを使うと、こんな感じで三角が作れます👇.title::before{  content:"";  display:inline-block;  width:0;  height:0;  border-left:12px solid #8FAF8E;  border-top:7px solid transparent;  border-bottom:7px solid transparent;  margin-right:10px;}線だけで作るので✔ サイズ調整が自由✔ 色も自由✔ デザインと統一できるというメリットがあって、見出しのデザインが一気に整いました✨ちょっとした装飾ですが、こういう細かい部分をCSSで作れるようになると楽しいですね！今日も一歩前進です☺️

ポートフォリオサイトを更新していたときの出来事です。もともとポートフォリオサイトのスマホメニュー（ハンバーガーメニュー）は問題なく動いていました。今回、ポートフォリオから Elementorで作成したサイトのURLに飛べるように公開したのですが、そのあとからスマホでメニューを操作すると不具合が発生するようになりました。ハンバーガーメニューを押すとフルスクリーンメニューは表示されるのですが、閉じることができなくなってしまったのです。最初はJavaScriptの問題かと思い、検証ツールで確認してみました。するとクリック時にhamburger activeというクラスはちゃんと付いていました。つまり JavaScriptは正常に動いている状態 でした。では何が原因なのか調べていくと、原因は CSSの z-index（要素の重なり順） にありました。フルスクリーンメニューのレイヤーがハンバーガーボタンより上に表示されてしまい、ボタンが見えていてもクリックがメニューに遮られてしまっていたのです。そこでレイヤーの順番を整理してhamburger（ボタン）header（ヘッダー）fullscreen-menu（メニュー）という順番になるように z-index を調整しました。その結果、スマホメニューも無事に開閉できるようになりました。Web制作では、機能を追加したときに思わぬところで影響が出ることもあるので、改めて レイヤー構造（z-index）の大切さ を実感しました。また今回特に厄介だと感じたのが、PCの検証ツール（スマホ表示）では正常に動作していたのですが、実際のスマートフォンで確認し

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

今回はテキストの縁取りです。デザインカンプにこんな縁取りのデザインがありました。結論から言えば、これを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

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