WEB DESIGN MEMO

ひとことメモ

■ するする動く「このページのトップへ移動」ボタンを設置しました。少しスクロールすると現れ、トップへ移動後は消えます。

■このサイトをipadやiphone向けに空の写真の背景固定のまま真ん中の記事部分はスクロールさせたくて「iScroll」をつかってみたけど、このサイトはいろんなスクリプトを積んでるせいなのかなんなのか、画像の表示はできたけど、記事部分がスクロールしない。画像固定はあきらめて背景をグラデーションにしてみたが、このサイトはレイヤーが多くてwrap部分もz-indexにするしかなかった。そして高さを出すためheight: auto;したけど、色はきれに付いてもまたまた記事部分のスクロールは動いているけどものすごく動作が硬い。そもそもこのサイトがiphone,ipad向けに設計してないので無理すじなのだな。背景はwrapや高さ出すのもやめて、単純な1色にしてCSSをあちこち改善して対応させた。CSSは別途userAgentで振り分けている。

■ 左上に置いたカレンダーは「土日・祝日・当日表記、リンク機能」を手動で設定しているのでそろそろ更新しないといけないんだけど.....もっと便利なのないかなぁ

■ WordPressでローカルからサーバへ移行する場合の注意点。
1.　エクスポートしたローカルのデータベースはリンクurlパスをサーバのものに検索置換で一括変換。
2.　ユーザー名、ログインパスワードも合わせる。
3.　各phpファイルの中もリンクパスはサーバのに書き換える。
4.　スタイルシートのimg要素でbackground: urlは絶対パスに直す。
5.　スタイルシートの冒頭部分Theme URI: も書き換える。
6.　uploadsホルダー、プラグインも移す。

■ pdfデータ（Word,Exelも）を安易にブラウザ上で表示させないでまずはダウンロードをさせる方法（2013.4月）

■ その後、wprdpressでもコメントが付いてるせいで正しく表示されない現象を発見。コメント（メモ書き）をどうしても残しておきたいときはコメント付きのデータをサイトにアップしたモノとは別個に残しておくのがいいでしょうね。

■ IE6などで、文章の最後の2文字くらいが欄外の突拍子もない場所に複製されて表示されるバグ。→おかしくなってる要素の親要素のHTML上のコメントを消すことで解消。

■ wordpress関連メモ項目追加

■ 【wordpress関連】
無料のMAMPはphpで作成したメールフォームなどのローカルでのチェックができないのでXAMPPに変えてデータも移行した。wordpressのツールを使ったエクスポート&インポートがエラーするので、別の方法phpMyAdminでのエクスポート&インポートを実行。デザイン崩れが起きた。パスの変更、画像のuproad、メニュー、メディア設定など一部は再設定しなくてはいけなかった。エクスポートのsqlファイルをmiやDW（BOM無し保存ができるエディター）で開いて検索置換できるパスなどは先にやっておくと少しだけ楽になるようだった。htdocs直下のwordpressのホルダー名は同じにしておくべきだったということ。

■ ブラウザにキャッシュを使わせないようにして、いつでも更新後の最新データを表示させるようにする設定。

■ スクリーンショットの保存場所を変更する方法。「ターミナル」を起動 defaults write com.apple.screencapture location ~/SHOTS　（~/以降はホーム直下のSHOTSホルダー、事前に作っておく。） killall SystemUIServer（SystemUIServerを再起動するコマンド） デフォルトに戻す場合は defaults delete com.apple.screencapture location） killall SystemUIServer）

■ 左上に置いたカレンダーを「土日・祝日・当日表記、リンク機能付き」にしてみました。
元のスクリプトの著作権 はweb上手さん
URL:http://www.web-jozu.com/。（商用の場合は料金が発生）。 最初文字化けしたので、CSSとJSデータをutf-8で保存し直し、デザイン等もあれこれ私用にカスタマイズしました。
ビジネス使用では会社やお店の休業日を入れたり、イベント情報、スタッフ誕生日を入れたりと...いろいろと活用方法がありそうです。
（※今回は日付取得をgoogle API に頼らない方法を探しました）

■ 危ないWordPressのフリーテーマを見分けるための方法。http://firegoby.jp/archives/3530

■ レスポンシブWEBデザインのデータの気になってたタイトルロゴ部分をマイナーチェンジ。

■ MAMPでローカルサーバを構築してWordPressを初夏の頃からちょっとずついじってます。複数のWordPressデータを同時進行したい場合（まだ無いが）、既に一つインストした後だったので、phpMyAdominでデータベースを追加してそこへもう一つインストールするというのが私には一番明快な方法だった。php、難しいですね！

■ IE対策、かろうじて8からにして....いいかな。流れは向かっているよね。
『Google Apps、IE 8のサポートを11月15日に終了』

■ グリットレイアウト（基本）とグリットレイアウト（応用）。（応用）では切抜き写真のハミダシ配置やgoogle web fontを使ってみた。
web fontを使ったロゴ部分は、最初の文字を大きくしたり改行したりしているが、IE8以下では表示がどうやってもおかしくなるので（書体の問題なのかな？検証はまだしていない）、IE8以下では画像にしてスタイルシートを分けるしかないかもしれない。

■ マウスオーバー時に、ふわっとした効果
（1） CSSのみで (IEでは効果無し) (IEでもOK)です。
（2）jqueryを使う (IEでもOK)
（注意）IEは、セキュリティーが「高」だったり、ActiveXが無効に設定してあったりするとopacityは無効となるらしいです。マウスオーバー時に変化が無くなるがリンクはするので、最低限の機能は保てるから良しとする割り切りができるなら（1）も可！？でしょうか。

■ id名やclass名の先頭には数字を使ってはいけない。っていうのを睡眠不足だったりするとコロッと忘れたりするからメモっとく！

■ 間に合わせで作ったので気がつかなかったけど、absoluteしたページの下にアキを作ってフッターのボックスを作るには、ページに高さを指定しないとダメなので、それをやっちゃうと1ぺーじずつメンテが必要になる。今の状態でフッターを入れるなら#page_web、#page_etcのdivの中に入れるしかないようだ。

■ サイトのページ背景の白は透過png。NEWの囲みの地色透明効果はCSS3（rgba）。 ちなみにopacityを使うとテキストやボーダー、画像も全てが半透明になる。

■ インライン要素やiframe、swfもポップアップできるfancybox_ver.1、動作がスムーズ。
javascriptを使わないポップアップ方法も覚えたい。

■ IE8以下ではフォンサイズをemや％で指定せずpxで指定するとブラウザ→メニューバー→文字サイズの変更が効かなくなる。ユーザビリティー的にはどうか。IE9からは画面全体が拡大縮小してくれる機能があるのでpxでも可。
こんな方法もある→http://blog.daichifive.com/archives/513

■ これまでCSS3をいつくか試してみたけれど、IE対策がとても大変。IE8以下がうまくいったら、今度はIE9がうまくいかないなど...あちらを立てればこちらが立たずで、スタイルの書き込みがどんどん増えて行くのでした。

■ jQuery ui によるカレンダー（左上方）。カレンダー側のスタイルシート→フォントサイズをem→px指定に変えたことにより、IE7とIE8において、他のブラウザで見るよりも大きく表示されてしまう現象は回避。いろんなブラウザでだいたい同じ大きさに見えるようになった。（2012.9.9）

■ imgに「vertical-align: 〜」をほどこすと、本来ならまわりこむはずの本文が一行しか横にこない。IEの仕様（バグ）。IE6が現役だった頃のデータに多い。

■ サイトトップのbxSliderを作り直した。3カ所にheightとoverflow:hiddenを入れた事により、リロード時に写真が縦にズラズラ並ぶのが見えてしまうのを解消。ついでにマウスオーバー時に画像がやわらかくフェードする機能もつけた。
前回は1枚ずつスライドさせていたためpajerは10まであったが、今回は2枚ずつにしたので、pajerは半分の5。（2012.9.6）

■ Adobe spryを使ったタブ付きパネル、Adobe spryを使った縮小可能パネル、共にIEでも問題無し。

■ 「CSSハック」はちょっとしたテストに使うくらいにして、基本的には「条件付きコメント」を使うようにする。なぜならば、将来有効ではなくなるかもしれないから。

■ メモIE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」。表示が若干遅くなったり、干渉が起こる場合もある。

■ iflame内にも全部、広告が入っちゃう。そろそろ有料サーバへ移行を考えるか。

■ jQuery、CSS3、Adobespryを使ったアコーディオン。3種類動作検証。データが増えてきたことだし、このサイトも左のメニューバーをアコーディオンにしようかな...。（2012.8.31）

■ レスポンシブWEBデザインはHTML5を使わなくても良い。xhtmlでも大丈夫。
参考サイト：http://www.kanebo-cosmetics.co.jp/

■ 学校で習ったデータもここへまとめ置いた。同時に基本をふりかえる。

■ 画像や「table」はデータ読み込みが重くなる傾向。機能を考えながら、選択する。

■ 3000ミリ秒は、３秒。5000ミリ秒は、５秒。

■ 日付や現在時刻を取得・表示。リアルタイム取得にチェンジ。（2012.8.22）

■ codasliderじゃなくてSudoSliderを選んでみた。多様な動作が作れそうだけど、あえて手動で作った。continuous:true、numeric:true,の使い方も。（2012.8.21）

■ 多様化するデバイスに対応させるには、もっとシンプルに手動スライドでもいいのかもしれない。
次回はcodasliderというのを試してみようと思う。

■ レスポンシブ対応、軽量なスライダーflexslider.js 追加。(2012.8.15)

■ ボタンクリックで、背景画像をチェンジするjquery / backstretch.jsを項目に追加。(2012.8.12)

■ JavaScriptで日付や現在時刻を取得・表示。時間が経ってからのオンタイム表示にはリロードが必要。
囲みの角丸はCSS3で書いてみた。（IEやOperaでも角丸表示するには、もう一工夫必要。(2012.8.11)

■ トップに置いたbxSlider.jsで作ったスライドショー、IE8以下環境では左側の「＜」が出ないなぁ。なんでだろ(2012.8.7)

■ IE8以下において、インラインフレームの背景を透過させるにはiframe要素に allowtransparency="true" を指定する。例 <iframe src="example.html" allowtransparency="true"> ～ </iframe>

■ 行頭に「、」や「。」などが来ないようにするにはCSSにおいて　line-break: strict;　text-align: justify;　あるいは letter-spasing:−1px;　などを使ってなんとかする。

■ トップに設置したbxSlider.jsによるスライドショーの両脇 '<' '>' はテキストになっている。
head内スクリプトで
　prevText: '<',
　nextText: '>' とあるのはデフォルト。
画像にしたくて
　prevImage:'prev.png',
　nextImage:'next.png'
と書き変え、画像はcssでbackground-imageとして読み込んでみたがsafari等で「？」マークがついてしまう。firefoxでは問題なかった。(2012.8.4)

■ jQueryは干渉しやすいようだ。jQueryはprototype.jsと一緒に使うには、$()ではなくjQuery()と表記してみる。prototypeの方を先に記述する（読み込ませる）。それでもだめなら「prototype版」はやめて、「jQuery版」にしてみる。たくさん使うのは止める。

■ jCarouselLite+lightboxはローカルでしか動作しなくなったので項目から削除。

■ CSS3はHTML5とセットで使わなければならないものではない。

■ IE6やIE7でもちゃんと動くらしいjQuery
　bxSlider、jQuery Blinds、jCarousel
　jquery.slidescroll.js（jQuery非依存もある）、
　jQuery UI Tabs（タブが実装出来る）、wSlide、
　Pagination Plugin
http://tutorials.ajaxmasters.com/pagination-demo/