スニペット – Techブログ | WEB制作 WEBシステム開発 AWSインフラ構築･運用サンアットマーク東京都渋谷区

Youtube動画をモーダルで簡単表示

2026-06-30 JavaScript / プログラム / 動画Comments disabled

Youtube・Vimeoの動画をライブラリ「modal-video.js」を使ってモーダル表示する方法を紹介します。まずは【デモ】 Source

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/modal-video@latest/js/jquery-modal-video.min.js"></script>

1 2	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://unpkg.com/modal-video@latest/js/jquery-modal-video.min.js"></script>

[c…

slickカスタマイズ

2018-01-18 2025-08-04 CSS / JavaScript / スニペット / プログラム0 Comments

オプションが多く汎用性の高いslidk-Sliderですが、自社の制作時に使いやすいよう、もう少し踏み込んで調整してみました。

スマホ用スライドメニュー（meanMenu）

2018-01-18 2025-08-04 CSS / JavaScript / スニペット / プログラム0 Comments

スマホサイトのハンバーガーメニューを、meanMenuをベースに、カスタマイズしやすいよう調整しました。

アコーディオンコンテンツ

2018-01-18 Blog / CSS / スニペット0 Comments

レスポンシブ対応のサイト作成において、PCは通常のタイトル＋段落、スマホではアコーディオンメニューのように開閉するパターンがあります。 JSの設定値でブレイクポイントを変更できます。デフォルトでは768を境にしています…

画像のマウスオーバー

2018-01-18 CSS / スニペット / 写真0 Comments

画像にマウスオーバーした際の動きをちょっとし凝ってみました。

スクロールすると一定の位置でメニューを固定する方法

2016-12-09 2017-06-29 ナビゲーション0 Comments

画面をスクロールしてある一定の位置まで行き、メニューが隠れそうになったときに、画面の上部に固定する方法です。

フォーム｜入力欄の長さを最適化

2016-09-09 2016-12-16 フォーム0 Comments

フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。

基本設定

2016-09-09 2016-12-15 スニペット / 基本設定0 Comments

サイトの基本情報をSCSSのスニペットとしてまとめました。

コピーライト

2016-09-09 2025-08-04 スニペット0 Comments

フォームテーブル

2016-09-09 2016-10-14 テーブル / フォーム0 Comments

テーブルのスタイル、ブレイクポイント等は、テーブルの項目を参照してください。 View 必須項目名 ○○は入力必須です。…などのエラー表示項目名入力例、補足など Source [crayon-6a77585bc6fc…

ボタン基本スタイル

2016-09-09 2016-10-14 ボタン0 Comments

ボタンの基本スタイルです。各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。 View 基本 button xsでブロックボタン基本 button smでブロックボタン基本 button md…

遷移ボタン

2016-09-09 2025-08-04 ボタン0 Comments

sun@flexを使用した遷移ボタンのスニペットデモ Source

<p>buttonBox 基本並び（float:left）</p>
<div class="buttonBox">
    <ul class="flex row">
        <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li>
        <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li>
    </ul>
</div>
<hr>
<p>buttonBox 逆並び（float:right）</p>
<div class="buttonBox">
    <ul class="flex row reverse">
        <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li>
        <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li>
    </ul>
</div>
<hr>
<p>buttonBox center配置（ボタンx2）</p>
<ul class="caption">
    <li>※.row の max-width を設定</li>
</ul>
<hr>
<div class="buttonBox center">
    <ul class="flex row">
        <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li>
        <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li>
    </ul>
</div>
<hr>
<p>buttonBox center配置（ボタンx1）</p>
<ul class="caption">
    <li>※.row幅は x2 の半分</li>
</ul>
<div class="buttonBox center single">
    <ul class="flex row">
        <li class="col-xs-12"><a class="button">進む</a></li>
    </ul>
</div>

<p>buttonBox 基本並び（float:left）</p>

</ul>

</div>

<hr>

<p>buttonBox 逆並び（float:right）</p>

</ul>

</div>

<hr>

<p>buttonBox center配置（ボタンx2）</p>

<li>※.row の max-width を設定</li>

</ul>

<hr>

</ul>

</div>

<hr>

<p>buttonBox center配置（ボタンx1）</p>

<li>※.row幅は x2 の半分</li>

</ul>

</ul>

</div>

/* ====================================================
    ボタンボックス
==================================================== */
.buttonBox { text-align: center; }
.buttonBox p { text-align: center; }
.buttonBox li .button {
    display: block;
    padding: 0.75em;
}
.buttonBox.center .row {
    display: inline-flex;
    width: 103%;
    max-width: 500px;
}
.buttonBox.center.single .row { max-width: 250px; }
 
@media print, screen and (max-width: 767px) {
.buttonBox > .row > .col-xs-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}
 
@media print, screen and (max-width: 991px) {
.buttonBox > .row > .col-sm-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}
 
@media screen and (max-width: 1199px) {
.buttonBox > .row > .col-md-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}
 
@media screen and (max-width: 9999px) {
.buttonBox > .row > .col-lg-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

/* ====================================================

ボタンボックス

==================================================== */

.buttonBox { text-align: center; }

.buttonBox p { text-align: center; }

.buttonBox li .button {

display: block;

padding: 0.75em;

}

.buttonBox.center .row {

display: inline-flex;

width: 103%;

max-width: 500px;

}

.buttonBox.center.single .row { max-width: 250px; }

@media print, screen and (max-width: 767px) {

.buttonBox > .row > .col-xs-12 {

margin-top: 0.25em;

margin-bottom: 0.25em;

}

@media print, screen and (max-width: 991px) {

.buttonBox > .row > .col-sm-12 {

margin-top: 0.25em;

margin-bottom: 0.25em;

}

@media screen and (max-width: 1199px) {

.buttonBox > .row > .col-md-12 {

margin-top: 0.25em;

margin-bottom: 0.25em;

}

@media screen and (max-width: 9999px) {

.buttonBox > .row > .col-lg-12 {

margin-top: 0.25em;

margin-bottom: 0.25em;

}

[crayon-6…