# PERENOTE > webサイトデザイン/制作_ホームページデザイン/制作 --- ## 固定ページ - [完了ページ](https://perenote.net/contact/complete/): 完了ページ - PERENOTE - [確認](https://perenote.net/contact/comfirm/): 確認 - PERENOTE - [お問い合わせ](https://perenote.net/contact/): お問い合わせ - PERENOTE - [プライバシーポリシー](https://perenote.net/privacy-policy/): プライバシーポリシー - PERENOTE --- ## 投稿 - [CSS filterの使い方](https://perenote.net/web/note-607/): CSS filterの使い方 - % PERENOTE - [pc時とsp時で画像を切り替える方法](https://perenote.net/web/note-589/): pc時とsp時で画像を切り替える方法 - % PERENOTE - [position: sticky; の使い方](https://perenote.net/web/note-579/): position: sticky; の使い方 - % PERENOTE - [めちゃくちゃお世話になっているwebデザイン参考ギャラリーサイト](https://perenote.net/design/note-526/): めちゃくちゃお世話になっているwebデザイン参考ギャラリーサイト - % PERENOTE - [汎用的なアコーディオンの実装](https://perenote.net/web/note-495/): 汎用的なアコーディオンの実装 - % PERENOTE - [セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法](https://perenote.net/web/note-471/): セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法 - % PERENOTE - [デザイナーがよく利用する、おすすめのフリー画像素材サイト](https://perenote.net/design/note-386/): デザイナーがよく利用する、おすすめのフリー画像素材サイト - % PERENOTE - [<div>／<section>／<article> タグの使い方と違い](https://perenote.net/web/note-359/): <div>／<section>／<article> タグの使い方と違い - % PERENOTE - [アイコンや注釈マークを使用した複数行リストの二行目以降を整える](https://perenote.net/web/note-325/): アイコンや注釈マークを使用した複数行リストの二行目以降を整える - % PERENOTE - [cssで要素を中央に配置する方法](https://perenote.net/web/note-257/): cssで要素を中央に配置する方法 - % PERENOTE --- # # Detailed Content ## 固定ページ ### 完了ページ > 完了ページ - PERENOTE - Published: 2024-06-01 - Modified: 2024-06-01 - URL: https://perenote.net/contact/complete/ --- ### 確認 > 確認 - PERENOTE - Published: 2024-06-01 - Modified: 2024-06-01 - URL: https://perenote.net/contact/comfirm/ --- ### お問い合わせ > お問い合わせ - PERENOTE - Published: 2024-06-01 - Modified: 2024-06-01 - URL: https://perenote.net/contact/ --- ### プライバシーポリシー > プライバシーポリシー - PERENOTE - Published: 2024-04-26 - Modified: 2024-04-26 - URL: https://perenote.net/privacy-policy/ --- --- ## 投稿 ### CSS filterの使い方 > CSS filterの使い方 - % PERENOTE - Published: 2024-09-01 - Modified: 2025-01-10 - URL: https://perenote.net/web/note-607/ - カテゴリー: WEB - タグ: css filterプロパティは、要素に対して視覚的なエフェクト（フィルター）を適用するために使用されます。これにより、要素の見た目を変えたり、特定の効果を追加したりすることができます。 filterプロパティは、要素に対して視覚的なエフェクト（フィルター）を適用するために使用されます。これにより、要素の見た目を変えたり、特定の効果を追加したりすることができます。動きのあるエフェクトではなく、画像などの要素にちょっとしたアレンジを加えたい時などに重宝します。 基本的な使い方 セレクタに対してfilterプロパティを追加し、フィルターの種類（関数）と強さや割合を指定します。 . u-blur{ filter: blur(5px); //要素を5pxぼかす } filterの種類 f... --- ### pc時とsp時で画像を切り替える方法 > pc時とsp時で画像を切り替える方法 - % PERENOTE - Published: 2024-08-23 - Modified: 2024-09-01 - URL: https://perenote.net/web/note-589/ - カテゴリー: WEB - タグ: css, html 近年ではレスポンシブが標準化されており、サイトが重くならないように画像などもpcとspで同一の画像を使うのが標準になっていると思います。ただ、どうしても表やグラフなどはどうしてもつくりによってはpcとspで別々の画像で出し分けたい時があるのでそんな時に対応する手法を紹介します。 最初に 近年ではレスポンシブが標準化されており、サイトが重くならないように画像などもpcとspで同一の画像を使うのが標準になっていると思います。 ただ、どうしても表やグラフなどはどうしてもつくりによってはpcとspで別々の画像で出し分けたい時があるのでそんな時に対応する手法を紹介します。 CSSメディアクエリを使う方法 CSSのメディアクエリを使って、画面サイズに応じて表示する画像を切り替えることができます。こちらの手法は画像だけではなく他の要素にも使用する事ができます。 具体的にはpcに表示さ... --- ### position: sticky; の使い方 > position: sticky; の使い方 - % PERENOTE - Published: 2024-08-14 - Modified: 2024-08-14 - URL: https://perenote.net/web/note-579/ - カテゴリー: WEB - タグ: css 少し前はjsを使わないと実装できなかったUIも、今はcssのみで実装ができるものも多くなってきている印象です。そのなかでも「position: sticky;」はコンテンツの見せ方の表現の一つとしてよく利用します。 最初に 「position: sticky」 は、CSSで要素をスクロールに合わせて固定するために使用されるプロパティです。これは、閲覧しているブラウザでスクロールをした際に、特定の位置に達したときに画面上に「貼り付けられる」ような効果になります。具体的な使い方とポイントについて説明します。 「position: sticky;」 の具体的な使い方 基本的な記述 . block__sticky { position: sticky; top: 10px; /* 上端から10pxの位置で固定 */... --- ### めちゃくちゃお世話になっているwebデザイン参考ギャラリーサイト > めちゃくちゃお世話になっているwebデザイン参考ギャラリーサイト - % PERENOTE - Published: 2024-08-07 - Modified: 2024-08-07 - URL: https://perenote.net/design/note-526/ - カテゴリー: DESIGN webサイト制作でデザインフェーズは本当に楽しいですね。サイトの目的やターゲット、ワイヤーフレームができてさぁ次はデザインという時に、いきなりデザインツールを開いて作業をする事はまずないと思います。 最初に webサイト制作でデザインフェーズは本当に楽しいですね。サイトの目的やターゲット、ワイヤーフレームができてさぁ次はデザインという時に、いきなりデザインツールを開いて作業をする事はまずないと思います。 色々な情報を踏まえてアイデアを考える時には必ず参考サイトを見つけ、なるほど！と思えるデザインを見つけてより良いクリエイティブを目指すのですが、そんな時にお世話になっているwebデザインのギャラリーサイトを紹介します。 国内のwebデザイン参考ギャラリーサイト S5-Style さぁデザインだ... --- ### 汎用的なアコーディオンの実装 > 汎用的なアコーディオンの実装 - % PERENOTE - Published: 2024-07-30 - Modified: 2024-07-30 - URL: https://perenote.net/web/note-495/ - カテゴリー: WEB - タグ: css, html, js HTML、CSS、jQueryを使ってシンプルかつ機能的なアコーディオンを実装する方法を紹介します。 アコーディオンの完成系 アコーディオンは普段サイトを構築している上で、サイトに情報を整理して表示するための一般的なUIパターンですが、個人的ではありますがコンテンツを初期で非表示にしているUIはあまり使用しないようにしています。 ただ、Q＆Aページで項目が多くなった場合や、ピンポイントでそれほど重要度の高くない注釈など、場合によっては非常に有効な活用ができます。どのようなレイアウトでもある程度カスタマイズができるようなアコーディオンの実装を考えてみます。できるだけシンプルに且つ、開閉の状態が分か... --- ### セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法 > セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法 - % PERENOTE - Published: 2024-07-15 - Modified: 2024-08-07 - URL: https://perenote.net/web/note-471/ - カテゴリー: WEB - タグ: css, html, js セレクトボックスのよくある利用方法の一つとして条件分岐があり、さらに選択項目別にページ遷移を行いたい場合があります。また、段階的にしかセレクトボックスを選択できなくし、他のセレクトボックスを操作すると操作以外のセレクトボックスはリセットします。 セレクトボックスの条件分岐と項目別遷移の完成系 セレクトボックスAとBを準備し、Aの選択項目によってBの中身を変更します。また、セレクトボックスAが選択されないとBを選択できないように、Bの項目が選択されると項目に応じたページに遷移させるような仕様の想定です。 See the Pen セレクトボックスの条件分岐と、選択項目によって遷移先を変える方法 by perenote (@perenote) on CodePen. 今回作成するセレクトボックスの解説 セレクトボックスAとBを用意する まずは... --- ### デザイナーがよく利用する、おすすめのフリー画像素材サイト > デザイナーがよく利用する、おすすめのフリー画像素材サイト - % PERENOTE - Published: 2024-07-03 - Modified: 2024-07-03 - URL: https://perenote.net/design/note-386/ - カテゴリー: DESIGN - タグ: 画像／img, 素材 Webデザイナーやグラフィックデザイナーがデザインを行う際には素材を提供してもらったり、自分で集める事が多くあります。そんな時にフリーで活用ができるサイトは本当に助かります。 フリー画像素材サイトの重要性 クライアントからの要望でデザイン制作をしていると、簡単なあしらいからイメージビジュアルの素材を自分で集める事があります。自分で撮影ができたり時間があるときはいいのですが、なかなか毎回は難しい場合もありますし、目的に沿ったクオリティの高い画像を手軽に入手することは簡単ではありません。そんな時にはフリー画像素材を活用する事が非常に大切です。商用利用が可能な高品質なフリー画像素材を提供しているサイトは貴重なリソースです。今回は、そんなデザイナーたちにとって役立つおすすめの... --- ### <div>／<section>／<article> タグの使い方と違い > <div>／<section>／<article> タグの使い方と違い - % PERENOTE - Published: 2024-07-02 - Modified: 2024-07-02 - URL: https://perenote.net/web/note-359/ - カテゴリー: WEB - タグ: html コーディングを行う際に使用するタグの／／は似ていますが使い方には違いがあります。よく迷うこともありましたので、適切なマークアップを考えてみます。 Webサイトを作成する際にhtmlの記述を適切に行うことは、サイトの構造を明確にしユーザビリティやSEOを向上させるために重要です。ただ／／といった要素はブラウザで見たときの表示に大きな違いはなく、ページの内容を整理できますが要素の具体的な使い方や違いについてはときおり悩むことがあります。。これらの要素の使い方と違いを理解し、それぞれの要素が持つ意味や適用例について考えてみます。 （Division）について 目的 はhtmlでは汎用的なコンテナ要素として使われることが多いです。特定の意味や目的... --- ### アイコンや注釈マークを使用した複数行リストの二行目以降を整える > アイコンや注釈マークを使用した複数行リストの二行目以降を整える - % PERENOTE - Published: 2024-07-01 - Modified: 2024-07-01 - URL: https://perenote.net/web/note-325/ - カテゴリー: WEB - タグ: css ul,liを利用する機会は多いです。そのなかでアイコンや数字付きの箇条書きのリストを作成したり、注釈アイコンをつけたリストで複数行になった場合は二行目以降のバランスが悪くなる事がありますので整えます。 リストを作成する前提 アイコンなどが必要のないギャラリーやカードスタイルのul,olリストの利用では特に気にしなくてもいいのですが、アイコンがある箇条書きリストのような場合は複数行で二行目以降がずれているように感じたり視認性が良くない場合があります。 そんな場合にはhtmlとcssに一手間加えて汎用性と視認性が高い構成をめざします。 また、同じような表現が実現できる方法として:beforeを使用したり、もともとのcssプロパティlist-styleを使用する方法もありますが、今回は別の方法で考え... --- ### cssで要素を中央に配置する方法 > cssで要素を中央に配置する方法 - % PERENOTE - Published: 2024-06-17 - Modified: 2024-07-01 - URL: https://perenote.net/web/note-257/ - カテゴリー: WEB - タグ: css flexbox、grid、absolute を使用して要素を中央に配置する方法についての解説 コーディングを行う上で画像やコンテンツを中央に配置する事は多くあります。比較的新しい手法から、過去に良く使われていた手法のご紹介です。 Flexbox を使用する方法 Flexbox は、要素を柔軟に配置するための強力なツールです。要素を中央に配置するには、以下のようにします See the Pen cssで要素を中央に配置する方法 by perenote (@perenote) on CodePen. . container { display: flex; justify-content: ... --- ---