WEBデザイナーズNEXT

Webデザイナー

Webサイト製作時に明朝体のフォントを使う3つのパターン

Webで明朝体を使う

Webサイトは基本的にゴシック系のフォントを使用する事が多いのですが、上がってきたデザインが明朝体で困った…なんて事も多いのではないでしょうか?

なぜ明朝体だと困るのか?その理由は「環境依存」になります。
では、どのように明朝体を使っていけばいいのかをまとめてみました。

Pocket


サンプルを見ればバッチリわかるposition「absolute」「relative」

position「absolute」「relative」

CSSのpositionプロパティを理解せずなんとなく使用してしまっている人は多いのではないでしょうか。
私もどちらかというと感覚的に使ってしまっていたので、「あれ?思った通りに動かない…」なんてことがたまにありました。

今回はpositionプロパティの「absolute」と「relative」をしっかりと理解して使う為にまとめてみました。

Pocket


CSSで○番目の時にスタイルを適用させたい場合

CSSで○番目の時にスタイルを適用させたい場合
最近CSSで○番目に適用させる…という書き方をする事が増えてきました。いつも書き方を忘れてしまうので、自分で使いやすいようにまとめてみました。

最初に指定、最後に指定、○番目に指定、後ろから○番目に指定などなど…やれることは多いので、
覚えていない方は是非参考にしてみてくださいね。

Pocket


IEの×マークを消す方法、IEの目のマークを消す方法

IEの不要なものを消す

IE(インターネットエクスプローラー)ってHTML制作者にとっては何かと困らせてくれるんです…。IEのバージョンによって動いたり、動かなかったり…。ブラウザもさっさと統一してくれるとありがたいのですが…。

今回は、パスワード入力の時に出る「目のマーク」とテキストエリアに出てくる「×のマーク」を消す方法をまとめました。

Pocket


レスポンシブサイト作成時、実践ですぐ使えるようにメディアクエリまとめ

メディアクエリ

わかってはいたものの、最近レスポンシブスタイルのサイトを作成する事が増えてきました。一般的にはCSSのメディアクエリ(mediaquery)を使ってレスポンシブにするんですよね。

今回は自分がレスポンシブサイトを作成する際に、コピペできるようにまとめてみました。

Pocket


CSSコピペ専用!角丸を簡単に使用するメモ

角丸
最近はCSSで角丸を表現する事が非常に増えてきました。
昔は画像で作成して…という流れだったのですが、CSS3になってからはできるだけ画像を使わない方向なんですよね。CSSは色々な表現ができるようになっているので、CSSを書くのが楽しいです。

Pocket


tableのborderにdottedを使用する。firefoxで悩んでいる方必見!

dotted
tableのborder部分に点線(dotted)を使用したいというクライアントがいました。特に問題ないだろうと進めていると、firefoxだとなんか崩れているではありませんか…。ちょうどborderが交差している所だけがなぜか崩れています。
調べても調べても解決しなかったのですが、firefoxでも崩れない方法が見つかったので記事にまとめてみました。困っている方は是非読み進めてくださいね。

Pocket


CSSコピペ専用!現場ですぐに使えるボタンテクニック4つ

CSSボタンテクニック

Webデザインをやるときにボタンを作成する機会ってすごく沢山ありますよね?CSS3になってからは画像を使用しなくてもやれることがすごく増えたので、とても面白いです。

ただ、何回書いてもすぐに忘れてしまうものも沢山あります。今回は現場でよく使用するCSSの書き方をメモしておこうと思います。

Pocket


footerの下に余白が!footerを下に固定する方法

フッターを下位置に固定

通常は上からコーディングしていくので、headerを作成して、メイン部分を作成して、そのあとfooterを作成していきます。
ちょっとメイン部分に置くコンテンツが少ないなぁ…まぁいっか…と進めていくと…

あっ!フッターが上に上がって変な感じになってる!

そんな事ってありませんか?

まぁ、メインにコンテンツがあまりないから…って事もそんなに多くないのですが、ページによってはそういう事が起こる事があるんです。
お問い合わせページのサンクスページ(thanks.html)とか、文字や画像が全然なくてフッターが上にくっついちゃうって事があるんですよね。

そんな悩みを解決する手段をまとめたいと思います。

Pocket


もうfloatで悩まない!clearfixを使って回り込みを阻止する

回り込みを阻止
floatを使う事によって回り込んでしまって崩れてしまう…。
HTMLやCSSを初めて最初につまづく場所なんじゃないかなぁと思います。

私も昔はとても苦労しました。
昔は<br clear=”all” />を入れてみたり、<div class=”clear”></div>のような空divを入れてみたり…。今となっては思い出したくない思い出の一つです。

Pocket