Archive for the ‘HTML & CSS’ Category

css-miami-desktop

どうもこんにちは!最近はとっても寒いですね。
しかも、新年からなんとなくイメチェンしたくて先輩のやってる美容室に行って
「なんか変わった感じにしてください」とお願いしたら、ものすごい刈上げをいただき、首元がスースーすごい!
第二次世界大戦時のドイツ男性みたいな髪型になりました。面白い!でも寒い!

近況報告はこのあたりにして・・・。

最近友人のホームページを製作中に、友人の提示するフォントをホームページ中に使って欲しいと言われました。
WEBフォントの事は大体知っていたので、「ああ、出来ると思うよ。出来る出来る。」と二つ返事で快諾したところまではよかったのですが。
もらったフォントはTTFファイルであるにも関わらず、ど~しても適用できない。
どこのリファレンスを見ても

@font-face{
  font-family:'testFont';
  src:url('FontFileName.ttf') format('truetype');
}

.test{
  font-family:testFont;
}

と書いたら適用できました!ワーイ!みたいな事が書いてあるのですが、自分のはそうはならない。
なんでー!!といろいろやりつつ結局ほぼ丸一日ハマってしまいました。(つらたん)

しかしとうとう、この問題を解決する事ができました。
問題はフォントファイルのタイプ、または状態にあったようです。

フォントファイルを変えて試してみようと思いたち、
こちらのサイトで変換しようとしてみたところ
this file is corruptedと(このファイルは腐ってる)言われてしまいました。
それで、こちらのサイトでTTFをWOFFに変換してみたところ、上手くいきました。

これを以って、

@font-face{
  font-family:'testFont';
  src:url('FontFileName.woff') format('woff');

.test{
  font-family:testFont;
}

と記述してみたところ、testクラスにフォントを適用することがようやく出来ました。
この状態でスマフォでサイトを確認してみると、フォントは適用されておらず(Sleipnir)、
改めてTTFをソースに追加しました。

@font-face{
    font-family:'testFont';
    src:url('FontFileName.woff') format('woff'), /* Modern Browsers */
    url('FontFileName.TTF')  format('truetype'); /* Safari, Android, iOS */
}

どうやら、.TTFファイルはiOSやAndroid、SafariでのWebfont適用を可能にし、
通常のモダンブラウザ(FF,Chrome)等で見るときは.WOFFという形式にしないといけないのではないのかな。と。

しかし僕の持っていたTTFフォントファイルはCorrupted認定されていた訳で、普通のTTFファイルなら問題なく表示出来ている物だったのかもしれません。

なにはともあれ、かくしてホームページに目的のフォントをスマフォ、PCのブラウザ両方に適用する事ができました。
この問題解決のいとぐちはこちらのWebparkさまから頂きました。
感謝いたします。

ここまで読んで頂いてありがとうございました。

では、また!

photo by: geirarne
css-miami-desktop

css3から画像や文字にドロップシャドウの適用が可能になりました。
使ってみたら調子が良かったのでメモ。

今回使うのはこのプロパティ

.dropshadow{
    -webkit-box-shadow: 10px 10px 6px -6px #777777;
       -moz-box-shadow: 10px 10px 6px -6px #777777;
            box-shadow: 10px 10px 6px -6px #777777;
}

“-webkit”はAppleが定めた独自拡張のCSSです。
もともとはsafariのレンダリングエンジンとして開発されました。

“-moz”はMozillaが定めた独自拡張のCSSです。
FireFoxのレンダリングエンジンとして開発されました。

そして接頭辞のついていないものがCSS3で定められたドロップシャドウです。
“-webkit”も”-moz”もCSS3の登場によって無印box-shadowに統一されますので、今後開発の際には使ってはイケマセン。

しかし未だcss3は過渡期であり、css3をサポートしておらず、かつ”-moz”や”-webkit”をサポートしているブラウザが多いため、より多くのブラウザでドロップシャドウが見えるように一応定義しています。

では早速実験。

■ ドロップシャドウ:適用してみる

まずは通常のイメージ

次にドロップシャドウを適用してみます。

どうでしょう?ちょっと良い感じじゃないですか?

■ ドロップシャドウ:プロパティの意味

と言う事で、それぞれの引数の意味をメモ。

.dropshadow{
    -webkit-box-shadow: 10px 10px 6px -6px #777777;
       -moz-box-shadow: 10px 10px 6px -6px #777777;
            box-shadow: 10px 10px 6px -6px #777777;
}
  • 1つ目の10pxは水平方向の影のオフセットです。正の値で右側へ、負の値で左側へ影が移動します。
  • 2つ目の10pxは垂直方向の影のオフセットです。正の値で下側へ、負の値で上側へ影が移動します。
  • 3つ目の6pxはぼかしの距離です。負の値は設定できません。値が大きいほど影がボケます。
  • 4つ目の-6pxは影の大きさです。正の値で大きく、負の値で小さくなります。

影の大きさについては試しに-20pxにしてみたら上の例では影はなくなってしまいました。
色の値を指定すると、影はその色になります。
insetキーワードの指定で、内側の影を作る事もできます。画像には適用できないようです。

.dropshadow{
    -webkit-box-shadow: 10px 10px 10px 10px #777777 inset;
       -moz-box-shadow: 10px 10px 10px 10px #777777 inset;
            box-shadow: 10px 10px 10px 10px #777777 inset;
}

end

Internet nerdery means that I can never just look at numbers like this without associating it with the HTTP status code

web上でサイトを見まわっていると時に「404 Not Found」などのエラーが出る事があります。
これはHTMLの規格上設定されたエラー番号(正確にはステータス・コードと言います)なのですが、それぞれ番号によって意味が違ってきます。

■ HTMLにおけるエラーの種類

・403
アクセス権限のないフォルダへのアクセスの際に表示

・404
ページ自体が存在しない場合に表示

・500
CGI等のプログラムのエラー等が起こった際に表示

・503
サーバーアクセス過多状態の際に表示

などなど、他にもステータス・コードは沢山存在しますが、普段目に付くのはだいたい上記のものあたりでしょう。

さて、おしゃれなサイトなんかは「404 Not Found」さえもおしゃれなページが表示されたりする事があります。
これは、「エラー404を踏んだユーザーを指定したページに飛ばす」という処理がなされているからなんですね。

この処理を可能にしているのは「.htaccess」というファイルに書かれているコードです。

■ .htaccessとは

.htaccessとはウェブサーバーがディレクトリごとの動作を制御する為のファイルです。
制御情報は.htaccessの存在するディレクトリと、サブディレクトリ全てに適用されます。
制御の具体的な例としては、IPやドメインによるアクセス制御や、CGIの設定等です。

本筋に戻ります。404エラーを踏んだユーザーを指定のページに飛ばすという事は以下のコードを書いた.htaccessファイルを設置すれば実現できます。

ErrorDocument 404 http://www.example.com/

404の数字を他のステータス・コードに変更すればそれぞれのステータス・コードごとに表示するページを変更する事ができます。
例では存在しないページを訪れた時、ユーザーはhttp://www.example.com/に接続する事になりますね。

ちなみに、.htaccessファイルはWindows上では作る事ができないと思います。先頭に”.”(ピリオド)の付く名前のファイルを作ろうとすると「名前を入力してください」とシステムから警告が出されます。
この先頭に”.”を付けるという形式はもともとUnix系のシステムで隠しファイルにする為の文化なのです。

なので、Windows上ではまず適当な名前を付けて、FTPソフトでアップロードした後に改めて”.htaccess”と名付けてやるのがいいと思います。
基本的に、”.htaccess”はウェブサーバーのウェブ公開ディレクトリのルートにおいてやれば動いてくれます。

photo by: itselea