青ボックスに記事を入れる

青いボックス

注目！！

学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。

CODE

HTML


<div class="box1">
   <div class="tasuki tasukiR tasukiG"><span>注目！！</span></div>
   <p class="tasukiRp">学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免   かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。</p>
  </div>
<div>

CSS


.box1 {
  margin-top:20px;
  min-height: 100px;
  height: auto !important;
  height: 100px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}
.tasuki {
  position: absolute;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.tasuki span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  width: 100px;
  display: block;
  top: 19px;
  background: #79A70A;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
}
.tasuki span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: -1;
}
.tasuki span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: -1;
}
.tasukiR {
  right: -5px;
}
.tasukiR span {/* 右位置 */
  right: -21px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.tasukiRp{
  padding-right: 33px !important;
  padding-left:10px !important;
  padding-top:15px !important;
  padding-bottom: 10px !important;
  font-size:100%;
}
.tasukiG span {/* 緑 */
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
}
.tasukiG span::before {/* 緑 */
  border-left: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}
.tasukiG span::after {/* 緑 */
  border-right: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}

POPULAR

CODE

HTML


<div class="box1">
   <div class="tasuki tasukiL tasukiG"><span>POPULAR</span></div>
   <p class="tasukiLp">学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。</p>
   <div>
</div>

CSS


.box1 {
  margin-top:20px;
  min-height: 100px;
  height: auto !important;
  height: 100px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}
.tasuki {
  position: absolute;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.tasuki span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  width: 100px;
  display: block;
  top: 19px;
  background: #79A70A;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
}
.tasuki span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: -1;
}
.tasuki span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: -1;
}
.tasukiL {
  left: -5px;
}
.tasukiL span {/* 左位置 */
  left: -21px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.tasukiLp{
  padding-right: 10px !important;
  padding-left: 39px !important;
  padding-top:15px !important;
  padding-bottom: 10px !important;
  font-size:100%;
}
.tasukiG span {/* 緑 */
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
}
.tasukiG span::before {/* 緑 */
  border-left: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}
.tasukiG span::after {/* 緑 */
  border-right: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}

POPULAR

CODE

HTML


<div class="box1">
   <div class="tasuki tasukiR tasukiRed"><span>POPULAR</span></div>
   <div>
</div>

Javascript


// 下記を読みこませておく！

CSS


.box1 {
  margin-top:20px;
  min-height: 100px;
  height: auto !important;
  height: 100px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}


.tasuki {
  position: absolute;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.tasukiL {
  left: -5px;
}
.tasukiR {
  right: -5px;
}

.tasuki span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  width: 100px;
  display: block;
  top: 19px;
  background: #79A70A;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
}
.tasukiL span {/* 左位置 */
  left: -21px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.tasukiR span {/* 右位置 */
  right: -21px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.tasukiG span {/* 緑 */
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
}
.tasukiRed span {/* 赤 */
  background: linear-gradient(#F70505 0%, #8F0808 100%);
}
.tasukiB span {/* 青 */
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
}
.tasukiGold span {/* 黄色系 */
  background: linear-gradient(#F79E05 0%, #8F5408 100%);
}

.tasuki span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: -1;
}
.tasukiG span::before {/* 緑 */
  border-left: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}
.tasukiRed span::before {/* 赤 */
  border-left: 3px solid #8F0808;
  border-top: 3px solid #8F0808;
}
.tasukiB span::before {/* 青 */
  border-left: 3px solid #1e5799;
  border-top: 3px solid #1e5799;
}
.tasukiGold span::before {/* 黄色系 */
  border-left: 3px solid #8F5408;
  border-top: 3px solid #8F5408;
}
.tasuki span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  z-index: -1;
}
.tasukiG span::after {/* 緑 */
  border-right: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}
.tasukiRed span::after {/* 赤 */
  border-right: 3px solid #8F0808;
  border-top: 3px solid #8F0808;
}
.tasukiB span::after {/* 青 */
  border-right: 3px solid #1e5799;
  border-top: 3px solid #1e5799;
}
.tasukiGold span::after {/* 黄色系 */
  border-right: 3px solid #8F5408;
  border-top: 3px solid #8F5408;
}
.tasukiRp{
  padding-right: 33px !important;
  padding-left:10px !important;
  padding-top:15px !important;
  padding-bottom: 10px !important;
  font-size:100%;
}
.tasukiLp{
  padding-right: 10px !important;
  padding-left: 39px !important;
  padding-top:15px !important;
  padding-bottom: 10px !important;
  font-size:100%;
}

POPULAR

注目！！

坊ちゃんより2

CODE

HTML


   <div class="decB">
    <h4>坊ちゃんより</h4>
    <img src="../images/mutoh.gif" style="float:right;margin-left:5px;">
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:120,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
     <p>学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。
     </p>
    </div>
   </div>
   <div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


a.truncate_more_link{
    float:right;
    margin-top:-13px;

    margin-right:10px;
}
/*青*/
.decB {
    padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #000000;/*文字色*/
    background: #fcfcf1;
    border: solid 4px #0d5da0;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.decB p {
    margin: 0; 
    padding: 0;
    font-weight: normal;
}

水色の斜線の背景のボックス

注目！！

坊ちゃんより

　吾輩は猫である。名前はまだ無い。　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。

CODE

HTML


   <div class="divWaterS3">
   <h3>坊ちゃんより</h3>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>　吾輩は猫である。名前はまだ無い。
   　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。
       </p>
    </div>
   </div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.divWaterS3 {
    padding: 0.5em 1em;
    margin: 1em 0;
    color: black;
    background: lightcyan;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d6eaff 3px, #d6eaff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d6eaff 3px, #d6eaff 7px);
    box-shadow: 0px 0px 0px 5px #d6eaff;
    border: dashed 2px darkblue;
    border-radius: 5px;
}
.divWaterS3 p {
    margin: 0; 
    padding: 0;
}

青地にステッチのボックス

注目！！

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。

CODE

HTML


   <div class="divBlueS">
   <h3>吾輩は猫である</h3>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
     <p>
          吾輩は猫である。名前はまだ無い。
    どこで生れたかとんと見当がつかぬ。
   何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している
   。吾輩はここで始めて人間というものを見た。
   しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
   この書生というのは時々我々を捕えて煮て食うという話である。
   しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
   ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
   掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。
   この時妙なものだと思った感じが今でも残っている。
     </p>
    </div>
   </div>
   <div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.divBlueS { 
  margin: 15px 0 15px;
  padding: 1em 1em;
  background:#274a78;
  color:#f8fbf8;
  box-shadow: 0 0 3px 3px #274a78;
  border: 2px dashed #f8fbf8;
  border-radius:5px;
}
.divBlueS h3{
  color:#ff55aa;
}
.divBlueS a{
  color:#ff55aa;
  font-weight:bold;
}

青のタイトル欄付きボックス

吾輩は猫である

CODE

HTML


   <div class="divBlueT">
   <h3 class="divBlueT-title">吾輩は猫である</h3>
   <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>吾輩は猫である。名前はまだ無い。
   　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。<br />
       </p>
    </div>
   </div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.divBlueT {
    margin: 1em 0;
    border-right: solid 1px darkblue;/*線*/
    border-bottom: solid 1px darkblue;/*線*/
    border-left: solid 1px darkblue;/*線*/
    background: aliceblue;
    border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    -webkit-border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
    -moz-border-radius:  0px 0px 5px 5px / 0px 0px 5px 5px;

}
.divBlueT .divBlueT-title {
    font-size: 1.2em;
    line-height:2em;
    background: darkblue;
    padding: 4px 4px 4px 15px;
   /* 時計回りに上、右、下、左*/
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;

}
.divBlueT p {
    padding: 5px 15px;
    margin: 0;
}
.divBlueT a{
    margin-top:-20px;
}

青のタイトル欄付きボックス2

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。

CODE

HTML


   <div class="divBlueT2">
    <div class="divBlueT2-title">吾輩は猫である</div>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
    <p>吾輩は猫である。名前はまだ無い。
   どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。</p>
    </div>
   </div>
   <div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.divBlueT2 {
    margin: 1em 0;
    background: aliceblue;
    border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    -webkit-border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
    -moz-border-radius:  0px 0px 5px 5px / 0px 0px 5px 5px;

}
.divBlueT2 .divBlueT2-title {
    font-size: 1.2em;
    background: royalblue;
    padding: 4px 4px 4px 15px;
   /* 時計回りに上、右、下、左*/
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 5px 5px 0px 0px / 5px 5px 0px 0px;
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    -webkit-border-radius: 5px 5px 0px 0px / 5px 5px 0px 0px;
    -moz-border-radius:  5px 5px 0px 0px / 5px 5px 0px 0px;
}
.divBlueT2 p {
    padding: 15px 20px;
    margin: 0;
}
.divBlueT2 a{
    margin-top:-20px;
}

青の見出し付きボックス

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。

CODE

HTML


   <div class="midashiBoxB">
    <span class="midashiBox-title">吾輩は猫である</span>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。</p>
     </div>
   </div>
   <div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.midashiBoxB {
    position: relative;
    margin: 2.5em 0 1em;
    padding: 0.5em 1em;
    background:#fcfcf1;
    border: solid 3px mediumblue;
}
.midashiBoxB .midashiBoxB-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: mediumblue;
    color: #ffffff;
    font-eight: bold;
    border-radius: 5px 5px 0 0;
}
.midashiBoxB p {
    margin: 0; 
    padding: 0;
}

青の見出し付きボックス2

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。

CODE

HTML


   <div class="midashiBoxB2">
    <span class="midashiBoxB2-title">吾輩は猫である</span>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。</p>
     </div>
   </div>
   <div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.midashiBoxB2 {
    position: relative;
    margin: 1em 0;
    padding: 25px 10px 7px;
    background:ghostwhite;
    border: solid 2px royalblue;
}
.midashiBoxB2 .midashiBoxB2-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: royalblue;
    color: #ffffff;
    font-weight: bold;
}
.midashiBoxB2 p {
    margin: 5px 0 5px 0; 
    padding: 0;
}

fieldset風の囲みボックス

坊ちゃんより

CODE

HTML


   <div class="fsetBoxB">
    <p><span class="fsetBoxB-title">坊ちゃんより</span></p>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
     <p>
     学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。
     </p>
     </div>
   </div>

Javascript


// 下記を読みこませておく！
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>

CSS


.fsetBoxB {
    position: relative;
    margin: 1em 0;
    padding: 0.5em 0.5em;
    border: solid 3px mediumblue;
    border-radius: 8px;
    background:ghostwhite;
}
.fsetBoxB-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 120%;
    background: #FFF;
    color: mediumblue;
    font-weight: bold;
}
.fsetBoxB p {
    margin: 5px 0 5px 0; 
    padding: 0;
}