Web制作やコーディングを始めると、必ずつまずくのが「単位」ですよね。

pxやem、remやvw、vhまで

「どれを使ったらいいの？」
「レスポンシブ対応に向いている単位はどれ？」

この記事では、結論としておすすめの単位の組み合わせを最初にお伝えしたうえで、よく使われる5つの単位の特徴や、pxからremへの簡単な計算方法を分かりやすく解説します！

【結論】迷ったら「rem」使っとけ！

「結局、どの単位を使えばいいの？」という疑問に対する究極の結論はこれです。

文字の大きさや主な余白（パディング や マージン）は、基本すべて rem で指定しておけば、現代のWeb制作（スマホ対応やアクセシビリティ）においてほぼ間違いありません。

• 本文の文字サイズや主な余白
  • rem 一択！（迷ったらこれ！崩れにくく誰にでも優しい）
• 画面の高さいっぱいのセクションやダイナミックなデザイン
  • vh・vwで!（スマホ・PC問わず画面サイズに追従させたい時）
• 1pxのボーダー（枠線）や細かなアイコンの調整
  • pxで！（何があってもシャープな線をキープしたい場所）

用途に合わせて上手に単位を使い分けることで、どんな端末で見ても美しく、メンテナンスしやすいCSSが書けるようになります。ここからは、それぞれの単位の詳しい特徴や違いを見ていきましょう！

単位は「絶対単位」と「相対単位」の2つに分かれる

CSSの単位は、大きく分けると以下の2種類に分類されます。

• 絶対単位：どの環境で見てもサイズが変わらない（例：px）
• 相対単位：親要素や画面の大きさ、ブラウザの設定によってサイズが可変する（例：rem、vw など）

スマホやタブレット、PCなど、さまざまな画面サイズがある現代のWebサイトでは、状況に応じて相対単位をうまく使いこなすことが綺麗なレスポンシブデザインを作るカギになります。

よく使われる5つの単位の特徴

ここからは、実務でよく目にする代表的な5つの単位をひとつずつ見ていきましょう。

rem（レム）★一番おすすめ！

• 種類: 相対単位
• 特徴: Webページのルート要素（一番大元の <html> タグ）のフォントサイズを基準にする単位です。
• メリット: どこで使っても基準が「大元のサイズ」でブレません。ユーザーがブラウザの文字サイズを変更しても綺麗に連動するため、アクセシビリティが高くレスポンシブ対応しやすい現代の主流の単位です。

px（ピクセル）

• 種類: 絶対単位
• 特徴: 画面上のドット（画素）を基準にした固定サイズです。16pxと指定すれば、どんな環境でも常に16pxで表示されます。
• メリット: 設計や微調整が直感的で、意図した通りのピクセル数でカチッと固定できます。
• デメリット: ユーザーがブラウザの文字サイズ設定を変えても連動しないため、アクセシビリティ（見やすさ・使いやすさ）の面では少し弱点があります。

em（エム）

• 種類: 相対単位
• 特徴: 「親要素」のフォントサイズを基準にした単位です。
• メリット: 親要素の大きさに連動して拡大縮小します。
• デメリット: 要素が入れ子（ネスト）構造になると、基準が何重にも掛け合わされてサイズが雪だるま式に膨れ上がってしまうため、現在は少し扱いに注意が必要です。

vw（ビューポート・ウィズ）

• 種類: 相対単位
• 特徴: 「画面の横幅」を基準にした単位です（ 1vw＝ 画面幅の1%）。
• メリット: スマホでもPCでも、画面幅いっぱいや、画面幅に完全に連動したダイナミックなレイアウト・文字サイズを作ることができます。

vh（ビューポート・ハイト）

• 種類: 相対単位
• 特徴: 「画面の高さ」を基準にした単位です（1vh＝ 画面の高さの1%）。
• メリット: height:100vh と指定するだけで、スマホやPCの画面いっぱいに広がるファーストビューを簡単に作ることができます。

【実践】pxからremへの簡単な計算方法

一番おすすめなのは rem なのは分かったけど、計算が面倒臭そう……」と思っていませんか？ 基本の計算式はとてもシンプルです。

一般的なブラウザのデフォルト設定（基準が 16px）の場合：

• 12px ÷ 16 = 0.75rem

計算をラクにする裏技

CSSの最初に以下のように設定しておくと、基準が「10px」になり、計算が劇的にラクになります。

CSS

html {
  font-size: 62.5%; /* デフォルトの16pxの62.5% = 10pxにする */
}

この設定をしておくと、「10で割るだけ」で計算できるようになります。

• 15px → 1.5rem

現場でもよく使われているテクニックなので、ぜひ試してみてくださいね！

The post 【CSS初心者シリーズ】レスポンシブに効く！おすすめの単位 first appeared on IKINA-STYLE.

ホームページ制作においても、お客様ご自身で作成された画像や、AIを利用して作成された画像を掲載したいというご相談が増えております。

このたび、こうした画像をホームページ掲載用に加工・調整する場合の料金を設定いたしました。

ホームページ制作では、画像の背景透過やサイズ変更、色調整、部分的な削除・追加など、掲載前に画像そのものを加工・調整する作業が必要となる場合があります。これらの作業は、ホームページ制作とは別に作業時間を要するため、今後は内容に応じて下記の料金にて対応いたします。

軽微な加工　22,000円（税込）

• 背景透過
• 画像サイズ変更
• ファイル形式変更

複雑な加工　33,000円（税込）

• 色調整
• フォント変更
• 部分的な削除・追加
• その他、画像内容の変更を伴う加工

2回目以降の追加加工

同一の加工について、2回目以降の修正・変更を行う場合は、修正1回につき以下の追加料金を申し受けます。

• 軽微な加工：5,500円（税込）／回
• 複雑な加工：11,000円（税込）／回

※当店は、デザイン会社等で制作されたロゴ・ロゴマークについては、完成データをご支給いただくことを基本としております。

The post 画像加工・調整サービスの料金設定について first appeared on IKINA-STYLE.

パソコンでホームページを開いた際に、画面上部に表示されるメニューをカスタムすることができます。ご希望されるお客様はお申し付けくださいませ。

The post メニューのカスタム first appeared on IKINA-STYLE.

画像スタイルは、以下のタイプからお選びいただくことができます。

デフォルト

角丸

角丸2

正円

フォトフレーム

傾き右

傾き左

シャドウ

流体シェイプ1

流体シェイプ2

流体シェイプ3

流体シェイプ4

The post 選べる画像スタイル first appeared on IKINA-STYLE.

IP制限を設定することで、ご登録いただいたIPアドレス以外からのアクセスを遮断し、不正アクセスを防止することが可能になります。

IPアドレスの確認方法

お使いの端末から

ご自身のIPアドレスは、お使いの端末から以下のページにアクセスすると簡単に確認できます。

確認後は、IPアドレスをご連絡ください。アクセス制限を行います。

The post セキュリティ強化に関するご案内 first appeared on IKINA-STYLE.

私自身、また家族も無事に過ごしております。ご心配くださった皆さま、本当にありがとうございました。

本日 8月4日より営業を再開 いたしました。だ暑さの厳しい日が続きますので、どうかご無理なさらず、お体を大切にお過ごしください。

ご用件やお困りごとがございましたら、どうぞご遠慮なくお申し付けください。皆さまのお役に立てるよう、いつも通り丁寧に対応させていただきます。

The post 震災のお見舞いと営業再開のご案内 first appeared on IKINA-STYLE.

・明朝体

・ヒイラギノ角ゴ

・遊ゴシック

・メイリオ

・San Francisco

・Noto Sans JP (Google Fonts)

・Noto Serif JP (Google Fonts)

・M PULS 1P (Google Fonts)

・M PULS Rounded 1c (Google Fonts)

・Sawarabi Mincho (Google Fonts)

・Sawarabi Gothic (Google Fonts)

・Kosugi Maru (Google Fonts)

・Kosugi (Google Fonts)

The post 選べるフォント first appeared on IKINA-STYLE.

・デフォルトのボタン

・上段にメインとなるテキスト、下段にサブテキストを入れることができます。

・サイズを変更できます。幅は文字数に比例します。

・ボタン幅をカラム全幅にできます。

・角を丸くできます

・ボタンの背景色・フォント色を変えることができます。※グラデーションはありません。

・ボタンを光らせることができます。

・ボタンに動きを付けることができます。

・背景なしにすることができます

・前後にアイコンを入れることができます。

The post 選べるボタンのスタイル first appeared on IKINA-STYLE.

・見出しデフォルト（線はキーカラーと同色）

サンプル

・背景塗り （背景色・角の丸み・高さ指定可）

サンプル

・装飾無し

サンプル

・二重線上下（線は黒色のみ）

サンプル

・二重線 下線　(線は黒色のみ)

サンプル

・直線 上下　(線は黒色のみ)

サンプル

・点線 下線　(線は黒色のみ)

サンプル

・左右線（文字色と線が同色になります）

サンプル

・括弧（文字色と括弧が同色になります）

サンプル

The post 選べる"見出し"スタイル first appeared on IKINA-STYLE.