【CSS】要素のリサイズを可能にしてみました
どうも!LSSです!!
以前に、様々な「ページ(記事)内に文字を隠す」方法を書いていましたが、今回もそんなひとつ。
通常、Webページ内の要素(画像・段落など)はページ記述者が指定したサイズ(指定していなければデフォルトのサイズ)で固定されて表示されますが、CSSには
「ユーザー(読者)が自由にサイズ変更できるようにする」
という指定があります。
今回はそれを利用して「最初は指定したサイズで表示され、ユーザーがサイズ変更で大きくする事で中身が見えるようにする」コードです。
※追記!スマホだと操作しづらかったり、出来なかったりする場合もあるようです。
試してみた範囲では、「Androidスマホ+はてなアプリ→右下角を捉えにくいがなんとか」「iPhone+はてなアプリ or Chrome or Safari→いずれも試みるもできず」
【JavaScript】iPhoneでも要素のリサイズ - Little Strange Software
↑別記事にて、強引にJavaScriptでiPhoneでも要素リサイズできるものを作ってみました。
リサイズ可能
↑の四角の右下をドラッグで動かす事で、大きくする事ができます。
コード
<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サンプル】隠れた文字を照らし出すサーチライト【小ネタ】
【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】
などなど、これまで考えてきました。
「ネタバレOKな人だけ見てね」や「クイズの答え・ヒント」、「詳しく書くと長くなるけど、詳しく知りたい人はこちら」などの場合に使えますね^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^