トップページコーディング解説

2023年06月15日

自社ホームページ制作道のり

トップぺージコーディングしてみた

みなさんこんにちは。

やっとトップページのコーディングが完成いたしました。

今回はトップページのコーディング解説をしていきたいと思います。すごく癖のある作り方をしていて非効率じゃね？と思うところは多々ありますが、完成すればOKということで、いつも作っています。

それでは解説。

前回デザインカンプから少しデザインの修正もありましたが、自社サイトなのでコーディングしながら修正するという流れで作業しました。

メディアクエリ・基本設定

①全体に適用するCSSを記述
②パソコンのみに適用する960px以上
③タブレットサイズ以下から適用する959以下
④スマホサイズで適用767以下

この設定で作っています。

基本的にはなにも考えずに記述して、スマホの時に767以下で調整といった感じです。③のタブレットはどうしてもレイアウトがおかしいときや調整したいときに使います。
また上記以外に細かく指定する場合は別途メディアクエリを作って適用させます。
下記例

$pc: 960px;
$tab: 959px;
$sp: 767px;


@mixin pc {
  @media screen and (min-width: ($pc)) {
    @content;
  }
}

@mixin tab {
  	@media screen and (max-width: ($tab)) {
    @content;
  }
}

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}
//上記で調整できないときは下記
@media screen and (max-width:1050px) {

}

こんな感じで作っています。
呼び出しはincludeで呼び出して使っています。
例

.cont{
	
	background: #000;
	@include sp {
		background: #F00;
	}
}

通常時は背景＃000の黒で横幅が767以下になったら背景＃F00の赤に

って感じです。spの部分をpcとtabで使い分けてあとは根性で書きまくるのみです。

横幅

全体の幅は1200pxでmax-widthで制作しています。

だいたいクライアント様からの指示等がなければ基本的に横幅は1200～1400ぐらいで作っています。

基本的に固定はせずにmax-widthで作ります。

ご要望によっては、スマホとの切り替えメディアクエリを767pxに設定し、アイパットとかのタブレットはPCデザインを見せるために、可変で作らない場合もあります。

可変で作った方が基本的にはいいのですが、やはりタブレットで若干のレイアウト崩れが起きることがあるのでご要望がある場合は、widthを固定して、767pxからスマホのCSSを充てる方法をとることもあります。（結構このご要望もあります。

ロゴ

ロゴの部分はPC用とスマホ用で切り替えています。PC版はキャラクターが全身で入っているのに対してスマホ用は顔のみにしています。スマホでは全体をいれるとかなり小さくなるので顔だけにしております。

<picture>
					<source media="(min-width: 1050px)" srcset="https://mariokun.com/cmswp/wp-content/themes/mariokun_temp/img/logo.svg">
					<img src="https://mariokun.com/cmswp/wp-content/themes/mariokun_temp/img/logosp.svg" alt="福岡のホームページ制作はマリオくんにお任せ">
</picture>

ここは画像を上記で切り替えています。普段はCSSでディスプレイnoneをクラスを使って消したり表示したりしますが、横幅がめったにつかわない1050だったので上記の記述で終わらせました。

グローバルメニューボタン

つぎはハンバーガーメニューでないグローバルメニューの部分ですがこちらも可変にしております。

スマホサイズでは非表示でレイアウトが崩れる手前までは伸び縮みする仕様です。はっきり言って可変にする必要はなかったのですが、可変にしないと、かなり小さくなったり、大きな横幅ですぐにハンバーガーメニューのみになったりして、デザイン的に空白ができてさみしかったので、無理やり可変にして、ならべく大きな空間（すき間）ができないよう作りました。

ハンバーガーメニュー

こちらはタブレットサイズで表示を切り替えています。情報量が少ない場合はスマホサイズで切り替えますが、タブレットの調整までしたくなかったので、タブレットサイズでスマホ用のレイアウトに切り替えました。
スマホ時は情報量を整理しないといけないので、アコーディオンにして小項目を隠しています。

正直メニューの記述かなり時間がかかりますね。

メイン画像

ここは特に何もないですが、目立たせたいパーツは別にしてposition：absoluteで調整して
アニメーションで少し動かしています。

アニメーションはanimate.cssを利用して動かしています。だいぶ便利ですねこれは。
個別に書いたら地獄の作業がこれなら、簡単に上から下から右から左から動かすことができます。

もっとたくさん動かしたかったですが、ごちゃごちゃして離脱率があがりそうだったので、少し抑えめで動きを入れました。（まだだいぶごちゃついていますが

また、全体にも少し動きを入れています。wow.jsでスクロールで画面に入ったら動くよう設定しています。

問いかけ部分

こちらは特にないですが、パソコンとスマホで文章を少し減らしています。スマホで吹き出しデザインをするときに長文になると、変な感じになるので、個人的にぎりぎりかな？って思うように文章を減らしています。

PCは少し説明がましく・スマホは完結にって感じです。

搭載機能部分

こちらは、時短だ様のイラストが上にはみ出ているところがポイントです。
色の境界線をまたいでいることで躍動感がでている？感じでCSSはアブソリュートで調整しています。

各項目は枠線で囲っていますが、少し途切れたように見せている部分は疑似要素:beforeとかで強引に隠しています。結構よくないですかこれ！！

数字の部分は直書きではなくてCSSで自動的に付与されるようにしています。もしかしたら今後項目がふえるかもしれないので。
liで作成し

counter-increment: number;

を適用して疑似要素に

content: "0" counter(number);

をいれて連番にしています。

そしてマウスオーバーで若干拡大と線がぐわっと回る感じにしています。
正直ここが一番お客様に見てもらうとこかなと思って派手にしました。

お問い合わせ項目部分

やるじゃんマリオ君と意外にやるじゃんマリオ君をslickで無限スクロールさせています。
上下で動く方向を変えています。
やるじゃんマリオ君右から左
意外にやるじゃんマリオ君左から右（スピードも少しおそくしてます）

でボタンが3つならんでいるところ、ここもabsoluteであーじゃない・こーじゃないでいろいろやって強引に調整

強引にレスポンシブ仕様にしてるので大変でした。素直に両サイドのイラストを消せば簡単ですがどうしてもキャラクターはレスポンシブでも残したかったので、時間をかけて調整しました。

制作実績部分

ここもslickで画面いっぱいに横スクロールするようにしています。
完成時はカスタム投稿で最新のものから表示されるようにしますが、まだ未完なのでHTMLを直接記述して表示させています。

もっとみるの部分はマウスオーバーでおじさんがでるようにしています。
それと若干ですがぼかしをいれて強調しています。