Web制作LAB一覧

2015.06.20

忘れがちなlist-style-typeマーカーの種類一覧をまとめておきます

忘れがちなlist-style-typeマーカーの種類一覧をまとめておきます

使うリストスタイルって殆ど限られています。黒丸とか四角とか。たまたま2桁の数字のリストスタイルを使う機会があったのですが、すっかり「えっ?」でした。検索すると出てはくるのですが、自分で覚えておきたいので一覧でまとめておきます。結構あるんですよね、リストスタイルマーカーって。

2015.06.13

CSS3から聞く様になったベンダープレフィックス(vendor prefix)って一体何?

CSS3から聞く様になったベンダープレフィックス(vendor-prefix)って一体何

ベンダープレフィックスは拡張機能ですよという明示をする為につける拡張子の事です。最近ではブラウザの種類も多く、各ブラウザで独自の拡張機能を実装したりしています。そんな時、ブラウザによって動きが違うと大変です。仕様のリスクに備えてchromeもコレsafariもコレと同じ事が出来る様に、プロパティ名や値の先頭にベンダープレフィックスを付ける事が推奨されています。

2015.06.09

CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

ボタンにマウスを重ねると画像が変わったり、色が変わったりするマウスオーバー(ロールオーバー)アクション。パッと変わるのが普通に良くあるパターンですが、少し時間をかけてゆっくり薄くなるのも気持ちが良いものです。CSSを使ってマウスオーバーした際にゆっくりと色が薄くなっていく効果を付けます。

2015.06.05

PDFをオンラインで圧縮できるウェブサイト

PDFをオンラインで圧縮できるウェブサイト

イラストレータでもエクセルでも、相手に送る時はPDF化して送る事が多いと思います。ただ、PDFに変換したままだと何メガやーってくらい思いファイルが出来ちゃう時がありますので、PDFは圧縮して軽くしちゃった方が良いですよね。昔はなんだか面倒なやり方で圧縮していましたが、今ではオンラインで圧縮できるサイトがあるのでよくお世話になっています。

2015.05.28

CSSで共通の要素につけた背景を任意の要素だけ消す方法

02

ウェブサイトを作っていて共通箇所はなるべくCSSでまとめてしまいたい。でも、共通箇所の中で1つだけ違う設定が必要なんて事がたまにあります。背景色なんかも全部同じにしたい場合、例えばdiv全部に設定しちゃうなんて事もありますが、その中の1ヶ所は背景いらないんだよなぁ~って事がたまにありました。そんな時はその1ヶ所に別のclassを追加して、背景を消しちゃいましょう。

2015.05.23

セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

ウェブサイトを作る時はページの共通マージンや、メニューの配置など、全体的にも個別でもベースになるCSSをいくつか必要とします。そんな時は新しいidやclassで囲む事が多いと思いますが、全体共通の場合は全ての要素に適用するCSSセレクタ「*」を使って対応しちゃいましょう。

2015.05.21

完成前にウェブサイトをユーザーに見られたくない場合はベーシック認証を設定しましょう

完成前にウェブサイトをユーザーに見られたくない場合はベーシック認証を設定しましょう

ベーシック認証とはウェブサイト閲覧時にID・パスワードが必要な基本的なユーザー認証方法です。ウェブサイトを閲覧しようとした時にたまに「IDとパスワード入れてね」と入力窓が出てくる時があります。アレです。ベーシック認証を設定すれば完成前にサイトを見られたくない時やどうしてもサーバー上でテストをしたい時など便利です。また特定のフォルダだけ見せたくない、特定のユーザーにだけ見せたいという場合でも使えます。

2015.05.14

CSSで背景をブラウザ横100%で表示した時に横スクロールした時の背景を切れずに表示する方法

CSSで背景をブラウザ横100%で表示した時に横スクロールした時の背景を切れずに表示する方法

背景色でも背景画像でもブラウザ横100%で表示する事は普通にあると思います。背景の上にそのままコンテンツを展開する場合は問題ないのですが、中に「width固定」を入れると、ブラウザの横スクロールが出るまで縮めてスクロールすると、背景が切れている場合があります。なぜでしょうねぇ。

2015.05.08

レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインでスマートフォンで表示される電話番号にリンクを張る方法

レスポンシブWebデザインを適用した際は、スマートフォン(タブレット)でも最適化されて見られる様になります。PCでは電話番号は記載するだけですが、スマートフォン・タブレットの場合は直接タップして電話できた方がユーザーの手間も省けます。 iPhoneやiPadのブラウザ「safari」の場合は自動で電話番号にリンクが張られ、タップして電話を掛ける事ができますが、「chrome」や「Android端末」では自動でリンクが張られず、そのままでは電話番号をタップできません。Javascriptを使ってスマートフォン・タブレットで電話番号をタップ出来る処理をしていきましょう。

2015.05.06

CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

CSSを使ってIEを含めた各ブラウザで角丸を表現する方法

角丸は元々画像をトリミングをし背景に設置して表現していましたが、CSS3.0になってから「border-radius」を使って角丸に対応する事が可能になりました。ですが、相変わらずIEを筆頭に各ブラウザで対応・未対応があります。各ブラウザで角丸になる様にCSSを設定しましょう。