サイト作成に便利！プロが教えるコメントアウトの使い方！ | 福岡のホームページ制作はマリオ君にお任せ

<!--
と
-->
に挟まれている部分がコメントアウトになります。
<!--この部分はブラウザで表示されません-->

/*
と
*/
に挟まれている部分がコメントアウトになります。

/*color:#FFF;この部分のCSSは適用されません*/

//color:#FFF;この部分のCSSは適用されません

スラッシュスラッシュに続く一行のみコメントアウトできます。

#get_template_partこの部分のPHPは実行されません

シャープに続く一行のみコメントアウトできます。

<div class="wrapbg">
	<div class="wrap">
		<div class="cont">
			<div class="left">

			</div>
			<div class="right">

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

<div class="wrapbg">
	<div class="wrap">
		<div class="cont">
			<div class="left">

			</div>
			<!-- ▲▲▲left end▲▲▲-->
			<div class="right">

			</div>
			<!-- ▲▲▲right end▲▲▲-->
		</div>
		<!-- ▲▲▲cont end▲▲▲-->
	</div>
	<!-- ▲▲▲wrap end▲▲▲-->
</div>
<!-- ▲▲▲wrapbg end▲▲▲-->

<section class="newsbox">
	<div class="wrapbg">
		<div class="wrap">
			<div class="cont">
				<div class="left">

				</div>
				<!-- ▲▲▲left end▲▲▲-->
				<div class="right">

				</div>
				<!-- ▲▲▲right end▲▲▲-->
			</div>
			<!-- ▲▲▲cont end▲▲▲-->
		</div>
		<!-- ▲▲▲囲み終わり▲▲▲-->
	</div>
	<!-- ▲▲▲背景終わり▲▲▲-->
</section>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲最新情報のコンテンツ終了▲▲▲▲▲▲▲▲▲▲▲▲-->

<section class="newsbox">
	<div class="wrapbg">
		<div class="wrap">
			<div class="cont">
				<!--<div class="left">
ここに記述されるものは非表示になります。
				</div>-->
				<!-- ▲▲▲left end▲▲▲-->
				<div class="right">

				</div>
				<!-- ▲▲▲right end▲▲▲-->
			</div>
			<!-- ▲▲▲cont end▲▲▲-->
		</div>
		<!-- ▲▲▲囲み終わり▲▲▲-->
	</div>
	<!-- ▲▲▲背景終わり▲▲▲-->
</section>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲最新情報のコンテンツ終了▲▲▲▲▲▲▲▲▲▲▲▲-->

<style>
/*<section class="newsbox">
	<div class="wrapbg">
		<div class="wrap">
			<div class="cont">
				<!--<div class="left">

				</div>-->
				<!-- ▲▲▲left end▲▲▲-->
				<div class="right">

				</div>
				<!-- ▲▲▲right end▲▲▲-->
			</div>
			<!-- ▲▲▲cont end▲▲▲-->
		</div>
		<!-- ▲▲▲囲み終わり▲▲▲-->
	</div>
	<!-- ▲▲▲背景終わり▲▲▲-->
</section>
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲最新情報のコンテンツ終了▲▲▲▲▲▲▲▲▲▲▲▲-->*/
</style>	

CSSで使用できるコメントアウト/**/を使用しています。HTMLファイルではそのままでは使えないので

styleタグで囲ってその中で

/**/

を使って全体をコメントアウトしています。

//▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼会話部分で使用

.topcont01{
	position: relative;
	padding: 0 20px 150px;//下への余白はコンテンツが増えたら消す又は100pxに変更する
	@include sp {
		padding: 0 0px 50px;
		//overflow: hidden;
	}
}
.line_d.current::before,
.line_d.current::after,
.line_d:hover::before,
.line_d:hover::after{
  width: calc(85%);/*横幅を100%に*/
}


//▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲会話部分で使用

<?php
$paged = get_query_var('paged')? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'works',//スラッグをいれる
    'posts_per_page' => -1,//表示させたい件数をいれる　全部の時は-1をいれる
    'paged' => $paged,
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>

$("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
    $(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
    $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
});