🔰はじめに

Hirameki 7では、コンテンツの幅・高さは初期状態で「auto（自動）」に設定されています。
「auto」の場合は、webサイトを見る方の画面サイズに合わせて自動的に幅が調整されるため、特別な設定をしなくてもバランスよく表示されます。

初期状態から大きさを変更（＝数値指定）する場合は、本ページをご一読いただき、用途に合わせて変更をお試しください。
 

❶ サイズを変更する方法

見出し～セクションのいずれかを選択している状態で、枠線の辺や角の点を動かすことで、サイズを自由に変更することができます。

例）他のコンテンツ種類でも同様
 

・インナー、コンテナ

コンテンツを選択中、画面右のエリアには、コンテンツの詳細設定の画面が表示されています。

この「サイズ」の項目に、選択中のコンテンツの横幅と高さがそれぞれ表示されます。

⇩

大きさを変更すると…

サイズの数値が変更した通りに反映されます。

逆に、ここに数値を直接入力しても変更が可能です。

✍サイズを固定値で指定する場合の注意点

① スマートフォン等の表示でレイアウトが崩れる可能性

幅を固定値（px）で指定すると、パソコンでは問題なく表示されていても、スマートフォンやその他のデバイスでは画面からはみ出すことがあります。

特に以下のケースでは注意が必要です

・800px以上の幅を指定している
・横並びのレイアウト内で各コンテンツに幅を指定している
・画像などにも幅を指定している

エディタで「スマートフォン表示」に切り替えると、実際のスマートフォン画面をイメージしやすくなります。

② 画面サイズに応じた自動調整がされなくなる

autoの場合は、閲覧者の画面幅に合わせて自然に伸縮しますが、固定値の指定をするとその調整が行われなくなります。

結果として、以下のような現象が起きることがあります。
 

・余白が不自然に大きくなる
・横スクロールが発生する
・デザインのバランスが崩れる

③ 他のコンテンツとのバランスに影響する

親となる枠（セクションやコンテナなど）の幅よりも大きい数値を指定した場合、レイアウト全体に影響が出ることがありますので、設定後は必ずプレビューでご確認ください。

❷ それでもサイズを変更したい場合は

コンテンツの幅・高さは、先述のpxのほか、％で指定することも可能です。

%（パーセント）指定とは、親要素（外側の枠）に対する割合で幅を指定する方法です。

autoと同じように、画面サイズに応じて伸縮します。

例）

・100% → 親要素いっぱいに表示

・50% → 親要素の半分の幅で表示

・80% → 親要素の8割の幅で表示

画像：サイズ種類の隣にある「∨」をクリックすると、変更が可能です

⭐まとめ（サイズ変更の考え方）

・基本的には「auto」のままご利用いただくことをおすすめします。
・数値で指定を行う場合は、必ずパソコン表示・スマートフォン表示の両方をご確認ください。
・可能であれば「％」の指定を活用すると、画面幅に応じた表示が保たれます。

「auto」は “自然な最適値”
「%」は “割合を指定したい場合”
「px」は “完全固定したい場合”

という使い分けがおすすめです。
 

💭よくあるトラブル例

😣 横スクロールが発生した

→　変更した幅が大きすぎます。幅を小さくするか、autoに変更してください。

😣 %にしたら想定より小さくなった

→　親要素（セクションなど）の幅が狭いためです。％指定は「画面全体」ではなく「親に対する割合」で計算されます。

😣 画像と文字とのバランスが崩れた

→　片方のみ固定幅が設定されていることが考えられます。（画像が固定値、テキストはautoになっているなど）

😣 PC・スマホでは問題ないのにタブレットで崩れた

→　閲覧者の画面サイズはPC・スマホだけとは限りません。タブレットのような中間サイズやその他特殊な環境では表示崩れが起きる可能性があります。

😣 横並びにならない・崩れてしまう

→　並べるコンテンツそれぞれに固定値の幅を指定した結果、合計の幅が親要素を超えてしまっていることが考えられます。

😣 100% にしたのに左右に余白が残る

→　親要素もしくはコンテンツにパディング（余白）が設定されていることが考えられます。