参照禁止！らくがきだべ・・・: HTML アーカイブ

2023年11月02日

画像レティナ関連

投稿者 muuming : 11:28

2020年10月11日

drag&drop系のメモ

※動作は試してない。
1,移動元の要素に

draggable="true"
で要素をドラッグ可能にする

２、移動先に
dropzone="copy"
ドラッグされるデータのコピーがドロップされる
dropzone="move"
ドラッグされるデータが移動してドロップされる
dropzone="link"
ドラッグされるデータ元へのリンクがドロップされる

３、ｊｓで　ドラッグ開始時にDataTransferというオブジェクトにドラッグするデータをセット

$("#h").on("dragstart",function(e){
e.dataTransfer.setData("id", e.target.id);
});

４、ドロップ時
$("#移動先要素").on("dragover", function(e){
e.preventDefault();//元からある動作無し　（必須ではない？）
e..originalEvent.stopPropagation();//バブリング無し（必須ではない？）
var id_name = event.dataTransfer.getData("id");
});

とおもったけど、なんかおかしいというか、思ってるのと違うような…

dropzone="copy"　って動いてないような？というか使い方ちがうのか？

結局ondropイベントが登録されてる場所にドロップ可能になってるような？？

このあたり、よーわからん。

※dragover　イベントの登録も必要なようだ。

$("body").on('dragover', "#otosubasyo", function () {
return false;
});

-----------------------------

ゴチャゴチャ書いたが以下に落ち着いた

drag&dropではなくdrag&drop風の動作
移動でつかめる部分はcssでcursor:moveに
移動でつかめる部分を mousedownで、移動する部分をposition:rerativeに
mousedownしたらマウスの初期位置を取得するのと何かしら移動中のフラグをつける
bodyのmousemoveイベントで移動中であればマウスの移動距離を取得
初期値と現在地の違いから移動する部分のtopとleftを変更でマウスについてくる感じになる
bodyのmouseupイベントで移動中であれば移動中フラグ取り消しdropする範囲内であればdrop処理する
移動でつかめる部分を元の位置に戻す場合はposition　left topを元に戻す

---------------------------------
が　これだとスクロールした場合など微妙にずれるので・・・
マウスダウンした時に要素のどの座標をつかんでいるかを記録
offset().top -e.pageX
mousemoveでマウスの座標と最初に記録した座標から現在のoffset({top:....,left:.... })を設定

これでずれない！

投稿者 muuming : 05:53

2017年06月14日

SVGからcanvasへpathで描画

制御点の位置を算出して　 ctx.bezierCurveToでパス引いてって方法を探ってたんですが、結局・・・・SVGとcanvasは既に換算できる方法が用意されていた・・・！

var obj1 = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.stroke(obj1);

これだけ org

投稿者 muuming : 18:19

2017年06月13日

SVGのパラメーター

SVG画像をイラレ等で書き出すと

ぱ
pathのパラメーターがハイフン入った物があったりしてるが、

0-1.2,3,4 とか成っているような感じ

多分おそらく
0,-1,2,3,4 とカンマが省略できる部分を省略してると思う。多分だけど・・・

large-arc-flag と sweep-flag
長弦　短弦　右左曲がりのパラメータの違いは以下参照

あとa と　A等など、大文字小文字で指定できるが、は同じなのかと思ってたが、aは座標指定が相対、Aは座標指定が絶対らすい

https://triple-underscore.github.io/SVG11/paths.html#PathDataCubicBezierCommands

SVGコマンドとcanvasのコマンドの対応表がのってるページ

投稿者 muuming : 17:45

2016年10月29日

ブラウザに形式チェックさせない


input formnovalidate　とすれば形式チェックしない

投稿者 muuming : 12:51

2013年09月04日

スマホページ作成アレコレ

とりあえず、iphoneを縦に使った場合の横幅は320px 横に使ったら480px
んだけど、スマホがこの横幅ってのは無いから、ある程度でか目に作って縮小させるのが得策？

■viewportについて(ぱくり)

プロパティ	値
プロパティ	内容	単位・指定方法	デフォルト	許容範囲	その他
width	Viewportの横幅	px	980px	200～10,000px	特別な値として「device-width^*」の指定が可能
height	Viewportの縦幅	px	横幅とアスペクト比から計算される値	200～10,000px	特別な値として「device-height^*」の指定が可能
initial-scale	倍率の初期値	乗数で指定（例：120%の場合は1.2）	表示範囲から計算される値	minimum-scale（後述）～maximum-scale（後述）
minimum-scale	倍率の最小値	乗数で指定	0.25	0～10
maximum-scale	倍率の最大値	乗数で指定	1.6	0～10
user-scalable	拡大縮小の可否	--（yes / no）	yes	--	no（拡大縮小不可）にすることでフォーム入力時のスクロールも不可

ある程度の幅でつくってviewportのwidthをコンテンツ幅にしとけばいいんじゃね？

投稿者 muuming : 10:52 | コメント (0)

2013年08月01日

cssテーブルっぽく

うほうほ　テーブルじゃなくともテーブルっぽくレイアウトできるのね。




ul {

	display: table;

	width: 100%;

	table-layout: fixed;

}

li {

	display: table-cell;

}

a {

	display: block;

	color: #000;

	text-align: center;

	text-decoration: none;

}

li:nth-child(1) a { border-bottom: 4px solid #00c; }

li:nth-child(2) a { border-bottom: 4px solid #c00; }

li:nth-child(3) a { border-bottom: 4px solid #fc0; }

投稿者 muuming : 17:43 | コメント (0)

2013年07月31日

縦向き横向きCSS

@media screen and (orientation:portrait){ 縦長画面向けスタイル }

@media screen and (orientation:landscape){
横長画面向けスタイル
}
今回の新着商品では各商品情報の固まりを1つのdiv（.product-inline-block）で囲みそれらをインラインブロック要素とすることで横に並ぶようにしています。このとき縦画面では横幅144pxなので3つ目の商品情報は画面幅320pxに収まらないため折り返して表示されます。横画面では横幅を96pxにしています。これで折り返されることなく横一列に並ぶわけです。

投稿者 muuming : 18:49 | コメント (0)

2010年11月17日

cssの優先順位

p,h1　などのタグ１ポイント
.sample（classの場合）１０ポイント
#sample（IDの場合）１００ポイント

p.sample＝１＋１０＝１１ポイント
.sample p＝１０＋１＝１１ポイント
.sample li p＝１０＋１＋１＝１２ポイント
#sample .sample＝１００＋１０＝１１０ポイント
#sample .sample p＝１００＋１０＋１＝１１１ポイント

ポイントが高いの優先

投稿者 muuming : 13:37 | コメント (0)