2013 8-9 勉強会

勉強会の概要は

  • メールフォームの注意点
  • css:opacityとrgbaの違い
  • ページ全体の背景に大きな画像を使いたい時のサイズはどれくらいが適切?
  • doctypeの書き方

でした。今日は久しぶりにsa-kaさんが参加されました。yukoさんはお盆でお休みです。

メールフォームの注意点

セキュリティに注意を払って、セキュアなフォームを公開しましょう。脆弱性のあるフォームを公開すると危険です。

XSS(クロスサイトスクリプティング)

XSSとは、人のフォームを勝手に使う手法。そのメールフォームを踏み台にしてたくさんのスパムメールを送られてしまうとか、アクセスしただけでjavascriptを走らされたりする等の危険があります。
参考:クロスサイトスクリプティング対策の基本(前編):クロスサイトスクリプティング脆弱性とは? – @IT
htmlspecialchar()関数や、$_SESSIONをちゃんと利用してセキュアなものを公開しましょう。

CSRF(クロスサイトリクエストフォージェリ)

CSRFとは、誘導用の無害に見えるページの中にiframeやimgタグなどで攻撃用のwebページを隠しておき、誘導用のページにアクセスするだけで、脆弱性のあるフォームなどに送信を行わせる行為。
パソコン遠隔操作事件が記憶に新しい。
Webの閲覧者として自衛するのは難しいが、サイトの制作者としては、リファラをチェックするなどして、それらのリクエストをはねつけるようにフォームを作らねばならない。

どうすればいいの?

セキュリティー的には自作するより、実績のあるライブラリを使った方が良い。

SSL(セキュアソケットレイヤー)

SSLをかける方が信頼感がある。入力した内容を暗号化して送信。
参考:ベリサイン
なお、SSL接続時には、http://が、https://になる。この時、ページ内の画像などがhttp://から呼ばれていると、ブラウザによっては、セキュリティの警告が表示されてしまう。
なので、cssや、js、imgなどのパスにフルパスが必要な際は、//から書いとくと良い。

/*こうではなくて*/
<img src=”http://example.com/images/hoge.jpg” alt=””>
/*こう書く*/
<img src=”//example.com/images/hoge.jpg” alt=””>

css:opacityとrgbaの違い

要素を透けさせるとき、opacityだと要素全体が透明になってしまう。
rgba()で透けさせれば要素の背景だけが透けるので、文字は透けない。
詳しくはこちら

ページ全体の背景に大きな画像を使いたい時のサイズはどれくらいが適切?

きれいな画像を出したければ、media queryでがんばる。
がんばった所で、きれいで大きな画像はやっぱり重い。が、以下の工夫でファイルサイズを小さくしながら、テスト表示してみて妥協点を探すと良い。質問者の真中さんは、実験して、ファイルサイズを比較してみると良いでしょう。

  • jpgならば圧縮率を上げる。高い圧縮率にすれば画像は荒れるがファイルサイズは縮減できる
  • 縦横サイズを小さくして、それを background-size:cover で目一杯にする。その上に、拡大させないドットパターンをリピートしてのせる。
  • gifやpngにして色数を少なくする。2トーンにして、そういうデザインだという事にする

doctypeの書き方

「新規に作成するサイトのコーディングのdoctype宣言は html5 形式で良いですか?」というsa-kaさんの質問。

はい。それでie6も含めて標準モードになります。安心して良いです。

互換モードは、新しいブラウザに対しても、ie6的な間違ったcssでレンダリングされるように、無理矢理にお願いしたいときだけ使用するもので、新規に作成するサイトのコーディングでは使う理由がありません。

カテゴリー: 勉強会 | タグ: , , , , | 投稿日: | 投稿者:
ジェイ子

ジェイ子 について

WAVE立川校に2010年の3月〜8月に通っていました。取得コース名は『WEBプロフェッショナル&グラフィックコース、WEBディレクション講座』WAVE在籍は2012年11月まででした。2010年9月以降はWEBから遠ざかっていたのですが、真中さんやかおりんごさんや高橋先生のおかげで倶楽部りんごに参加できたので、また1から勉強し直しています。そしてWEBデザイナーを目指して頑張ろうと思っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.