【CSS】flexの正しい使い方

公開:2018年05月14日（最終更新:2018年05月15日）
floatの代わりになると期待されているflexbox。その効果はかなり大きいものですでに多くのサイトで導入されています。
非常に使い勝手が良い分、少しでも間違えるとまったく意図しない形になってしまいます。
どうもうまくflexを使えないよーという人の為に、flexの使い方を優しく紹介します。
flexboxとは？

Flexboxとは、要素のサイズが不明なものでも、ダイナミックに変化に柔軟に対応できるCSS3の新しいレイアウトモジュールです。レスポンシブデザインなど、これからはウィンドウサイズによってホームページの表示を正確に変化させていく必要があります。floatではどうしてもタグが長くなってしまうところをflexだったら数行で解決出来る優れものです。
ぜひ、使い方をマスターして自分のサイトでも生かしていきましょう！
基本的な考え方

flexを導入して大きくデザインが崩れてしまうのは、flexを置く場所が間違っていることが大半です。floatの場合は移動させたい要素（div等)にfloatを配置すればOKでした。しかし、flexの場合、少し勝手が変わっていきます。
flexを指定したい親枠（大枠）がブロック要素であればdisplay: flex;と指定。インライン要素であればdisplay: inline-flex;と指定します。
ブロック要素
、、、、、、、-
、
、、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
</pre>
<pre>
インライン要素
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
</pre>
<p>簡単に言えば、タグを使うと『改行』されるものがブロック要素。見出しタグなどですね。インライン要素はタグを使用しても改行されません。太文字タグやリンクタグなどがここに分類されます。</p>
<h3>親枠に配置するオプション</h3>
<p>flex-direction … 子要素の並ぶ向き<br />
デフォルト値: row</p>
<pre>
/* 最初から順番に横並び */
flex-direction: row;

/* 最後から順番に横並び */
flex-direction: row-reverse;

/* 最初から順番に縦並び */
flex-direction: column;

/* 最後から順番に縦並び */
flex-direction: column-reverse;
</pre>
<p>flex-wrap … 子要素の折り返し<br />
デフォルト値: nowrap</p>
<pre>
/* 折り返しなし1行で表示 */
flex-wrap: nowrap;

/* 折り返しあり複数で表示 */
flex-wrap: wrap;

/* 逆から折り返して表示 */
flex-wrap: wrap-reverse;
</pre>
<p><code>flex-flow</code>を使えば、flex-directionとflex-wrapを同時に指定できる。<br />
デフォルト値: row nowrap</p>
<pre>
/* 両方指定例 */
flex-flow: row wrap;
</pre>
<h3>子要素の配置をまとめて</h3>
<p>justify-content … 水平方向の揃え<br />
デフォルト値: flex-start;</p>
<pre>
/* 行の開始位置から配置。左揃え */
justify-content: flex-start;

/* 行末から配置。右揃え */
justify-content: flex-end;

/* 中央揃え */
justify-content: center;

/* 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 */
justify-content: space-between;

/* 両端の子要素も含め、均等に間隔をあけて配置 */
justify-content: space-around;
</pre>
<p>align-items … 垂直方向の揃え<br />
デフォルト値: stretch</p>
<pre>
/* 高さ一杯に表示 */
align-items: stretch;

/* 親要素の開始位置から配置。上揃え */
align-items: flex-start;

/* 親要素の終点から配置。下揃え。 */
align-items: flex-end;

/* 中央揃え。 */
align-items: center;

/* ベースラインで揃える */
align-items: baseline;
</pre>
<p>align-content … 複数行にした時の揃え<br />
デフォルト値: stretch</p>
<pre>
/* 親要素の高さに合わせて広げて配置 */
align-content: stretch;

/* 親要素の開始位置から配置。上揃え。 */
align-content: flex-start;

/* 親要素の終点から配置。下揃え。 */
align-content: flex-end;

/* 中央揃え */
align-content: center;

/* 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 */
align-content: space-between;

/* 上下端にある子要素も含め、均等に間隔をあけて配置 */
align-content: space-around;
</pre>
<p>以上が親枠に設定できるオプションになります。</p>
<h2>子要素に設定できるオプション</h2>
<p><code>display: flex;</code>が指定された要素の中にある要素（Flexアイテム）にだけ効果が発揮されます。親要素に <code>display: flex; </code>が指定されていないと動作しません。</p>
<p>デフォルトで問題がなければ、設定する必要はありません。</p>
<p>order … 番号をつけて配置順番を変更する。<br />
flex-grow … デフォルトは１。それより大きくすると他の枠よりも大きい枠になる。<br />
flex-shrink … 上とは反対にこちらは大きくすると縮む。デフォルトは１。<br />
flex-basis … 子要素のベースとなる幅の指定。px,%,autoが使用可能。デフォルトはauto。<br />
flex … flex-grow、flex-shrink、flex-basisをまとめて指定できる。</p>
<h3>特定の子要素だけ配置を変えたい</h3>
<p>align-self … 子要素の垂直方向の揃え<br />
デフォルト値: auto</p>
<p>高さが足りない子要素の配置場所を決める。背景を出したい、文字の位置を揃えたいなどの問題を解決します。</p>
<pre>
/* 親要素の高さ、もしくは子要素の最大の高さに合わせて配置。背景がでない */
align-self: stretch;

/* 親要素の開始位置から配置。上揃え。高さが足りない子要素の下に背景が出る */
align-self: flex-start;

/* 親要素の終点から配置。下揃え。高さが足りない子要素の上に背景が出る */
align-self: flex-end;

/* 中央揃え 高さが足りない子要素の上下に背景が出る */
align-self: center;

/* ベースラインで揃える */
align-self: baseline;
</pre>
<p>以上が子要素に配置できるオプションになります。</p>
<div class="adsens">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-2550749492214295"
     data-ad-slot="4190696188"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><h2>flexの使い方</h2>
<p>設定をずらっと見ていくとわかるようにfloatと違って、flexは個別に指定するのではなく、親枠でflexを宣言し、子要素をどのように配置するのかを設定します。floatに慣れていると1つずつ設定が出来ないので戸惑うこともあるかもしれませんが、flexは親枠を指定して子要素の横幅を指定するだけで出来るので慣れると非常に楽に感じるはずです。</p>
<p>これからはflexboxが主流になっていくと思いますので、使ったことがない人はぜひお試し下さい。</p>




<article>
<h2>一緒に読まれている記事</h2>
<ul class="archive-grid">


	<li>
        <a href="https://ainc.jp/program/jquery/375/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2018/05/8ae092fd72650c726ebf71b1d2389297_s-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/program/jquery/375/">レスポンシブ対応の高機能スライダー「Swiper」</a>
	</li>
	<li>
        <a href="https://ainc.jp/homepage/sass-scss/392/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2018/05/001-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/homepage/sass-scss/392/">SASS/SCSSを便利に使う『koala』の紹介</a>
	</li>
	<li>
        <a href="https://ainc.jp/program/jquery/43/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2013/02/d21ba6713f240eb6a65762dfdfcca80f_s-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/program/jquery/43/">画像を横にスライドさせる「jQuery Slider2」</a>
	</li>
	<li>
        <a href="https://ainc.jp/program/python/697/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2021/05/20210516-01-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/program/python/697/">Python初心者でも簡単にできるリアルタイム顔認識</a>
	</li>
	<li>
        <a href="https://ainc.jp/program/php/255/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2018/05/7225a06576ce1157183dd9ea1d4e3fdf_s-300x200.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/program/php/255/">【PHP】CSVファイルからデータを抜き出し出力させる</a>
	</li>
	<li>
        <a href="https://ainc.jp/homepage/seo/50/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2013/02/f8e2811f22559593a88a4e64894d0fd6_s-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/homepage/seo/50/">パンダアップデート</a>
	</li>
</ul>


<h2>関連する記事</h2>

		
<ul class="bottom_category">
	
				<li><a href="https://ainc.jp/homepage/css/557/">

						<img width="150" height="150" src="https://ainc.jp/wp-content/uploads/2020/08/3145985_m-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" />
		</a>
<div class="informal">
<p><span class="cate"><a href="https://ainc.jp/category/homepage/css/" rel="category tag">CSS</a>, <a href="https://ainc.jp/category/homepage/kantanhp/" rel="category tag">誰でも簡単作成</a></span></p>
<p class="_title"><a href="https://ainc.jp/homepage/css/557/">ホームページデザインのベースとなる枠組みの基礎知識</a></p>
<p>ホームページを誰でも簡単に作れるようになるために、最初に覚えることは枠組みの作り方。どんなに素晴らしいデザインのイメージが頭の中にあってもそれを表現出来なければ意味がありません。デザインを作る上でどうしても避けて通れない...<a href="https://ainc.jp/homepage/css/557/">続きを読む</a></p>
</div></li>
			
</ul>

</article>



</main>
<asaid>

<div class="saidR-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ainc-said-01 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2550749492214295"
     data-ad-slot="8209832244"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div id="search">
<form role="search" method="get" id="searchform" class="searchform" action="https://ainc.jp/">
	<dl class="search2">
		<label class="screen-reader-text" for="s"></label>
		<dt><input type="text" placeholder="検索するテキストを入力" value="" name="s" id="s" /></dt>
		<dd><button>検索</button><dd>
	</dl>
</form>

</div>

<div class="rs-menu">
<h2>人気記事</h2>
<ul class="pagelist">

	<li>
        <a href="https://ainc.jp/program/python/697/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2021/05/20210516-01-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/program/python/697/">Python初心者でも簡単にできるリアルタイム顔認識</a>
	</li>
	<li>
        <a href="https://ainc.jp/program/php/674/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2021/04/20210416-01-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/program/php/674/">【PHP】特定の条件で表示させたり、させなかったり、条件文を使ってカスタマイズ【WordPress】</a>
	</li>
	<li>
        <a href="https://ainc.jp/wordpress/671/"><img width="360" height="240" src="https://ainc.jp/wp-content/uploads/2021/04/4011269_s-360x240.jpg" class="attachment-msize-photo size-msize-photo wp-post-image" alt="" decoding="async" loading="lazy"></a>
	<a href="https://ainc.jp/wordpress/671/">AMP化しようとしてデザインが壊れてしまう場合の対処方法</a>
	</li>
</ul>

<h2>注目記事</h2>
<ul class="archive">

	<li>
        <a href="https://ainc.jp/privacy/">プライバシーポリシー</a>
	</li>
	<li>
        <a href="https://ainc.jp/top/">ホームページで１番大事なこと</a>
	</li>
	<li>
        <a href="https://ainc.jp/blog/">ブログ</a>
	</li>
	<li>
        <a href="https://ainc.jp/hpconsul/">ホームページコンサルティング</a>
	</li>
	<li>
        <a href="https://ainc.jp/service/">サービス内容</a>
	</li>
	<li>
        <a href="https://ainc.jp/yokuaru/">よくある質問</a>
	</li>
	<li>
        <a href="https://ainc.jp/wordp/">ワードプレス（WordPress）設置について</a>
	</li>
	<li>
        <a href="https://ainc.jp/trouble/">ホームページ制作会社とのトラブルや被害</a>
	</li>
	<li>
        <a href="https://ainc.jp/soudan/">ホームページ無料診断</a>
	</li>
	<li>
        <a href="https://ainc.jp/seo/">ＳＥＯ対策について</a>
	</li>
	<li>
        <a href="https://ainc.jp/link/">相互リンク＆お勧めサイト</a>
	</li>
	<li>
        <a href="https://ainc.jp/kanri/">ホームページ業者との関係の改善</a>
	</li>
	<li>
        <a href="https://ainc.jp/kaitou/">回答事例集</a>
	</li>
	<li>
        <a href="https://ainc.jp/kaisya/">会社概要</a>
	</li>
	<li>
        <a href="https://ainc.jp/mail/">無料メール相談</a>
	</li>
	<li>
        <a href="https://ainc.jp/sitemap/">サイトマップ</a>
	</li>
	<li>
        <a href="https://ainc.jp/gyousya/">良い業者・悪い業者の見分け方</a>
	</li>
</ul>

</div>

<div class="saidR-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ainc-said-02 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2550749492214295"
     data-ad-slot="6970694771"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div class="rs-menu">
<h2>最新記事</h2>
<ul class="news">

	<li>
        <a href="https://ainc.jp/program/python/697/"><img width="100" height="100" src="https://ainc.jp/wp-content/uploads/2021/05/20210516-01-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" decoding="async" loading="lazy"></a>        <p class="cate">
                        <a href="https://ainc.jp/category/program/python/"><span>Python</span></a>
        </p>
        <p class="said-time">2021/05/16</p>
        <p><a href="https://ainc.jp/program/python/697/">Python初心者でも簡単にできるリアルタイム顔認識</a></p>
	</li>
	<li>
        <a href="https://ainc.jp/program/php/674/"><img width="100" height="100" src="https://ainc.jp/wp-content/uploads/2021/04/20210416-01-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" decoding="async" loading="lazy"></a>        <p class="cate">
                        <a href="https://ainc.jp/category/program/php/"><span>php</span></a>
        </p>
        <p class="said-time">2021/04/15</p>
        <p><a href="https://ainc.jp/program/php/674/">【PHP】特定の条件で表示させたり、させなかったり、条件文を使ってカスタマイズ【WordPress】</a></p>
	</li>
	<li>
        <a href="https://ainc.jp/wordpress/671/"><img width="100" height="100" src="https://ainc.jp/wp-content/uploads/2021/04/4011269_s-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" decoding="async" loading="lazy"></a>        <p class="cate">
                        <a href="https://ainc.jp/category/wordpress/"><span>WordPress</span></a>
        </p>
        <p class="said-time">2021/04/09</p>
        <p><a href="https://ainc.jp/wordpress/671/">AMP化しようとしてデザインが壊れてしまう場合の対処方法</a></p>
	</li>
	<li>
        <a href="https://ainc.jp/wordpress/617/"><img width="100" height="100" src="https://ainc.jp/wp-content/uploads/2020/09/1026724_m-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" decoding="async" loading="lazy"></a>        <p class="cate">
                        <a href="https://ainc.jp/category/wordpress/"><span>WordPress</span></a>
                        <a href="https://ainc.jp/category/homepage/kantanhp/"><span>誰でも簡単作成</span></a>
        </p>
        <p class="said-time">2020/09/10</p>
        <p><a href="https://ainc.jp/wordpress/617/">【誰でも簡単】ワードプレスでデザインを作っていこう</a></p>
	</li>
	<li>
        <a href="https://ainc.jp/homepage/555/"><img width="100" height="100" src="https://ainc.jp/wp-content/uploads/2020/09/2410014_m-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" decoding="async" loading="lazy"></a>        <p class="cate">
                        <a href="https://ainc.jp/category/homepage/"><span>ホームページ</span></a>
        </p>
        <p class="said-time">2020/09/09</p>
        <p><a href="https://ainc.jp/homepage/555/">ホームページ制作に便利なソフト（仮）</a></p>
	</li>
</ul>

<h2>過去の記事</h2>
<ul class="archive">

	<li>
	<a href="https://ainc.jp/date/2021/05/">2021年5月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2021/04/">2021年4月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2020/09/">2020年9月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2020/08/">2020年8月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2020/02/">2020年2月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2018/05/">2018年5月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2017/12/">2017年12月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2017/04/">2017年4月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2016/03/">2016年3月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2013/11/">2013年11月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2013/08/">2013年8月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2013/02/">2013年2月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2013/01/">2013年1月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2012/12/">2012年12月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2012/11/">2012年11月</a>
	</li>
	<li>
	<a href="https://ainc.jp/date/2012/10/">2012年10月</a>
	</li>
</ul>
</div>

<div class="saidR-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ainc-said-03 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2550749492214295"
     data-ad-slot="8642869098"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

</asaid>


</div><!-- wrapper -->
        </div> 
    </div>

<section>

<div class="cd-fixed-bg cd-bg-2">
	<div class="publicity">
    
    <article class="wow fadeInUp">

<div class="theme_waku">
        <ul>
        <li>きちんと結果を出せるホームページにしたい</li>
        <li>今のホームページを新しく作り替えたい</li>
        <li>ホームページをもっと効果的に運用したい</li>
        <li>ホームページの定期的アドバイザーが欲しい</li>
        </ul>
        <div class="theme">
                <p>こんなお悩みをお持ちではありませんか？</p>
                <p>弊社はホームページの悩みをすべて解決します！</p>
                <p>ご相談は下記からお気軽にご連絡ください！</p>
            </div>
        </div>
        
        </article>
        
    </div>
</div>
        
<div class="cd-scrolling-bg cd-color-4">
	<div class="cd-container">
    
    	<article class="wow fadeInUp">

    <p class="center"><img src="https://ainc.jp/wp-content/themes/ainc/images/bottom-tel.png" alt=""></p>
    
    	</article>

	</div>
</div>
</section>

<!--
<section>
<div class="cd-fixed-bg cd-bg-2">
    <div class="publicity">
        
更新履歴
            

    </div>
</div>
</section>

<section>  
    <div class="cd-scrolling-bg cd-color-2">
        <div class="cd-container">

更新履歴

        </div> 
    </div>
</section>
-->



<footer>
<div id="fmenu">
    <ul>
    <h3><a href="https://ainc.jp">トップページ</a></h3>
    </ul>
    <ul>
    <h3>業務紹介</h3>
        <li><a href="https://ainc.jp/hpconsul">ホームページコンサルティング</a></li>        
        <li><a href="https://ainc.jp/seo">ＳＥＯ対策</a></li>
        <li><a href="https://ainc.jp/wordp">ワードプレス設置代行</a></li>
        <li><a href="https://ainc.jp/soudan">ホームページ診断</a></li>
        <li><a href="https://ainc.jp/service#mosikomi">お申し込み</a></li>
    </ul>
    <ul>
    <h3>会社概要</h3>
        <li><a href="https://ainc.jp/kaisya">会社概要</a></li>
        <li><a href="https://ainc.jp/privacy">プライバシーポリシー</a></li>
        <li><a href="https://ainc.jp/service">サービス内容</a></li>
    </ul>
    <ul>
    <h3>お役立ちコンテンツ</h3>
    <li><a href="https://ainc.jp/blog/">ブログ</a></li>
    <li><a href="https://ainc.jp/gyousya">良い業者・悪い業者の見分け方</a></li>
    <li><a href="https://ainc.jp/kanri">制作＆運営業者との関係の改善</a></li>
    <li><a href="https://ainc.jp/trouble">制作会社とのトラブル</a></li>
    <li><a href="https://ainc.jp/mail">無料メール相談</a></li> 
    <li><a href="https://ainc.jp/yokuaru">よくある質問</a></li>
    <li><a href="https://ainc.jp/kaitou">回答事例集</a></li>
    </ul>
    </div>
<div id="finfo_waku">
<img src="https://ainc.jp/wp-content/themes/ainc/images/ainc-logo-footer.png" alt="">
<div id="finfo">
<p>アイ・エヌ・シー株式会社　- ホームページ 制作 運営 相談 -</p> 
<p>〒238-0023 神奈川県横須賀市森崎4-3-2</p>
<p>TEL 046-854-9868　FAX 046-854-9868</p>
</div><!-- finfo -->
</div><!-- finfo_waku -->

<div id="copyright">
c 2010-2024 アイ・エヌ・シー株式会社. All Rights Reserved. 文章、映像、写真等の著作物の全部、または一部を弊社の許可なく複製、使用することを一切禁じます。　
</div>
</footer>
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p>
</body>
<link rel="stylesheet" href="https://ainc.jp/wp-content/themes/ainc/css/plugin.css">
<script src="https://ainc.jp/wp-content/themes/ainc/js/swiper/swiper.min.js"></script>
<script src="https://ainc.jp/wp-content/themes/ainc/js/swiper/setting.js"></script>
<script src="https://ainc.jp/wp-content/themes/ainc/js/wow.js"></script>
<script>
  wow = new WOW(
    {
    boxClass: 'wow', // default
    animateClass: 'animated', // default
    offset:100// アニメーションをスタートさせる距離
    }
  );
  wow.init();
</script>
<div id="mpPtiCMdqyom" class="rulmQypGjSpF" style="background:#dddddd;z-index:9999999; "></div>   <script type="text/javascript">/* <![CDATA[ */var anOptions ={"anOptionChoice":"2","anOptionStats":"1","anOptionAdsSelectors":"","anOptionCookie":"1","anOptionCookieLife":"30","anPageRedirect":"","anPermalink":"undefined","anOptionModalEffect":"fadeAndPop","anOptionModalspeed":"350","anOptionModalclose":false,"anOptionModalOverlay":"rgba( 0,0,0,0.95 )","anAlternativeActivation":false,"anAlternativeElement":"","anAlternativeText":"<p><strong>AdBlock detected!<\/strong><\/p>\n<p>Please add <a title=\"https:\/\/getadmiral.com?utm_medium=plugin&utm_campaign=abn&utm_source=abnlinks\" href=\"https:\/\/getadmiral.com?utm_medium=plugin&utm_campaign=abn&utm_source=abnlinks\" target=\"_blank\">www.getadmiral.com<\/a> to your adblocking whitelist or disable your adblocking software.<\/p>\n","anAlternativeClone":"2","anAlternativeProperties":"","anOptionModalShowAfter":0,"anPageMD5":"","anSiteID":0,"modalHTML":"<div class=\"rulmQypGjSpF-default\">\n\t<h1 style=\"\">Adblocker\u3092\u611f\u77e5\u3057\u307e\u3057\u305f\u3002\u89e3\u9664\u3057\u3066\u304b\u3089\u3082\u30461\u5ea6\u304a\u8a66\u3057\u4e0b\u3055\u3044<\/h1>\n\t<p>\u3053\u306e\u30b5\u30a4\u30c8\u306f\u5e83\u544a\u63b2\u8f09\u304b\u3089\u306e\u53ce\u76ca\u306b\u3088\u3063\u3066\u904b\u55b6\u3057\u3066\u3044\u307e\u3059\u3002\u5e83\u544a\u3092\u30d6\u30ed\u30c3\u30af\u3055\u308c\u3066\u3057\u307e\u3046\u3068\u8cea\u306e\u9ad8\u3044\u8a18\u4e8b\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u3082\u96e3\u3057\u304f\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u4f55\u304b\u3092\u8cb7\u3063\u3066\u304f\u308c\u3001\u5165\u3063\u3066\u304f\u308c\u3068\u8a00\u3046\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u5f53\u30b5\u30a4\u30c8\u3054\u89a7\u9802\u304f\u969b\u306b\u306f\u30b9\u30dd\u30f3\u30b5\u30fc\u69d8\u306e\u5e83\u544a\u3082\u4e00\u7dd2\u306b\u3054\u89a7\u9802\u3051\u308b\u3068\u5e78\u3044\u3067\u3059\u3002<\/p>\n<p>\u3054\u7406\u89e3\u9802\u3051\u308b\u65b9\u306f\u30a2\u30c9\u30d6\u30ed\u30c3\u30af\u3092\u89e3\u9664\u3057\u3066\u304b\u3089\u3001\u4e0b\u8a18\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u304b\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u66f4\u65b0\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u9802\u3051\u308b\u3068\u5e78\u3044\u3067\u3059\u3002<\/p>\n<p><strong><a title=\"\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c\u904b\u55b6\u76f8\u8ac7\u5ba4\" href=\"http:\/\/ainc.jp\" target=\"_blank\">ainc.jp<\/a><strong><\/p>\n<p>\u6700\u5f8c\u307e\u3067\u3054\u89a7\u9802\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u672c\u30b5\u30a4\u30c8\u3067\u304a\u697d\u3057\u307f\u9802\u3051\u305f\u3089\u5e78\u3044\u3067\u3059\u3002<\/p>\n<\/div>\n"}/* ]]> */</script><div id="adsense" class="an-sponsored" style="position:absolute; z-index:-1; height:1px; width:1px; visibility: hidden; top: -1px; left: 0;"><img class="an-advert-banner" alt="sponsored" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></div><script type="text/javascript" src="https://ainc.jp/wp-includes/js/dist/hooks.min.js?ver=2810c76e705dd1a53b18" id="wp-hooks-js"></script>
<script type="text/javascript" src="https://ainc.jp/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script type="text/javascript" id="wp-i18n-js-after">
/* <![CDATA[ */
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
/* ]]> */
</script>
<script type="text/javascript" src="https://ainc.jp/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.8" id="swv-js"></script>
<script type="text/javascript" id="contact-form-7-js-extra">
/* <![CDATA[ */
var wpcf7 = {"api":{"root":"https:\/\/ainc.jp\/wp-json\/","namespace":"contact-form-7\/v1"}};
/* ]]> */
</script>
<script type="text/javascript" id="contact-form-7-js-translations">
/* <![CDATA[ */
( function( domain, translations ) {
	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
	localeData[""].domain = domain;
	wp.i18n.setLocaleData( localeData, domain );
} )( "contact-form-7", {"translation-revision-date":"2024-07-17 08:16:16+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"ja_JP"},"This contact form is placed in the wrong place.":["\u3053\u306e\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u9593\u9055\u3063\u305f\u4f4d\u7f6e\u306b\u7f6e\u304b\u308c\u3066\u3044\u307e\u3059\u3002"],"Error:":["\u30a8\u30e9\u30fc:"]}},"comment":{"reference":"includes\/js\/index.js"}} );
/* ]]> */
</script>
<script type="text/javascript" src="https://ainc.jp/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.8" id="contact-form-7-js"></script>
<script type="text/javascript" src="https://ainc.jp/wp-content/themes/ainc/js/main.js?ver=6.6.2" id="smart-script-js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=6Ldpb8MUAAAAAAYM4pWZi7SREzzpWp53df6vSWUQ&amp;ver=3.0" id="google-recaptcha-js"></script>
<script type="text/javascript" src="https://ainc.jp/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script>
<script type="text/javascript" id="wpcf7-recaptcha-js-extra">
/* <![CDATA[ */
var wpcf7_recaptcha = {"sitekey":"6Ldpb8MUAAAAAAYM4pWZi7SREzzpWp53df6vSWUQ","actions":{"homepage":"homepage","contactform":"contactform"}};
/* ]]> */
</script>
<script type="text/javascript" src="https://ainc.jp/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=5.9.8" id="wpcf7-recaptcha-js"></script>
<script type="text/javascript" src="https://ainc.jp/wp-content/plugins/highlighting-code-block/assets/js/prism.js?ver=2.0.1" id="hcb-prism-js"></script>
<script type="text/javascript" src="https://ainc.jp/wp-includes/js/clipboard.min.js?ver=2.0.11" id="clipboard-js"></script>
<script type="text/javascript" id="hcb-script-js-extra">
/* <![CDATA[ */
var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"\u30b3\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3059\u308b"};
/* ]]> */
</script>
<script type="text/javascript" src="https://ainc.jp/wp-content/plugins/highlighting-code-block/build/js/hcb_script.js?ver=2.0.1" id="hcb-script-js"></script>
<script type="text/javascript" id="an_scripts-js-extra">
/* <![CDATA[ */
var ajax_object = {"nonce":"c588570b89","ajaxurl":"https:\/\/ainc.jp\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type="text/javascript" src="https://ainc.jp/wp-content/uploads/jOGLTzWWBsFD/QoHrFLuaDpKY.js?ver=2.2.3" id="an_scripts-js"></script>
</html>