文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > ボタンのデザイン > 続けて読むアコーディオン

「続きを読む」ボタンのデザイン

htmlの文書が長い場合「続きを読む」ボタンを利用して折りたたんだ状態とすることがあります。縦長ページのデザインでは「続けて読む」を配置することで見やすくなることがあります。

当ページのサンプルはアコーディオン(ゆっくり開く/ゆっくり閉じる)や少しずつ消えるグラデーションにも対応しています。
折りたたんだ状態から開くときの高さは自動でJavaScriptから取得しています。

生成された「html」「css」「JavaScript」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

「続きを読む」を変更してみよう

ボタンの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度

下のhtmlのように数行追加すれば、「続きを開く」を簡単に作成できます。

ボタンを押下するとdivが広がり、残りの文書が表示されます。文書内に写真などの画像を含んでいても利用することができます。また、閉じるボタンで元のサイズに戻ります。

開く高さはJavaScriptで自動取得していますので、スマホなどで横幅が変わる場合も対応できます。

使用したhtml
<div class="nextReadBox" id="area01">
  <input type="checkbox" id="ck01" onclick="docOpen('01')">
  <label for="ck01"></label>
 
  <div id="doc01">
    <!-- このdiv内に文書を書きます -->
    <p>下のhtmlのように数行追加すれば、「続きを開く」を簡単に作成できます。</p>
    <p>・・・(略)</p>
  </div>
 
</div>
生成したCSS
<style type="text/css">
 /* === ベースのBOX =============================================== */
.nextReadBox {
  position      : relative;                 /* relative指定は必須   */
  overflow      : hidden;                   /* hidden指定は必須     */
  transition    : .5s;                      /* 開閉の速度           */
  height        : 150px;                    /* 閉じているときの高さ */
 
  background    : #fff;               /* 色や文字情報は変更ください */
  line-height   : 1.3;
  padding       : 5px 10px;
  text-align    : left;
  font-size     : 13pt;
  font-weight   : bold;
  border        : 3px solid #999;
  border-radius : 8px;
  max-width     : 400px;
  margin        : auto;
}
 
 /* === チェックボックス ========================================== */
.nextReadBox > input {
  display       : none;                                   /* 非表示 */
}
 
 /* === チェックボックスのlabel(=ボタンに見せる) =============== */
.nextReadBox > label {
  position      : absolute;
  display       : inline-block;
  box-sizing    : border-box;
 
  bottom        : 0;   /* 左右いっぱいのBOXにグラデーションを付ける */
  left          : 0;
  right         : 0;
  height        : 60px;
  background    : linear-gradient( rgba(255, 255, 255, 0.10),
                                   #ffffff 65% );
 
  padding-top   : 40px;                   /* 下寄せに文字を配置する */
  text-align    : center;
  font-size     : 15px;
  color         : #0059b3;
}
 
 /* === 開いているときのボタンサイズを変更 ======================== */
.nextReadBox > input[type="checkbox"]:checked + label {
  background    : rgba(255, 255, 255, 0.60);
  height        : 25px;
  padding-top   : 5px;
  font-size     : 12px;
}
 
 /* === ボタンに表示する文字(閉じているとき) ==================== */
.nextReadBox > input[type="checkbox"]:not(:checked) + label::after {
  content       : "続きを開く";
}
 
 /* === ボタンに表示する文字(開いているとき) ==================== */
.nextReadBox > input[type="checkbox"]:checked + label::after {
  content       : "閉じる";
}
</style>
生成したJavaScript
<script type="text/javascript">
function docOpen(){
 // --------------------------------------------------------------
 //  文書の開閉
 // --------------------------------------------------------------
  var wArea = document.getElementById("area01");   // 全体の枠
  var wCheck= document.getElementById("ck01");     // チェックボックス
  var wDoc  = document.getElementById("doc01");    // 文書のエリア
 
  if(wCheck.checked){
    // 全体枠高さを文書エリアの高さ+ボタン高さにする
    wArea.style.height = parseInt(wDoc.clientHeight + 40)+"px";
  }else{
    wArea.style.height = "";
  }
}
</script>
広告
広告
ページTOP

色々な「続きを読む」

上記サンプルは帯状のボタンですが、通常のボタンのように見せることもできます。

CSSのみで「続きを読む」を開く/閉じる

このサンプルは、右に寄せたボタンを利用した「続きを読む」です。

「閉じる」ボタンを表示しない事でCSSの構文が小さくなっています。「閉じる」ボタンが不要な場合は、より軽量なCSSのみで「続きを読む」を実装することができます。

HTML
CSS
表示

CSSのみで「続きを読む」を開く(閉じるは付けない)

このサンプルは、右に寄せたボタンを利用した「続きを読む」です。

「閉じる」ボタンを表示しない事でCSSの構文が小さくなっています。「閉じる」ボタンが不要な場合は、より軽量なCSSのみで「続きを読む」を実装することができます。

HTML
CSS
表示

ボタン表示でゆっくり開く・ゆっくり閉じる

JavaScriptは、上部のサンプルをご確認ください。

このサンプルは、ゆっくり開く「続きを読む」です。

JavaScriptですべて表示した時の高さを求めて、ゆっくり開いてゆっくり閉じるます。
CSS内の「transition」の値を変更すると速度を変えることが出来ます。

サンプルのHTML,CSS,JavaScriptは自由にご利用いただけます。また改造も自由ですので是非ご利用ください。

HTML
CSS
表示
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン