Q&A
| [入力値 ] | または |[ 入力値 ] | どちらでしょう。 / つまり`textarea` の位置が親要素の中央ですか？それとも`textarea`の中身が中央ですか？あまり回答には関係ないかもしれませんが一応。読みづらくてすみません。改行空白削除されて意味不明なメッセージになるようなので。
text-align:center で中央揃えされた textarea の先頭に別の文字列を追加する方法を探しています。
以下のようなイメージです。《》は常に中央揃えになっている想定です。
できれば、css3だけで表現したいのですがjsやAngularJSを使わないとできないでしょうか。
textareaのbefore属性で付与しようとしましたが上手くいきませんでした...
《 stap1. [textareaの値がここに出力される...] 》
| step1. [入力値 ] | です。分かりづらくてすみません...
あ、すみません、聞き方も悪かったようです。
|～|が親要素、[～]が textarea のつもりです。
| step1. [入力値 ] |だと step1. が textarea の外になりますが、仰りたいのは textarea 自体がその親要素の中央にある という意味でいいでしょうか。
回答2件
0
試していませんが、以下のようにするのがいいと思います。
・text-indentプロパティで、「step1. 」を表示するのに必要なスペースぶん、テキストエリア内の隙間を開ける。(仮に(n)pxとします。)
・textarea を一つの要素でラップして、その要素 (親) に::before擬似要素で"step1."を表示する
・擬似要素はdisplay: block;``float: left;``margin-right: -(n + textareaの左margin, padding, border の合計値)px``margin-top: (textareaの上margin, padding, border の合計値)px
なお擬似要素にfloatを使用することで他の要素に影響が生じる場合は、代わりにdisplay: inline-block;としてもいいです。
その代わり、親要素と子要素の間に HTML 上のホワイトスペースを入れずにコーディングする必要があります。
(開発環境のオートフォーマットなどで勝手にスペースや改行を入れられたりするので注意)
投稿2015/11/04 04:46
総合スコア790
すみません、ご教授いただいたようにコーディングしているのですが思い通りにいきません... お手数ですが簡単なデモを拝見したいのですが可能でしょうか。よろしくお願いいたします。
しばらく手が放せないので、途中経過をお見せいただけますか。
惜しいところまで行っていればお互い早く終わると思いますので。
(僕もコーディングせず説明したので実物を見たら実は間違っていたことに気づくかもしれません)
ご返信が遅くなりすみません。つくってみました。
仰っていたように実装できましたが、もしかしたら私の説明不足でした...
textareaの値とbefore属性の値を含め、中央揃えをさせたいです。
cssだけで実現したいのですが不可能でしょうか...？
http://jsfiddle.net/epwxe9L8/
《 stap1. [textareaの値です] 》
《 stap1. [textareaの値はxxxxxです] 》
《 stap1. [textareaの値はxxxxxxxxxxxxxxxです] 》
※《 》はすべて中央揃えです
0
css3に詳しくないので調べてみたのですがcss脱初心者？ :before :after擬似要素の使い方とか基本的なことを見る限りtextareaの文字列はタグの内側なのでできそうにありませんね。
jqueryを使って、<textarea>値</textarea>の値の読み書きです。のようにJQueryを使えば比較的簡単に実現できます。
こんな感じですよね？
投稿2015/11/03 16:19
総合スコア1825
ご回答ありがとうございます。ご提示いただいたものだと、step1. まで削除対象になってしまします... step1. の部分は常に残して置いた状態にしておきたいです...
あなたの回答
tips
プレビュー
