毎日暑いですねーそろそろ暑さにも飽きてきたpearmasterです
さて、以前何気なく見ていたページですが
テキストをコピペしようと選択すると・・・
消えてしまうやろー!
ほんとビックリです
と、とにかく見てください!
→コチラ
Ctrl+Aしてみてください、消えちゃいますよー(IE以外で見てね)
さて、そのソースを簡単にしたのがコチラ
どうやらJavaScriptで選択したら消しているようです
(詳細はソース見てね)
どうしてもコピーされたくない文章を公開する時なんか使えそうですね
どうも、chomeoです。デザインリニューアル一発目に投稿できるなんてなんかいいもんですね!
デザインリニューアル任されたんですが、正直楽しかったです。ツイッターのAPIの取得とか新しいことにたくさん触れることができたと。
で、リニューアルついでに前々からやりたかったことしちゃいます。
iPhoneのsafariには、webクッリップ機能がついていて、好きなサイトをホームにアイコンとして設置することができるのでそのアイコンを作ろうかと。
<head>内に<link rel=”apple-touch-icon” href=”×××.png” />の一行でいけます。
後は、画像設置するだけ。簡単ですね。
続きを読む »
流行に乗ってみたよ!→Demo
無駄に背景2つ使ってみたりしてます^^
ゆくゆくはスターターキットにしたいと思ってるので細かいpaddingなどは指定していません。
(4/22)
FlashDevelop3.1.0_RTMが出たと教えてもらったので、EmEditorからそっちに移行。
しかしCSSのZenCodingには対応していなかったorz
色設定とかフォントとか環境を見やすいように適当にいじった後、コーディング開始。
パンくず・pagetopを追加。
リンク内容によってリンクアイコンが変更するようにCSSを記述。
a[href$='.pdf']{
padding:2px 18px 1px 0;
background:url(../img/pdf.png) no-repeat center right;
}
a[href^="mailto:"]{
padding:1px 18px 1px 0;
background:url(../img/email.png) no-repeat center right;
}
続きを読む »
またまたまたまたtsutomukunでございます。
今回もよろしくお願いいたします。
前回に引き続き今回もhtmlネタなのですが、display:inline-blockというものを
探っていきたいと思います。
コーディングしているときに、よくdisplay:blocckを使うことがあると思いますが、
それはinline要素をblock要素にするもので、今回のdisplay:inline-blockも同じ感じで
inline要素やblock要素をinline-block要素にするというものです。
それでは、inline-block要素とはなんぞやという話になりますが、
「inline要素でもあり、block要素でもある」ということなのです。
はい。意味分かりませんよね・・・
ということでサンプルを作ってみました。
(先に言っておきますが、このdisplay:inline-blockはIEでは対応しておりません。
ですのでIEで見られている方はFirefoxでご覧いただけたらと思います。)
さてさて、サンプルをご覧いただけたらお分かりの通り、なんかfloatがかかったような
レイアウトになっていますよね。でも、よく見てください。floatがかかったように見えていますが、
中央寄せになっていますよね。文字サイズを大きくしていってもらえれば、
段落ちして分かりやすいと思います。
この世にfloat:centerなるものがあれば可能ですが、現時点では無理ですものね。
ソースを見てもらえれば分かると思いますが、もちろんfloatを使っておりません。
これがinline-block要素なのです。
「inline要素のように間割り込みが効くblock要素」というわけです。
中央寄せに回り込ませれることができるのでIEが対応してくれたら
何か面白そうなことができないかなーと思いました。
またまたやってまいりました。tsutomukunでございます。
今回はhtmlのタグで遊んでみようと思います。
先に言っておきますがあくまで「お遊び」ですので実用的なものは一切ございません。
あしからず。
【文字と下線の色違いリンク】
以前にコーディング作業中にたまたま文字と下線が色違いになったので
それを利用して作ってみました。
内容は簡単で、下線の色をaとa:hoverで設定してやって
文字の色を<strong>や<span>などで設定してやります。
初めの文字はfirst-letterで色づけしてやってます。
とてもカラフルなリンクテキストのできあがり♪
【リンクできないリンク】
リンクを飛ばさないという意味ではないです。リンクテキストにマウスを持っていっても
リンクの場所が動いてページに飛べないというものです。
が・・・・なんだかうまくいきませんでした。本当ならカーソルをあわせたら
別の場所でピタッと止まっていてほしかったのですが
ブルブル震えてうまくいきませんでした・・・要検討でございます。
【下線がブルブル】
こちらはご覧の通り下線がブルブル動いております。
仕掛けは簡単で、gifアニメを引いているだけなんですが
ただ引いているだけだと文字サイズを変更されたら表示されなくなっちゃうので
そうはならないようにしています。どうなっているかはソースをご覧あれ。
【背景チェンジ】
これは、カーソルを合わすと背景の色が変わっちゃうというものですが、
うまくいかなくて皆に手伝ってもらって(完全にお任せして)作ってもらいました。
三人(5人ですが)寄れば文殊の知恵とはよくいったものです。
こんな感じでaタグの可能性を探って遊んで見ましたがいかがだったでしょうか?
もっとなにか面白いテクニックがあればぜひぜひお教えいただきたいです。