文字などの基点変更

質問

ＣＳＳで文字や画像などさまざまな要素の位置指定をしますが。

基点が左上しか知らないので、それでやってきましたが、
ＣＡＤのように基点を変えれたら、このあたり何倍も楽と思います。

楽というより合理的です。いつでも左上というのはなんともいえないですね。

この技術がなかなか調べられません。

回答No.4

15mm · ベストアンサー

全体の基点ではなく、個々の基点ということですか？

cssでやると、
<img style="position:absolute;top:50px;left:50px;">
<img style="position:absolute;top:50px;left:50px;margin:-10px 0 0 -10px;">
このようにleft,topが同じでも表示位置が変わる感じですかね？

文字列の中心が、なんてのもやってみました
<div style="position:absolute;text-align:center;width:100px;margin-left:-50px;left:100px">文字</div>

因に座標指定でのデザインなら最初からFlashのほうが効率的ですし、
Flashをかじっただけの人でも基点の概念はきっとあります。

cssには回転処理もありませんし、また見当違いかもしれないですが。

＞対面だとメモ書きするのですが。
OKWave系列ですから画像の添付ができるはずです。
大雑把でもいいので付けてみると意図が伝わります。

余談：Ｈｔｍｌだけの人・・・ではないのですが。。

お礼

ありがとうございます。

補足

ありがとうございます。

＞余談：Ｈｔｍｌだけの人・・・ではないのですが。。
失礼。

例えば四角の画像だと、四隅がありますが、
この四隅のどれを基準にするか任意に選ぶことはできますか。

もっと言えば、例えば縦１０ＰＸ、横１０ＰＸの画像だと、
１００ＰＸを任意選んで基準にできるなどできればいいですね。
でも２、３週間ｈｔｍｌやってますｇ、本でもネットでも
聞いたことないので、たぶんないのでしょうね。

回答No.5

15mm

痛快な回答ではないので書き込みを控えていましたが、
「四隅のいずれか」という自動的な処理を含むcssの記述はありません。
各々の要素に対して基点の座標を任意に指定するほか無いようです。
因に10px-10pxの画像でも内部100pxに限らず、四角の領域外でもＯＫです。

全ての要素を画面右上（、右下、左下）からの座標で指定するならば可能ですが、実用的ではありませんね。

配置する要素のサイズに統一性が無いのであればひとつひとつ指定してもいいでしょう。

全てのユーザに、という意図が無ければjavascriptを使って四隅の「計算」を行うことはできます。
cssはかなり多くのユーザが有効にしてるでしょうからその点で劣るかもしれません。

お礼

参考にさせていただきます。
ありがとうございました。

補足

お忙しい中、ありがとうございます。
抽象的な回答でなく、具体例をいただき、勉強になりました。

回答No.3

abril

> No.１の人も同じでＨｔｍｌだけの人は同じ勘違いをするようですね。

「勘違い」したNo.1です。

> 質問内容が伝わっておりません。欲しい回答はそいうことではないのですよ。

あれだけ漠然とした質問の仕方をしておいて（独り言のレベルですね）…その言い草はいかがなものでしょう。
ご自分の質問の仕方にも問題があったと少しは省みて頂ければ幸いなのですが。

> 私のようにＣＡＤ、イラストレーターとＨＴＭの両方をされる方だと、質問の内容がピンとくると思うのですが。

では最初からそうお書きになったらいかがですか？その方が回答側も質問側も無駄な手間が省けるでしょう。
ご自身のかなり説明不足な質問の文章をして回答者に「ピンとくる」事を期待するのは少々虫が良すぎると言うものでは。
＃ちなみにCADは未経験ですが、Illustrator、Photoshopぐらいは何年も使ってます。HTMLだけと決めつけないで下さい。この職種何年もやってる身であれば、それらのツールはある程度は扱えるのが当たり前ですから。

> 言葉じゃ難しいですね。対面だとメモ書きするのですが。

今、ここのシステムは画像添付までできる様になっているのですから、そこまで具体的な限定されたお答えを求めているのであれば質問の仕方をもう少し考えられた方が賢明かと思われます。仰る通り、「言葉」のみで伝えるのは「難しい」事もあるのですから。

お役に立てず、大変失礼致しました。より最適な回答者様からのお答えがつきます様に。

回答No.2

15mm

ＣＡＤはあまり使ったこと無いですが、Flashのmcをイメージして基点のようなものを作り出してみました

<div style="position:absolute;left:100px;top:100px;border-left: #000 1px solid;border-top:#000 1px solid;">
<img style="position:absolute;margin-left:50px;margin-top:10px;">
<img style="position:absolute;margin-left:20px;margin-top:-50px;">このdivの左上が基点→x<br>↓<br>y</div>

<div>のleft,topが基点の座標
<div>内各要素のmargin-left,margin-topが要素の<div>に対する相対座標
<div>のborderはイメージをつかみやすいように付けたものです（座標軸に見えればうれしいです）

marginのマイナス指定は、調べていませんが、ブラウザによって動作が違うかもしれません。

作業としては効率的でしょうが、htmlの文章構造が無視されてる感じなので自分でも疑わしい技です。

補足

ご回答ありがとうございます。

私は先月からhtmlを始めましたが、回答の方法は既に思いつきでやってます。
絶対座標を任意にいくつでも作れるので便利なのと、
グループ化して複数要素をまとめて操作できるからです。
私の場合はＣＳＳを使って操作してます。

余談はそのくらいで、本題に入りたいと思います。
結論から言いますと、申し訳ありませんが、質問内容が伝わっておりません。
欲しい回答はそいうことではないのですよ。

ＣＡＤを例え話しに出しましたが、別にイラストレーターでも同じことですが。

おそらく、私のようにＣＡＤ、イラストレーターとＨＴＭの両方をされる方だと、
質問の内容がピンとくると思うのですが。

No.１の人も同じでＨｔｍｌだけの人は同じ勘違いをするようですね。

言葉じゃ難しいですね。対面だとメモ書きするのですが。

回答No.1

abril

positionプロパティがstatic以外であれば、top, left, bottom, rightの各プロパティで調整できますが。
また、背景画像であれば、background-posiitonプロパティでtop, left, bottom, rightの値で描画開始位置を決められます。

> ＣＡＤのように基点を変えれたら、このあたり何倍も楽と思います。
> 楽というより合理的です。

CADで作るものとは全く性質が異なりますから…Webコンテンツの性質を良く理解した上でCSSを適切に使いこなせる様になればまた違う感想をお持ちになるかもしれません。