THE HAM MEDIA BLOG

CSSアニメーションを実行するトリガーのまとめ5+1個

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
アニメーション
ANIMATION
トリガー

先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか?と思い、とりあえず調べてまとめてみた。

続きを読む

CSS3のtransitionプロパティでアニメーションを試してみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
アニメーション
transition
CSS

このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。

今回はその中でもtransitionを使ってアニメーションをみてみようと思います。

続きを読む

意外と知られていない機能が多い!?Firebugの使い方

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
HTML
Firebug
Firefox

Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。

Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。

もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず!

Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。

続きを読む

勉強会をしてみて:苦手はやはりfloat関連

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
float
CSS

float

先日の勉強会を行ってみて、やはり皆さんが苦手とするのはfloat関連だということがわかりました。横並びにする際は、floatを使い並べ、そしてfloatした後はclearしましょう。

続きを読む

リストを横並びにした時の空白をなくす方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
display
INLINE

リストをdisplayで並べると隙間開いちゃう・・・

リストをdisplay:inline;などで横並びにすると、リストとリストの間に空白ができちゃうんですよね。これを知らないと、paddingを0にしたりとかmarginを0にしたりとか、そういうのでがんばろうとしてしまうんだけど、実はそうじゃなくてHTMLの書き方によって(改行)空白できちゃうんですよね。

これをdisplayプロパティで横に並べる時、どの方法なら隙間なく並べられるか!他の方法とかを含めて検証してみましょう。

続きを読む

floatのclearについて

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
clear
CSS

floatのclearについて

ネタ元:mixiコーダー組合コミュ 「トピ立てるまでもない質問はこちら」トピックの質問97

以前「float関連の問題で覚えておくべき5つの対策 」でもfloatについて取上げたことがあるのですが、今回はfloatのclearについてのお話。floatの解除方法について。

続きを読む

表示が崩れてる!?そんな時の原因発見方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
Firebug
バグ

表示が崩れてる!?そんな時の原因発見方法

ブラウザで確認をせずにコーディングに没頭していると、いつの間にか崩れてしまっているなんてことが結構多くあるのですが、その原因となる部分を見つけるのは、慣れるまではかなり時間がかかってしまう。自分もコーディングを覚えたてのころは、数時間も原因となる箇所を見つけることに悩んだりした時期もありました。

初心者などは、問題となる箇所を見つけるのに苦労したりすると思います。問題を解決させるために、CSSをどんどん加えていったり、important!をつけたりなんてことで解決させようとする人もいると思いますが、今回はその問題となる箇所を見つけるために、しておくといいことを、いくつか紹介します。

続きを読む

display:inline-blockがけっこう便利。だけど…

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
inline-block

inline-block

小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。

しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。

続きを読む »

CSSのpositionのまとめ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
fixed
position
CSS

positionのまとめ

CSSのpositionのプロパティに、fixedというのがある。
これは指定の部分を固定配置にして、画面がスクロールしても、
画面の同じ位置に表示させておくものである。

ところがこのプロパティ、IE6だとうまく固定されない。

CSSの設定の仕方で実現できるようなので、メモエントリー。

続きを読む »

float関連の問題で覚えておくべき5つの対策

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
コーディング
バグ
CSS
float

float関連で覚えておくべきこと

CSSのfloat関係って、基本的に覚えておくべき事ですが、
動作がいまいちわかり辛かったり、バグが多かったりと、
float一つとっても覚えておくべきことって多いと思います。

なのでfloat関連の問題で覚えておくべき解決方法や
回避方法のことなどについてをまとめてみた。

続きを読む »

XHTML&CSSコーディングハンズオン勉強会に参加した

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
XHTML
CSS
コーディング

XHTML&CSSコーディングハンズオン勉強会に参加してきた

先日の日曜日、コーディングを専門としている企業の方と僕と共同して、
「XHTML&CSSコーディングハンズオン勉強会」というのを行ってみた。

講師はそのコーディング専門の企業の方で、
年間100サイト以上をコーディングを行うという凄腕の方。
今も数百ページにも及ぶサイトのコーディングを行っているとか・・・
僕からしてみたら恐ろしいくらいのスピードでコーディングしている方で、
その方を講師として、今回実践形式の勉強会を開催しました。

コーディングの実践についてなので、まとめることも少ないですが、
勉強会で学んだことなどをメモしておこうと思います。

続きを読む »

クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
カラム
クロスブラウザ
CSS

クロスブラウザ対応で、CSSだけで高さの違うカラムを揃える方法

Art and web design by Matthew James Taylorというサイトで、
Equal Height Columns with Cross-Browser CSS & No Hacks
というエントリーがあがっていたので読んでみた。

高さを揃える方法っていろいろあるのですが、
この方法もクロスブラウザに対応しているので、なかなか便利かもしれないです。

続きを読む »

覚書:テキストリンクのクリック時に動きをつける

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
:active
リンク
CSS

覚書:テキストリンクのクリック時に動きをつける

一般的な技術なんだけど、実は使った事がなかったので、
ちょっと覚書の為にエントリー。

テキストのクリック時にちょっとした動きが欲しいとき、
位置をずらす方法。

続きを読む »

画像をブロックの左下に配置してテキストを回り込ませる方法を考える

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
画像
img
float
回り込み

画像をブロックの左下に配置してテキストを回り込ませる方法を考える

mixiのとあるコミュニティの質問にて、
画像を左下に配置して、テキストを回り込ませる方法は?
というような質問があがってた。

確かに"float:left"させただけだと、回り込みはするものの、
一番上に配置されてしまうし、marginとかpaddingとかをつけたとしても、
その部分にテキストは流れこまずに、空白となってしまう。

どうやればできるんだ?

というわけで考えてみた。

続きを読む »

IEで起こるfont-familyでの日本語フォント有無による文字サイズの変化バグ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
バグ
IE
font
CSS

ネタ元:font-familyの憂鬱 - Webtech Walker

IEで起こるfont-familyでの日本語フォント有無による文字サイズ変化のバグ

以前から気づいていたのですが、
%でfont-sizeを指定していると、
IEだけなぜか他より少し大きくなっていた。

フォントの問題なんだろうなって思っていたけど、
こればかりはどうしようもないなとあきらめていた。

文字コードがUTF-8で、日本語フォントを指定しないと、IEはフォントサイズ11px相当の文字を12px相当の大きさで表示させてしまします。
font-familyの憂鬱 - Webtech Walker

そんな時にネタ元のエントリーを見つけたのだが、
本当にそれだけで変化するのか!?
と不思議に思ったので検証してみることにした。

続きを読む »

imgを画像置換で直接ロールオーバーさせる時のちらつきをなくすCSSの設定方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
ロールオーバー
rollover

imgを画像置換で直接ロールオーバーさせる時のちらつきをなくすCSSの設定方法

以前『二つの画像とCSSやjQueryで表現する3種類のロールオーバー
というのをエントリーしたのですが、
サンプルで作った「imgを直接ロールオーバー」というのが
なんだかちらちら。そして少しぶれて動く。
単にデフォルトでボーダーがついているので、その問題なのですが、
そうじゃないにしろ、FirefoxやOperaで見たときに、
画像やマウスがちらついてみえたりする設定になってしまっていた。

ということで修正してみる!

続きを読む »

font-sizeの基本設定

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
font-size
font
CSS

font-sizeの基本設定

過去にもfont-sizeの問題について考えた事があったのですが、
今回はfont-sizeのパーセント表記一覧 - Webtech Walkeを読んで、
今後のfont-size指定、自分はこうしようと思うのを書いておきます。

続きを読む »

CSS:displayプロパティによる変化一覧

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
INLINE
BLOCK
display
CSS

CSS disolay?

CSSのプロパティで「display」ってありますけど、
displayプロパティってどのくらい利用していますか?

あまり多様するようなプロパティではないのですが、
それでもdisplayプロパティを使う時って出てくると思います。

このdisplayプロパティは色々な値を持っているのですが、
どんな値がどんなことになるのかって実は僕もあまり知らなかったりします。

そんなときに、
Understanding CSS Positioning part 1 | KilianValkhof.com
というエントリーを読んだので、いっそ勉強してみようと思い、
displayプロパティについて書いてみる事にしました。

続きを読む »

デザインを全てのブラウザで同じにさせる必要性

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
デザイン
ブラウザ
CSS

ネタ元:Webサイトはまったく同じ見た目である必要はない

クロスブラウザ

サイト制作をする際に、デザイン通りに作るかどうかというのは、
コーダーとしてもとっても重要になってくること。

しかし、ブラウザが違うだけでもCSSの対応やバグによって、
少しずつ見た目がずれてしまうことが多々ある。

そして通常もとめられることが、どのブラウザでみても、
同じように表示させるという事だった。
果たしてそれが本当に必要なことなのだろうか?

続きを読む »

CSSでやりがちな6つの間違い

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS

CSSでやりがちな間違い

今はCSSを使ってサイトを制作することが標準となっているが、
まだまだCSSをこれから覚えるって人は多いはず。

XHTMLのマークアップをしているときにも、
間違えやすいことは多々有って、
そんな例を挙げているのがエントリーはいくつもある

ブログが続かないわけ | XHTMLでやりがちな8個の間違い

XTHMLのはけっこう目にするが、
僕はCSSでもやりがちな間違いがあるよな〜
なんて思ったので、いくつか上げることにした。

初心者も上級者も、これから挙げるリストの事は気をつけた方がよい。

尚、今回は指定した値で起こるバグとかではなくて、
CSSを書いている段階で間違いやすい点をまとめてみた。

続きを読む »

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。