2016-12-02

PHP リンクからPOSTデータを渡すには

data

使用する場合と致しましては、、

リンクのデザインを保持したままPOSTデータを送信したーい!という時に使っちゃいます。

(ボタンを使用しない)

 

(例)index.phpへ送信する場合


<form name="form1" method="POST" action="index.php" >
<a href="javascript:document.form1.submit()">Submit</A>
<input type="hidden" name="hogehoge_status" value="1">
</form>

普通にformでかこってあげます。

そして、リンクの<a href =””>のなかにJavaScriptの処理をいれることで

リンクをクリックすると同時にPOSTデータを送ることができます。

author :: shino / Category :: HTML5,Javascript,technology / Date :: 2016-12-02 / Comment :: No Comments »

2016-07-21

<article></article>タグ:HTML5

WEB担当の福原です。
さてさて、今回は『<article>』タグです。

<article>タグは、内容が単体で完結するセクションであることを示す際に使用。
例えば、ブログのエントリ、コメントなどです。

<article>を入れ子にして使用する場合、
内側の<article>の内容は、原則として外側の<article>の内容に関連していることになる。

例えば、<article>タグでくくられたブログのエントリの内側に、
さらに<article>タグでくくられたユーザーコメントを入れ子に配置することで、そのコメントがそのブログエントリに対して投稿されたものであることを示す。

(さらに…)

author :: hiroki / Category :: HTML5 / Date :: 2016-07-21 / Comment :: No Comments »

2016-07-14

<header></header>タグ:HTML5

WEB担当の福原です。久々の投稿です…
折角なので、HTML5のタグを書いていこうかなと思います。
今回は『<header>』タグについて。
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用。
文書のヘッダ情報を表す<head>タグと間違えないように!

(さらに…)

author :: hiroki / Category :: HTML5 / Date :: 2016-07-14 / Comment :: No Comments »

2016-06-21

webで縦書きを表現する方法

CSSで対応する方法と画像に変換する方法があります。

CSSの場合は、こちらのページに書いてありました。「テキストを縦書きに表示する
http://technique.eweb-design.com/0402_tt.html

CSSにて

以下の項目を使うことで実現できます。ただし、IE限定とのことですが、最近のブラウザでは対応しているものが多いようです。

writing-mode: tb-rl;で文章を縦書きにしています。
direction: ltr;左から右にテキストを流しています。

 

ブラウザの差異を気にするようなら、画像を作るしかありません。

ということで、phpで画像に変換できるように作ってみました。

http://studio-q.link/tategaki/FireShot Capture 2 - 縦書き - http___studio-q.link_tategaki_

ゴシック、明朝体、フォントサイズ、1列(縦書きなので)に表示する文字数を指定できます。

出来たのはこんな感じ。
tategaki

詳しいコードを知りたい方は、コメントください。

 

#2017/12/20 更新

ソースコードを整形してから掲載しようと思いましたが、かなり遅くなっちゃってますがまだ整形してませんm(__)m

とりあえず、githubにアップしました。

https://github.com/fokazaki2/tategaki

 

author :: futoshi / Category :: CSS,HTML5,PHP,technology / Date :: 2016-06-21 / Comment :: 2 Comments »

2013-11-26

checkbox(or radio)のスタイルを変更するには?

checkboxradioHTMLのFORM要素のcheckbox(input type=checkbox)とradio(input type=radio)。
checkboxとradioの見た目を変更したいという要望がある。

スタイルシート(CSS)を用いれば可能かと思うが、このFORM要素は、CSSで変更できない。特にIE8以下は、完全に不可能です。
※CSS3から変更可能。

だけど、どうしてもデザイン的に変更させたい、というのであればいろんな手を使って実現させることは可能です。

ただ実現させるのではなくて、FORMの要素としてもちゃんとチェックされている、選択されているという状態であることも大事です。
phpなどでサーバ側でチェックされている状態が受け取ることができることが重要

実現方法を簡単に説明すると、チェックボックスを隠し、チェックされていない画像、チェックされた画像を用意し切り替える。

ということになります。

もうちょっと具体的には、以下。

  1. チェックボックスチェックされた画像、チェックが外れた画像を用意。
  2. チェックボックスを消します。display:noneにて。
  3. 1で用意した画像をLABELタグに配置。(background-image)
  4. CSS内で、checkedセレクタにてチェックされた時の画像に切り替えるようにする。

通常、checkboxやradioボタンについては、LABELタグを用います。そのLABELタグに対してデザインされたチェックボックスの画像を用意し、チェックされた時、チェックされないときをCSSのセレクタを利用して定義するのです。そうすることでチェックボックスを疑似的にデザインしたことになります。LABELをクリックしているので、当然、input type=checkboxのチェック状態も変更され、サーバ側での状態取得も可能です。

ここで問題なのは、IE8。IE8には、input[type=checkbox]:checkedというcheckedセレクタがありません。IE9以降対応でよければ問題ないのですが、IE8に対応させるためにはどうすればいいのか。
これはもう力技ということになります。クリックイベントを用意して、checkboxをクリックする処理を追加してあげる必要がありますね。jQueryにて。
ただ、この処理を追加するならば、CSSのcheckedセレクタは不要ですね。ぜんぶこっちで動作するようになりますので。

以下、jQueryのコードです。※jQueryは1.x系ですよ。IE8対応なので。

$(function(){
	$('#labelCheckbox1').mouseup(function(){
		$('#checkbox1').click();
	});
});

author :: futoshi / Category :: CSS,HTML5,jQuery,technology / Date :: 2013-11-26 / Comment :: 1 Comment »

2013-11-20

Excelからjson形式へ変換 by Mr. Data Converter

Mr. Data Converter

mrdataconverter

ウェブシステムを作っていてサンプルデータを作ってモック作りたい!ということありませんか?
そんなとき、2,3件のデータを用意するのは手作業が早いけど、もっと10件とか20件のデータを扱う場合、json形式だったりxmlだったり用意するのが大変です。
そんなときに便利なサイトがありました。

Mr. Data Converter
http://shancarter.github.io/mr-data-converter/

すばらしいです。
XMLやJSON形式以外にももっとあります。ASP/VBScriptやphpの場合は、言語の配列Arrayに入れてくれます。

  • Actionscript
  • ASP/VBScript
  • HTML
  • JSON – Properties
  • JSON – Column Arrays
  • JSON – Row Arrays
  • MySQL
  • PHP
  • Python – Dict
  • Ruby
  • XML – Properties
  • XML – Nodes
  • XML – Illustrator

変換元のデータは、CSVでもOKですが、便利なのはExcelで表を作ってそれをコピーして貼り付けすればよいです。
Excel上でコピーされたデータは、クリップボード上ではセル間がtabで区切られた状態となっております。
もちろん、Mr. Data Cenverterは、tab区切りにも対応しています。

あとは、Output asで出力形式を選べば出力OK。
簡単ですね。

各言語の配列の持ち方などその言語、構造を初めて学ぶときにも、Excel上のこの表は、どのような表現になるのかテストするの飲みよいでしょう。

 

author :: futoshi / Category :: ASP.NET,Blog,Flash,HTML5,iOS,Javascript,PHP,technology / Date :: 2013-11-20 / Comment :: 1 Comment »

PR