スポンサーリンク

css

Webページの「コピペ禁止」を解除・回避するJavaScriptコード。スクリプト有効のまま,ブラウザ上で右クリック・テキスト選択の禁止タグを迂回する

Webページ上で,「コピペ禁止」を解除するJavaScriptコード。 ブラウザ上で,マウスで文章を選択して,右クリック→コピー という操作は,HTML側で禁止できる。Webサイトの内容が, コピペで無断転載されるのを防ぐためだ。 しかし,その禁止をかいくぐる方法…

CSSで,画面の横幅(width)と要素の高さ(height)をパーセント指定で連動させる方法 (動作サンプルつき。親と子のタテとヨコを連動)

問題 CSSで「親の横幅を,子の横幅に」連動させるのは簡単だ。単純にパーセント指定すればよい。 では,「親の横幅を,子の縦幅に」連動させるにはどうするか?(JavaScriptを使ってはいけない。) 解答例 横をタテに・・・という事は

CSSだけで「横並び」と「縦並び」を切り替え可能なテーブルを,dl・dd・dtタグで作ろう (table要素を使わない,変更しやすい表組みレイアウトの実装方法)

HTML上で表組みを実装する際には,table要素を使うのが一番手っ取り早い。 しかし,tableで作った表組みは,変更しづらい。(メンテ性がよくない) 例を挙げよう。下記のように,「項目名」と「項目の説明」が横並びで並んだ表組みがあるとする。 この表組み…

Webサイトの画像に文字を埋め込もうとする人がいたら,フォントのライセンス問題を知ってもらうために見せるページ (MS明朝・MSゴシックは,商用利用可能か?)

フォントには,著作権がある。 Webページ上でテキストとして表示するのは問題ないが,画像の中に文字列を埋め込むと,フォントのライセンス違反になる場合がある。この点は意外と知られていない。 フォントごとに,ライセンスの内容は異なる。例えばWindows…

HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階)

スキルチェックの目次へ HTMLおよびスタイルシート(CSS)を利用したWebページ制作の,簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。これは,「Webページをコーディングして作る人」全般に当てはまる。 …

CSSの動かないコード(中級編) Windowsのデスクトップテーマが「XP」の時,ボタンに背景画像を表示したい

クイズ… 下記の HTML+CSS が,意図した通りに表示されないのはどうしてですか。(制限時間1分) やりたい事: ボタンの背景に,画像を表示したい。 <style> input { /* ボタンの背景に画像を表示する */ background-image : url(fuga.PNG); /* 背景画像は繰り返さ</style>…

なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー)

CSSを「なんとなく」知っていて,「なんとなく」使っている,というケースがある。 そういう場合,思わぬところでレイアウトが崩れ,要素の正確なポジショニングができず,「なんとなく」ずっと悩み続けることになる。 その原因は,CSSの中級のノウハウが足…

サクラエディタのマクロで,CSSを自動整形しよう

バッチのまとめTOPへ サクラエディタ上で,CSSを自動整形したい。 例えば,エディタ上に div.hatena-asin-recommend { margin:4px 10px; padding:5px 4px; text-align:left; width:96%; } div.hatena-asin-recommend a { border:medium none; text-decoratio…

 グラデーションや影を,JavaScriptで付ける方法 (画像を使わず jQuery だけでクロスブラウザなWebデザイン)

HTML要素の背景にグラデーションをかけたい場合,色つきの画像をそのボックス要素の大きさに合わせて作り,背景として指定する方法がある。 しかし画像をいちいち個別に作るのは面倒だ。 (CSSで背景画像のサイズを自動調整する方法は無い。貼る個所のサイズ…