# slabTextを使ってレスポンシブかつ迫力ある見出しを作ろう！

**URL:** https://community.cybozu.dev/t/topic/3175
**Category:** kintone 開発相談
**Created:** [2018 年 6 月 26 日午後 3:00 UTC](https://community.cybozu.dev/t/topic/3175 "2018-06-26T15:00:00Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)
#### Post date: [2018 年 6 月 26 日午後 3:00 UTC](https://community.cybozu.dev/t/topic/3175/1 "2018-06-26T15:00:00Z")

</div>

[slabText](https://github.com/freqdec/slabText)は、行ごとにちょうど幅いっぱいの表示となる文字サイズに調整してくれる[jQuery](http://jquery.com/)プラグインです。 レスポンシブなページの見出しを作る際に便利です。 slabText及びjQueryは[Cybozu CDN](https://community.cybozu.dev/hc/ja/articles/202960194)にてサポートされているので、ご利用ください。

## サンプル

複数行に分けたブログのタイトルを、それぞれ要素幅いっぱいに表示します。

コード

#### HTML

```html
<div id="blogs"></div>
<script type="text/html" id="lodash_template">
  <div class="blog">
    <div class="blog_title"><%=title%></div>
    <div class="blog_text"><%=text%></div>
  </div>
</script>

```

#### CSS

```css
.blog{
  width:50vw;
  margin:auto;
  padding:20px;
}

```

#### JavaScript

```javascript
(function () {
  "use strict";
  kintone.events.on(["app.record.index.show"], function (event) {
    if (event.viewName !== "ブログ") return event;
    $("#blogs").html(
      event.records.reduce(function (html, record) {
        return (
          html +
          _.template($("#lodashtemplate").html())({
            title: record.タイトル.value
              .split("")
              .reduce(function (title, row) {
                return title + '<div class="blogtitlerow">' + row + "</div>";
              }, ""),
            text: record.本文.value,
          })
        );
      }, "")
    );
    $(".blogtitlerow").slabText();
    return event;
  });
})();

```

※サンプルコードでは、[lodash](https://github.com/lodash/lodash)を利用しております。&nbsp;[Cybozu CDN](https://community.cybozu.dev/hc/ja/articles/202960194)からご利用ください。