web関連

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。

解決策

以下のコードをCSSファイルに追加すれば解決しました。

.owl-carousel { overflow: hidden; position: relative; width: 100%; z-index: 1; // added this }

OwlカルーセルのGithubにて問題として取り上げられていました。

引用 : Flickering on slide in Chrome and Safari

Googleアドセンスがhtml要素を覆い隠してクリック出来ない

Google Adsenseを設置すると隣接する要素をオーバーラップしてしまい、クリック出来なくなる場合の対処法です。 アドセンスが隠してしまってクリック出来ない要素を#navだとすると以下のようにCSSを設定します。

#nav { position:relative; z-index: 100; }

DREAMWEAVER CS6でSCSSを使うための準備

dreamweaver CS6では、scss,sassなどが使えません。使えないというか、コードヒントやコードカラーリングが適用されず、テキスト扱いと同様になってしまいます。

検索すれば、多くのサイトで説明されていますが、以下の作業をすればコードヒントが使えるようになります。

scssを追加する手順

  • 1.DWの環境設定>ファイルタイプ/エディター内の「コードビューで開く」の箇所に「.scss」を追加します。(sassも使いたい場合は.sassも追加)
  • 2. アプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration 内の「Extensions.txt」とアプリケーション ▸ Adobe Dreamweaver CS6 ▸ Configuration ▸ DocumentTypes内の「MMDocumentTypes.xml」を編集

Extensions.txt

下のコード内の【】の箇所を追加。(分かりやすいように【】をつけていますが実際は不要です。) HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON, AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS, CSS,【SCSS】,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents HTM,HTML,HTA,HTC,XHTML:HTML Documents SHTM,SHTML,STM,SSI,INC:Server-Side Includes JS,JSON:JavaScript Documents XML,DTD,XSD,XSL,XSLT,RSS,RDF:XML Files LBI:Library Files DWT:Template Files CSS,【SCSS】:Style Sheets ・・・

MMDocumentTypes.xml

下のコード内の【】の箇所を追加。(分かりやすいように【】をつけていますが実際は不要です。) <documenttype id="CSS" internaltype="Text" winfileextension="css,【scss】" macfileextension="css,【scss】" file="Default.css" writebyteordermark="false" mimetype="text/css" > 上記の作業でDWを再起動してみてもコードヒントが動かない場合は、「Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration」内のMMDocumentTypes.xml、Extensions.txtをチェックしてみてください。

Macの場合は「control + スペース」でSpotlight検索を起動し、「Extensions.txt」、「MMDocumentTypes.xml」で検索してみると簡単に探せます。

ここまで、完了すれば、コードヒント、コードカラーリング、ファイルのアイコンまで、全て対応出来ます。

注意点

これは私もはまった落とし穴なんですが、DWの体験版をインストールしたことある方は、ライブラリ内を変更しないとコードヒント等が動きません。

ライブラリ内を変更するには、「optionボタン」を押しながら、Finderメニューの移動を開きます。 そうすれば、隠しメニューの「ライブラリ」が表示されます。

Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configuration/にもMMDocumentTypes.xml、Extensions.txtのファイルがあると思うので、これを同様に編集してください。

レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示

レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。

cssのdisplay:table-cellで解決

html

<ul id="nav"> <li><a href="#"><img src=" nav_home.png" alt="ホーム"></a></li> <li><a href="#"><img src="nav_shop.png" alt="店舗案内"></a></li> <li><a href="#"><img src="nav_contact.png" alt="お問い合わせ"></a></li> </ul>

css

#nav ul { display: table; } #nav li { display: table-cell; padding-top: 1px; }

親要素にdisplay:tableを設定し、揃えたい子要素にdisplay: table-cell;を設定。 これでもブラウザサイズに合わせて、画像は縮小されるのですが、ブラウザのサイズによっては、以下の画像のように1pxほどずれてしまいます。 vertical-alignを設定しても解決出来なかったので、padding-top: 1px;を設定して対応しました。 このpaddingの設定については、無理やり感があるので、もう少しスマートな方法をご存じの方がいらっしゃいましたら、コメントいただけますと嬉しいです。

レスポンシブ対応 画像メニューをテキスト表示に切り替える

レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。

cssの:before attr属性で解決

html

<ul id="nav"> <li><a data-text="ホーム"><img src=" nav_home.png" alt="ホーム"></a></li> <li><a data-text ="店舗案内・アクセス"><img src="nav_shop.png" alt="店舗案内"></a></li> <li><a data-text ="お問い合わせ"><img src="nav_contact.png" alt="お問い合わせ"></a></li> </ul>

htmlファイルのaタグにdate-◯◯を設定。 ◯◯は自由に設定可能。

css

@media (max-width: 767px) { #nav li a:before { content: attr(data-text); } #nav li img { display: none; } }

画面サイズが767px以下の場合は、aタグのdata-textの文字を取得して、a要素に追加。 元の画像はdisplay:noneで非表示に。

Dreamweaverで「既に別のドキュメントタイプに関連付けられているためです。」エラー頻発

DreamweaverでSCSSファイルの編集をするためにDWの設定を触ったのですが、起動のたびに「ドキュメントタイプ”◯◯◯”は追加されません。使用するファイル拡張子が、既に別のドキュメントタイプに関連付けられているためです。」のエラーが連発するようになりました。

原因

調べてみると、Dreamweaverで編集可能にするために、「MMDocumentTypes.xml」というファイルを編集する必要があったのですが、その際に、元々の「MMDocumentTypes.xml」ファイルをリネームして同じフォルダにバックアップしていました。 どうやらこれが原因だったようです。 リネームしても読み込まれるため、MMDocumentTypes.xmlが2重に読み込まれていたため、ドキュメントタイプが重複している拡張子についてエラーが出ていたようです。

解決策

MMDocumentTypes.xmlのバックアップを違う階層に置く。 これだけで解決でしたε≡≡ヘ( ´Д`)ノ http://okwave.jp/qa/q7690535.html

DreamweaverでSCSSを触るための設定

http://k0u1.com/blog/archives/662 http://liginc.co.jp/web/html-css/css/56599#step5