レスポンシブ Web デザイン82～86

スマートフォン、タブレット、パソコンでの閲覧に対応した、レスポンシブ Web デザインの無料テンプレート 82～86 です。

自動車や工業製品のウェブサイトをイメージしてデザインしました。

無料テンプレート82

無料テンプレート83

無料テンプレート84

無料テンプレート85

無料テンプレート86

テンプレート内の写真は、当サイトのフリー写真素材です。そのままご利用頂いても構いませんし、他の写真に変更することもできます。

無料テンプレート 82～86 の編集について

ヘッダーメニュー、スライドショー、ギャラリーとモーダルウィンドウの仕組みは、過去のテンプレートと共通なので、過去のテンプレートの解説を参考にしてください。（行数や数値は異なるケースがございます）

ヘッダーメニューの開始位置

title.png は、幅 140px 高さ 80px ですが、幅を変更しても構いません。

幅を広げたい場合は、BASE フォルダの title.png を編集してください。

title.png をコピーして繋げれば、デザインを崩すことなく幅を広げられます。

title.png の幅を広げた場合は、必要に応じてヘッダーメニューの開始位置も調整してください。

ヘッダーメニューの開始位置は、style.css で調整できます。

style.css の 519行目～521行目
#nav_pc ul li:first-child {
margin-left: 180px;
}

赤字の値を変更すると、ヘッダーメニューの開始位置が変更されます。

当サイトの無料テンプレートがお役に立ちましたら幸いです。