Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】要素のリサイズを可能にしてみました

 どうも!LSSです!!

 

以前に、様々な「ページ(記事)内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。

通常、Webページ内の要素(画像・段落など)はページ記述者が指定したサイズ(指定していなければデフォルトのサイズ)で固定されて表示されますが、CSSには
「ユーザー(読者)が自由にサイズ変更できるようにする」
という指定があります。

 

今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。

 

※追記!スマホだと操作しづらかったり、出来なかったりする場合もあるようです。
試してみた範囲では、「Androidスマホはてなアプリ→右下角を捉えにくいがなんとか」「iPhoneはてなアプリ or Chrome or Safari→いずれも試みるもできず」

【JavaScript】iPhoneでも要素のリサイズ - Little Strange Software

↑別記事にて、強引にJavaScriptiPhoneでも要素リサイズできるものを作ってみました。

 

 

リサイズ可能

大きさ自由自在!

 

↑の四角の右下をドラッグで動かす事で、大きくする事ができます。

 

 

コード

<div style="overflow: hidden; resize: both; border: 1px solid black; width: 1em; height: 1em;">中に入る文章など</div>

 

 

必須なプロパティは2つ

overflow: hidden;
resize: both;
border: 1px solid black;
width: 1em;
height: 1em;

の5つのプロパティを指定してます。

 

このうち、下3つは見た目に関わるもので、borderは枠線、widthは最初の幅(1emは1文字分を意味します)、heightは最初の高さです。

 

resize: both;

が「リサイズの許可指定」で「both」は「縦にも横にも変更可能」という指定になります。

他に、

  • none リサイズ不可
  • horizontal 横方向のみ変更可
  • vertical 縦方向のみ変更可

を指定する事ができます。(他にもありますが省略)

 

ところが、このresizeプロパティ、これ単体で指定しても変更できるようにならず、「overflowプロパティが『visible以外であること』」という条件がありますので、1行目に、

overflow: hidden;

を指定しています。
※overflowプロパティは「枠からはみだした部分をどうするか」を指定するプロパティで、hiddenの場合は「はみ出した部分は表示しない」という指定となります。

 

overflow: hidden;
resize: both;

で「リサイズを可能」にして、

border: 1px solid black;
width: 1em;
height: 1em;

で「枠線をつけ、最初のサイズをごくごく小さいものに」しているんですね。

 

 

resize:horizontalの場合

まるで巻物のような
要素になります。

 

コード

<div style="overflow: hidden; resize: horizontal; border: 1px solid black; width: 1em; height: 70px;">まるで巻物のような<br />要素になります。</div>

※途中で<br/>を入れると、改行になります。

 

 

resize: verticalの場合

読みたいだけ
縦に伸ばして
読む事ができますが
ページ自体の高さも
変わってくる
事になりますね。

 

コード

<div style="overflow: hidden; resize: vertical; border: 1px solid black; width: 280px; height: 1em;">中略</div>

 

 

他にもある、隠し文字

【CSSサンプル】ちょっと言いにくい話なんですけど…【小ネタ】

【CSS】カードをめくる その3 idを使わない版

【CSS】たたっ斬る!!【小ネタ】

余談:ハンバーガーメニューって

【CSSサンプル】隠れた文字を照らし出すサーチライト【小ネタ】

【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】

などなど、これまで考えてきました。

 

「ネタバレOKな人だけ見てね」や「クイズの答え・ヒント」、「詳しく書くと長くなるけど、詳しく知りたい人はこちら」などの場合に使えますね^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^