<< November 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>

ハムからみんなへお願い&お知らせ

相互リンク募集!
ハムにメールを送る時はここから
07月05日(Sat)

スポンサーサイト

一定期間更新がないため広告を表示しています

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • -
  • -
  • by スポンサードリンク

03月12日(Wed)

クロスブラウザとfont-sizeの問題

久々にこっちに記述

コーダーが悩むポイントの一つ


Webを制作している上で、毎回ぶちあたる問題の一つに
font-size指定がある。

僕の場合、デザイナーにもらったデザインをもとに、
それ通りにコーディングしていくのが仕事だけど、
OSとブラウザの違いによってfont-sizeの大きさがバラバラになる。

だからなんとか統一しようと思うけど、うまくいかない。

解説しているサイト(参考のために)


いろんなサイトを参考にしてみた。
TRANS - 英語圏から学ぶ、body要素に対するfont-size指定方法のまとめ
RedLine Magazine : font-size:82% って何?

この他にもいろいろあったけど、
結局のところ、ブラウザによって、そろえる最前の方法がない。
一応あるにはあっても、必ずどこかでほころびが見つかる。
サイズをそろえたとしても、font-familyによる違いとかね。

font-familyの違いはかなり顕著に現れて、
同じ文字サイズだとしても、
MS ゴシックとMacのヒラギノとかの文字間隔が違うから、
どうしても横幅がかわってくる。

これはもうどこかで妥協するしかないか。。。

僕が採用している方法


そんな中でも僕が採用しているCSSは以下のようになっている。

body { font-size : 62.5%; }
html>body { font-size : 10px; }


なぜこのような指定なのかと言うのは、
こちらを参照してもらいたい。

RedLine Magazine : bodyにfont-size:62.5%を指定すると・・・

簡単に言えば、感覚的にピクセル指定ができるようになるからだ。

CSSハックを使う理由


html>body { font-size : 10px; }

CSSハックを用いて、IE以外のブラウザのデフォルトを
10pxに統一している方法の一つで、
このような方法を採用した。

なぜこのようなハックを使用したのかというと、
ブラウザのFirefoxは、
Windowsだとデフォルトのフォントが16pxに対して、
Macだとデフォルトのフォントが14pxになっているからだ。

なので、%でサイズを指定してしまうだけだと、
どうしてもMacのFirefoxだけサイズが小さくなってしまう。

この一つの違いはかなり厄介だ。。。

なぜすべて10pxと指定しないか


なぜ最初から10pxでフォントを指定しないのかというと、
IEでは、pxでフォントサイズを指定すると、
文字の拡大に対応しなくなってしまうからだ。

大きさを固定して動かなくするのであれば、
pxで指定していてもいいのだが、
ユーザビリティの観点から考えて、
文字の拡大縮小に対応していないのは、良くないと言える。
FirefoxやOpera、Safariなどのブラウザは
pxでサイズ指定をしていても、問題なく拡大できるが、
IEだけはできない。

なぜなんだーーーーー!!!

だから正直言うと、なるべくハックは使いたくないのだが、
ここは仕方なく使っている。
ハックだらけのサイト構築よりは、多少の妥協でおわるので、
それはそれでしかたないと思うしかないのである。

それでも問題はある


途中でも書いたのだけど、これだけでは問題解決はしなくて、
使われているfontが違うために、文字間隔によってずれが生じる。

IEとその他のブラウザで、横幅の位置がずれてきてしまうのだ。

これもいろいろ実験してはみたものの、
うまい解決策がうかばずに、
結局これだけはあきらめて妥協している。

サイズさえ同じならばそれでいっか。

デザインと違ってくるのは、
何となくコーダーとして嫌なのだが、しかたが無いようだ。

JavaScriptとかで解決しないかな・・・
いまだ模索中である。。。
JUGEMテーマ:日記・一般

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


02月02日(Sat)

コーディングがうまくなるポイント

今回はお仕事の専門的なお話。

STOPM' LISTEN」のブログで
最低限これだけ守っていればコーディングがうまくなるポイント
というエントリーがあった。

ふむふむ、コーダーとしてなかなか勉強になります。
一応だいたいのポイントはおさえられているのですが、
[2.id及びclass名に見た目に関わる名前をつけない]
というので、結構つかっていたりします...
clearfixなんてもろに…
ちなみに現時点で、なんで悪い見本なのかというのがわかっていなかったります。
今後おぼえていかなければですね。
class名やid名はそんなに注意してつけていなかったので、
今後は考えながらつけていこうと思います。

[3.インデントは行わない方が無難]
これに関してだけ、僕はインデントしていたほうがいい派かな。
自分だけで作るのであれば、インデントなくてもいいのだけど、
そうでない場合が多いので、なるべくすぐに見分けられるように
インデント構造にして作っています。

確かに無難なのはわかるのですけどね。

空要素で作らないとかタグ自体で調整しないというのは
自分の中ではなんとかクリアしている項目なんですけど、
角丸の背景にしたいなんてときは
いつもかなり悩みながら作っていたりします。
今後はJavaScriptに移行していくか、
もしくはうまくCSSでつくっていけるように
これまたステップアップしていかねば!

最近はよりシンプルに、なるべく入れ子構造にしないのを念頭に
サイトの作成をしているためか、今ではStrictで作るようになりました。

今後はHTML5が出てきたり、CSS3も覚えなくてはならなかったりと、
結構覚えることがまだまだ出現してきているので、
今年も勉強ばかりの日々になるな〜なんて思うこのごろ。。。

参考:

タグ:
JUGEMテーマ:日記・一般

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


01月31日(Thu)

span要素とCSS

昨日のこと、とあるサイトを作成していて、
CSSの指定で一部表示が変になっていることに気がついた。

FireFoxだけどうしてもうまく表示されない。

<span>○○○</span>

このspanという要素。

これにwidthの指定をしたのだけど、適応されない。
標準準拠モードだと適応されないのである。
後方互換モードであるとなぜか適応されるという、
なんとも不思議な現象も・・・

う〜ん、まだまだ勉強不足のようだ。。。

参考:非置換インライン要素とwidth、heightプロパティ

JUGEMテーマ:日記・一般

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


12月06日(Thu)

jQueryでフォントサイズを変更する方法

jQueryでフォントサイズを変更する方法

最近はユーザビリティを考えて、
文字のサイズを選択できるようなサイトが増えていますよね。

特に市役所とか公共機関のサイトに多くみられますね。

こんなやつ↓
デザインサンプル

上のはゆうちょ銀行のサイトのです。
最近こういうのが多いですよね。

あとはこんなのも。
デザインサンプル

デザインサンプル

日本郵政と郵便局のサイトの一部分。
ブラウザの文字サイズ変更方法を教えているのもありますよね。

北海道のもブラウザでの変更方法。
デザインサンプル

(参考サイトへのリンクは一番したの参考サイト参照。)

僕の部署で扱っているサイトも、
今はコレを取り入れようとしています。

これがjQueryでできないかなって思ったので、調べたら
案外簡単にできそうだ。

でも、検索で出てくるのはCSSをのファイル自体を入れ替える方法ばかり。
なので、それを元にCSSはあらかじめファイルに記述しておいて、
classを可変にすることでスタイルを変更する方法を作ってみた。

まずはjQueryをダウンロード。

そして使うためにheadの中に使うファイルを記述


<script src="●●/jquery.js" type="text/javascript">


●●の部分はそのjQueryをおくまでのパスに変換。

そしてclassを変更するためのスクリプト


$(function(){
$("a.size_L").click(function(){
$("body").removeAttr("class");
$("body").addClass("font_L");
return false;
});
$("a.size_M").click(function(){
$("body").removeAttr("class");
$("body").addClass("font_M");
return false;
});
$("a.size_S").click(function(){
$("body").removeAttr("class");
$("body").addClass("font_S");
return false;
});
});


これを「fontsize.js」とでも名前をつけて保存して、
そのファイルも読むようにhead内に記述を加える


<script src="●●/fontsize.js" type="text/javascript">


ちょっと説明。
今回は<body>と書かれる部分にクラスを指定するようにしてみた。

$("body").removeAttr("class");
$("body").addClass("font_L");

コレがそれ。

bodyにclassでfont_Lかfont_Mかfont_Sがつくようになっている。
最初の

$("a.size_L").click(function()

これはクリックでのアクションであることと、
aというアンカー要素でclassがsize_Lの部分で動作することを示している。
つまり動作させたい部分のことを書けばいいのである。

ちなみに僕のやつだと、HTMLはこうなる。


<ul>
<li><a href="#" class="size_L">フォントを大にする</a></li>
<li><a href="#" class="size_M">フォントを中にする</a></li>
<li><a href="#" class="size_S">フォントを小にする</a></li>
</ul>


あとはCSSを記述しておけばOK


.size_L{font-size:large;}
.size_M{font-size:medium;}
.size_S{font-size:small;}


フォントのサイズも任意でも大丈夫。
120%とか1.5emとか各自で好きなように。

ここでは僕のをサンプルとしてだせませんが、
上ので皆さんもためしてみてください。

時間があれば、上のスクリプトを
クッキーに保存しておいて全部のページで
有効にする方法を解説しますね!

ま、僕も勉強段階でこれを書いたので、
ちゃっちぃ内容かもしれませんし、
もっとこうしたほうがいい!
ってのがあるかもしれません。
その場合はコメントにてご指導お願いします。

参考サイト:

タグ:
JUGEMテーマ:インターネット

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


11月07日(Wed)

CSSでするリンク装飾

今日はちょっとCSSの説明。
ブログの装飾にお役立てくださいな!

僕のブログは、通常リンクにすると、
下線がついた紺色の文字になっていて、
さらに、マウスカーソルを文字の上に持っていくと
水色の背景に白色の文字に変化するように設定してある。

これは
<a href="〜">の部分のCSSで

a:hover{ 〜 }

っていう指定があるからできているのであ〜る。

例えばこんなのがある。ちょっと色を変えてみる。
そして、マウスカーソルが上にのったら下線を消すようにしよう。

マウスカーソルをのせてみて(その1)。

どうでしょう?変わったでしょうか?

コレはこんなソースになっています。
(CSSのみ抜粋して書いてます。)

a,
a:visited {
color:#ff0000;
background:#fff;
text-decoration:underline;
}
a:hover {
color:#0000ff;
background:#fff;
text-decoration:none;
}


「a:hover」の時に「text-decoration:none;」ってすると
下線が消えるんですよ。

背景の色を変える方法もあります。

マウスカーソルをのせてみて(その2)。

マウスカーソルをのせてみて(その3)。

これはどうなっているかというと、
その2
a,
a:visited {
color:#fff;
background:#ff0000;
text-decoration:underline;
}
a:hover {
color:#0000ff;
background:#fff;
text-decoration:none;
}


その3
a,
a:visited {
color:#fff;
background:#000099;
text-decoration:underline;
}
a:hover {
color:#fff;
background:#0000ff;
text-decoration:none;
}


皆さんも自分のブログをカスタマイズをするときの
参考にしてみてくださいね!

JUGEMテーマ:コンピュータ

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


10月14日(Sun)

Illustratorでアクア風 角丸バナー作成方法

Web2.0的なネットのデザインを覚えねば!!
なんて思って手を伸ばしたWebパーツのデザイン…
ムズイよヽ(;´Д`)ノ

勉強がてら、作り方を書いてみた。

いろんなサイトを見て、
いろんな作り方をしてみたのですが、
これが一番しっくりくるな〜ってのをご紹介。

今回はこんなバナーを作ってみよう↓
実物


1、長方形ツールで好みのサイズで四角を作成
長方形ツールで好みのサイズで四角を作成

2、パステル的な色をつけてみる。
  (変更しやすいようにグラデーションでつくってみた)
パステル的な色をつけてみる
パステル的な色の四角形

3、外枠の色を濃い目につけておく。
外枠の色を濃い目につける

4、作ったものをコピーして、「Ctrl」+Fで同じ位置に2つ貼り付ける。
作ったものをコピー

5、一番上を非表示にする。

6、表示されている2つの角を丸くする。
  (今回は10pxにしてみた。)
表示されている2つの角を丸くする

7、一番下をを非表示にして、一番上を表示する。

8、一番上を半分上に移動させる。
半分上に移動

9、右クリックでグループ化を選択。
グループ化

10、パスファインダの交差を選択すると、頭の部分だけ残る。
パスファインダの交差を選択
頭の部分だけ残る

11、枠を消して、色をグラデーションで白っぽくする。
  画像の上側をより白っぽく、下側を少しだけ白く。
グラデーションで白っぽくする
上側をより白っぽく、下側を少しだけ白く

12、非表示にしていた一番下の画像を表示する。
一番下の画像を表示する

13、上に重なっている画像が少し大きいので、
  2pxくらい幅を小さくし、1〜2pxくらい下に移動して完成。



今回は影とかをつけないで作ってみたけど、
つけてみるとまた違った印象になることでしょう。

今回は水色で作ったけど、
もっといろんな色で作ってみようかな。

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


10月13日(Sat)

今的なWebのデザインは・・・?

仕事上、デザインを作る機会がでてくるようになった。

しかし、専門的に学んできたわけじゃない僕は
常につくり方の勉強から学ばなければならない。

色合いの勉強とかもしなくちゃならないし、
どんな風に作ると、綺麗にみえるか、
どんな風に作ればかわいくみえるか…

いろいろわからないことだらけです。

加えて言うなら、
画像を作るためのソフトも覚えなければならない(;´Д⊂)

Illustrator(イラストレーター)とか
Photoshop(フォトショップ)、
それにFireworks(ファイアワークス)・・・

多いよ。・゚・(ノд`)・゚・。

一つ覚えればいいんだけど、
なぜか同時進行で3つ利用している現状です。。。

だから覚えにくいってのもあるのですが...

以前、Web2.0風のデザインってどんなのだろうな〜
なんて思って調べたことがあったんですけど、
結局うまく作れず終いだったんですよ。

でも、やっぱり綺麗なのをつくりたくなって。。。

いろいろ勉強してみました。

そして作ったのがコレ↓

色の勉強

どれも似たような感じになっているようで、
微妙に全部ちがうように作っています。

1番は単なる青色の四角形です。
つまり基本となる形です。

それをちょっと変えたのが2番。
微妙に上の部分がうすくなっているんです。
これだけでもなんだか印象がかわりますよね。

3番は、1番の色をパステルカラーっぽくしてみたもの。
4番は、2番に近いのですが、
1番の色と4番の色をグラデーションで変化させてみたものです。

どうでしょう?これだけでも結構綺麗に見えませんか?

5番はちょっとぼやけてしまったのですが、
全体を白っぽくして、さらに下のほうに影をつけてみた画像です。
ちょっと立体にするだけでも、
なんだか見栄えがちがうもんなのですね。

6番は、青から白へのグラデーション。
それにちょっと灰色の外枠をつけたものです。
ここまで色が変化すると、
4番よりも明るい印象を受けます。

順番を間違えたんですが、9番!
これは1番の四つ角をちょっとだけ丸くしたものです。

どうでしょう?
角が丸くなっただけで、なんだか和らいだ印象になりませんか?

さらに角を丸くして2番のグラデーションをつけたのが7番。
丸が深くなるほど、インパクトが強くなるようです。

8番は角丸+パステルカラーのちょっとだけグラデーション。
これなんか、本当に和らいだ印象と落ち着いた感じをうけて、
それが角丸によってインパクトを与えられた感じがしませんか?

10番は6番と比べて見てください。
ちょっとだけ角が丸くなっただけなんですが、
印象が強くなります。

そしてWeb2.0のアクアと呼ばれる感じのデザインが11番と12番!
上部が白く、角丸で立体みたいにしているやつです。


簡単にですがいろいろ作ってみました。

まだまだ勉強段階なので全然使えるものではないですが、
ちょっとは勉強したかいがあったのか、
色合いと作り方がわかってきたような感じがします。

これがきちんと仕事としていかせるようになるのは
いつの日か・・・

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


10月02日(Tue)

ブログプチ整形 全体のフォント指定とデコメモブログ変更

今日の日記はコチラ↓
ローソンとっておき宣言とリラックマ

今回はこのブログのカスタマイズのお話。

見た目上、変わる人と変わらない人がいるのですが、
全体のフォント指定を変えました。

以前は「ヒラギノ」を優先的に表示するようにしていたんですが、

なんだか見難いΣ(・ε・;)

確かにでかいと綺麗なんですが、
これがウェブになると、
なんだかかすんで見えるのです。

Macの人とかが見るとそうなる場合が多いです。
フォントが入っている人にとっては、
ちょっと見づらかったかもしれないです。

なので、もうすこし見やすいようにフォント指定を変更。

さらにMacの人でも見やすいような指定にしてみました。

・・・うん、どっちでもよかったかも(;・∀・)

↓before
before

↓after
after

それと、携帯からデコメでアップした時用にちょっとCSSを編集。
行間を読みやすいように幅をとりました。
ぎっちり詰まっていると、ウェブだとみにくいですからね。

そんなこんなで、プチ整形終了。

Jugemブログとseesaaブログでのカスタマイズを聞きたい方は、
質問受け付けようと思います!

あるかたはどうぞ、コメントにかいてくださいね。

近いうちに、メールフォームもどこかにつけようと思います。

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


08月10日(Fri)

NEW テンプレ完成♪

ようやく完成しました てれちゃうぴかぴか
すごくシンプルなデザインになってしまいましたけどね(;・∀・)


↓前にとりあえず使用していたのもシンプルだよね。


07年8月9日までのテンプレ


XHTML的にもきちんとしたのができました♪


前回の記事にも書きましたが、公開はしていません。
欲しい方がいたら公開しようかな〜なんて思います。


画像も全部オリジナルでするんるん
写真の画像も自分で撮影したのを加工したのであるモグモグ


これから徐々にデザイン以外の部分に手をだしていこうかなって思います♪
まずは・・・自己紹介の部分か(゚ー゚;A
ランキングとかも登録しよっと♪


ブログパーツとかも重くならない程度に充実させていこうと思います!


目指せ有名ブログ!!


まず無理ですけどね・・・


目標は大きく!


身近な目標としては、毎日更新させる!


しか〜し、怠慢な自分はよく更新をサボります...


ブログはリアルタイムが命なのに・・・致命傷です...
なので、せめて1日1回は更新できるように努力しようと思います!


時には一日二つなんてウラ技も・・・
使う日が来ないことを祈るばかりです(;´∀`)・・・


で、テンプレ欲しいって方いますか?


欲しいというコメント、お待ちしておりますたらーっ

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


08月09日(Thu)

カスタマイズ完了までもうすこし!

もう少しでblogのカスタマイズ終了!


でもでも・・・ものっすごくふつぅー(; ̄□ ̄A


自分で作っていて…ショックです。


Web2.0風デザインは目指していなかったですが、
そういうのを意識してしまうと・・・程遠い(;´Д`)


はっきり言えばすごくシンプルなのができてしまうところです...


でもまぁいっか (゚ー゚;A


って思いながらカスタマイズしちょります


・・・デザイン力がないな〜、俺撃沈


今のところ、公開はしない予定でいるけど、
もし気に入った人がいたら公開しようかな!


・・・シンプルすぎるからきっと誰もいないでしょう下向き

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


categories
archives
recent comment
recent trackback
friend links
link list
あわせて読みたい
search this site.
tag cloud search
others
  • RSS1.0
  • Atom0.3
powered
みんなのブログポータル JUGEM
sponsored links