HTML,CSS

記事の詳細 表示・非表示

領域からはみ出てる文字列をCSSだけで「・・・」にする

サイトを作っていると、デザイン的に一行におさめたい・・。という時があります。

そういう時はJavascriptで文字制限したり。予めサーバー側で文字制限した文字列を渡してもらうなどして対処していたのですが

CSSでできないのかなぁ・・。といろいろ試したところ少しつかいどころに制限はありますができるようです!

続きを読む

Sublime Text 3でその場で翻訳してくれるプラグイン 「Google Translate」

最近jQueryのプラグインなどを作っていてなるべくコメントを英語で書くようにしてるのですが。
(とはいっても、Google翻訳さんのパワーをかりてとりあえずです・・。)

その場で手軽に変換とかできないかなぁと探していたらありましたのでご紹介です。 これ使ってみたのですが、めちゃ便利な気がしました。

たとえば変数名を何にしようかなぁって迷っていた時などに、日本語で打ってから変換したりがその場で手軽にできるので素敵!

※ そもそも英語を勉強しろっていう話もありますが・・;;

続きを読む

border-imageをbefore,after擬似要素で使うとRetina対応もできて便利

ボックスの周りに装飾として画像を置きたい場合に背景画像で対応するのもいいのですが

3つに切って・・。真ん中を繰り返しして・・。
さらに透過だった場合どこのタグに背景をいれるか工夫したりするのが大変だなぁと思っていました。

そういう場合はborder-imageを使ったりしていたのですが
border-imageを使うとborder-width分コンテンツが内側によっちゃいますよね・・。
まぁborderなので当たり前ですが・・。
しかも普通にやると画像だけ1/2にすることができないので、Retina対応とかできないんです。

でもこれafterとかbeforeに指定したらborder-widthとか気にせずに使えるんじゃない!?
と思って試してみたらめちゃめちゃ便利!しかもRetina対応もできちゃうし!

みなさんも是非使ってみてくださいw

続きを読む

Sass,Compassでフォルダ内のファイルリストを取得するカスタム関数

Sass,Compassでフォルダ内にある複数の画像をとってきて背景画像を指定したいときなどに、「全部書くのってめんどくさいなぁ・・」って思っていました。

なので!指定したフォルダ内のファイル名を取得してくれるやつを作ってみました!コードも省略できたり。
新たにフォルダ内に画像を追加してコンパイルすればコードを書く手間も省けたりで使い勝手良いと思います。

続きを読む

Sass,Compassでファイルの有無を返してくれるカスタム関数

配列で繰り返し処理をし、image-urlなどを使ってその名前の画像を表示するような仕組みの場合

そのファイルが無いとsassではエラーになってしまいます。 その時にその画像の有無をとってきて画像がない場合には処理が走らないようにしたり。

またはファイルの有無によって処理を変えたりなどの用途に使うことができます。

続きを読む

SassとCompassを使って楽しくCSSコーディング!

最近CSSも慣れてきて、面白みがないなぁ・・。と思っていました・・。
なのでいろいろと新しいことをやろうーと思って、SassCompassを試してみたら・・。

すごい便利!

特にスマートフォンサイトなどでたくさんCSS3を使う場合には特に便利!

なので自分が忘れちゃった時のため&
皆が少しでも手軽につかえるようになればなーということで、まとめたいと思います。

続きを読む

Yahoo! UI Interface Library Font CSSを使うとIE8でFontが固定されるのを直す方法

IE6、IE7、IE8、CSSでfont-sizeをpx、ptで指定するとFontサイズが固定されてしまいます。

Yahoo! UI Interface Library Font CSS」を使っている場合に、IE6、IE7ではハックを使って固定されないようになっています。

しかし!IE8では固定されてしまうようです・・。

続きを読む

ブログなどに音楽ファイルを載せる(貼り付ける)タグ

最近は、youtubeや、ニコニコ動画などにアップロードして音楽などを載せるなどという方法もありますが、自分のサーバーにアップロードして、音楽を流す方法(貼り付ける方法)です。たまに使うときなどに、自分が忘れてしまうため、メモです・・。

続きを読む

border: 1px solid red;

  • kamem
  • カテゴリー : HTML,CSS

HTMLとCSSをつかってホームページを作ってる人にとっては、border: 1px solid red;がかなり重要で。

単純に、赤い線を引いてっていう支持なのですが、確認作業時にかなり便利なのです。

もう自分なんか0.5秒で打てちゃうぐらいです。

続きを読む

角丸CSS

こういうものがあるよーってことは知っていたんですが、使った見たことがなかったので、実際に使ってみよーってことで、ためしに!

えいや角丸になれ!

とう!

うんよいよー!

あ、IEには反映しないみたいです!IEユーザーさん申し訳ございません!

続きを読む

カレンダーに月別で絵を載せる

2008年5月
        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 31

カレンダーっぽくカレンダーの上に月ごとにかわる絵を載せてみようかなーとおもいまして、Movable TypeとCSSでうまくやる方法です。

続きを読む

IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法

昔できなかったことでも、時間がたってからやってみたら以外にすんなり解決することってありますよね。それがこれです!むかーし、がんばってこれを解決する方法を考えに考えまくったのですが、答えが出なかったんです。だけども、いまやって見たら案外すんなり答えが出ました。

続きを読む

このページの先頭へ戻る