新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


webページや、最近ではスマホサイト、スマホアプリなど、様々なデバイスやブラウザに対応することが必須となってきました。

実際に作ってみると思い通りの表示をができない。
firefoxでは綺麗に表示できたが、IEでは表示をできなかった。
いつも同じ実装で調べている気がする。
最近のCSSの書き方ってどんなのだろう。
そもそも、正しいCSSの書き方を知らない。

なんてことがあります。

そんな時のために、問題点はに直面したら調べている、その知識をまとめています。

CSSで困った時のまとめ

参考になると嬉しいです。

スポンサーサイト

テーマ:WEBデザイン - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


フロントエンジニアには必須項目といってもいい「cssハック」について紹介します。

cssハックとは、「ブラウザによって異なる実装の違いやバグを吸収し、各ブラウザでの表示を同一にするための手法」です。

webサイトを作成し、リリースの前に他のブラウザでも表示を確認してみよう、古いブラウザだとどうであろう、と確認してみると、floatやmargin等の利用箇所で崩れている、改行してしまっている、そもそも表示できていない、なんてことが多々あります。

特に未だに5%ほどのユーザーがいるIE6(InternetExplorer6)などは、ブラウザが古く、崩れてしまうことが多い厄介なブラウザのひとつです。

そんな時に必須の手法です。

現在はIE、FireFox、 Chrome、Safari、 Opera、iPhone に対応しています。

CSSハック一覧

上記にまとめてみましたので、ご覧下さい。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今更な問題ですが、以前から気になっていました。

例えばCSSで



この「 divTesxtクラス 」領域に文字列を表示した場合

300pxを超えた文字列については改行されるはず

・・・ですが

半角英数字のみの文字列の場合

日本語(2バイト文字)と違ってdivタグ等でwidth指定した幅を超えても改行しないではみ出す問題がHTMLには存在します。

原因は、半角英数文字列は、スペース等の区切りが入るまで1つの単語として認識されるためです。

これのため、Webサイトのレイアウトが崩れてしまうブログやサイトが多々あります。

対処方法は以下のとおりです。

続きを読む

テーマ:ホームページの作り方 - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


Webサイトのサイトマップを綺麗に作成するための便利なCSSがあります。

それはSlickMap CSSと呼ばれるCSSのライブラリです。

SlickMap CSSはリスト形式(UL)でサイトマップを記述することによりスタイリッシュなサイトマップに仕上げてくれるCSSです。

また、比較的簡単にHTMLとCSSの修正をすることができますので、自分なりにカスタマイズすることも可能です。

例えば以下の様なリスト形式で記述します。


これにSlickMap CSSのCSSを適用することで綺麗なサイトマップを簡単に作成してくれます。
以下のサイトに試しに実装してみました。
http://webyoutility.web.fc2.com/other/slickMapCss.html

ただ、あまり応用は効かないように個人的には感じました。
大規模、中規模のサイトではうまくサイトマップが作成されないようなので、そこは注意してください。

テーマ:web(ホームページ) - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


googleAdsenceに限ったことでは有りませんが

自分のサイトではコンテンツ部分だけ画面をスクロールさせる手法を使用していました。

しかし、このサイトを作成する上で、問題がありました。




それはGoogleAdsenceの広告が画面外にはみでているときがある!?w




原因はわからなかったのですがやっと解決しました。

それは


potision:relative;を指定するだけ



簡単!www



しかしここで問題が。。。

自分のサイトでは再度メニューmをプルダウン形式にしています。

メニューにマウスオーバーするとメニューの子要素が現れるというような。

しかし、position:relativeを指定したために

このマウスオーバーしたメニューの上にコンテンツがかぶさる?というようなひゅう応じとなってしまいメニューが正常に表示できなくなってしまいました。

そこで見つけたのがこれ




【CSSのz-index要素】
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。


メニューの項目にposition:relativeを指定
そしてz-index:2;と設定


これにより他要素よりも上の階層に表示されることになり

コンテンツにメニューが重なるという問題を解決することができましたー。

テーマ:WEB系勉強中 - ジャンル:コンピュータ

次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。