CATEGORY "HTML・JS・CSS"

(35 件中 1 件目〜 5 件目を表示中)
1234567next>>

マトリックス風な画面を動的に生成するページ

マトリックス風な画面をHTML、Javascript、CSSのみで作ることができる。

ページにアクセスするだけでこのように文字が流れる。



本家にいくと余計なゴミが表示されてしまうので該当コード部分のみのページを用意した。
■マトリックス風な画面のページ
http://xirasaya.com/demo/15/

うまく画面が表示されない場合は別のブラウザで試すこと。
自分の環境ではIEだとJavasエラーが発生してうまく動かなかったがFirefoxとChromeではうまく動いた。



■マトリックス風なページのコード

<body style=...
...
...
read more >>>

[CSS]checkboxとテキストの位置がずれるのを直す

HTMLを普通に組んでいるとチェックボックスとかラジオボタンがテキストとずれる。

だからinput要素のチェックボックスとテキストとのずれをCSSで調整する。


■CSSでチェックボックスのズレを調整する

input[type="checkbox"],
input[type="radio"] {
display: inline-block;
margin: 0 2px;
padding: 0;
vertical-align: middle;
position: relative;
top: -1...
...
...
read more >>>

[Javascript]ウィンドウを閉じるwindow.close()が効かない

開いたウィンドウを閉じるjavascriptのwindow.close()はブラウザによって効いたり効かなったりする。
だから使えない…と思っていた。そうちょっと前までは。


最近のブラウザだと以下のように書けば問題なく動くことがわかった。


■開いたウィンドウを閉じるスクリプト

<a href="javascript:window.open('about:blank','_self').close();">close</a>


試した環境は以下の通り。
・Firefox ESR 38.3.0
・GoogleChr...
...
...
read more >>>

[CSS]連番のIDやクラスをまとめて指定する書き方

連番になっているようなIDやクラスをCSSでまとめて指定する必要性が出てきた。


調べてみるとjavasと同じような指定の仕方でいけるようだ。
ということでメモ。



まずは連番IDを適当に作ってみる。

<html>
<body>
<div id="test_1">test_1</div><br />
<div id="test_2">test_2</div><br />
<div id="test...
...
...
read more >>>

本サイトのfont-familyを変更してみた

このサイトを作った頃はまだXPが現役だったんだけど、もはやそれも過去のものとなった。


以前は"MS Pゴシック"を優先フォントにしていたんだけど、
古いブラウザを切り捨てることができるようになったので改めてCSSを以下のように変更した。


■新しく設定したfont-family

html, body, input, select, textarea, button, p {
font-family: Verdana, Arial, Helvetica, "メイリオ", Meiryo, "ヒラギノ角ゴPro W3&q...
...
...
read more >>>

(35 件中 1 件目〜 5 件目を表示中)
1234567next>>