Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
今回はJavaScriptとWebページの表示・操作の体感速度について考えてみます。というのは,JavaScriptのせいでWebページの表示や操作などの速度が遅くなっている,と感じることがあるからです。 現在のWebサイトでは,JavaScriptを使って使い勝手を向上することは,ごく当たり前に行われています。例えば,動的にページを書き換えたり,ページ遷移を行わずにサーバーと通信を行ってデータを取得したりと,JavaScriptを使うことで,Webサイトをより便利に,より使いやすくすることができます。 Ajaxという言葉がはやってから,もう2年以上がたつんですよね。何年か前,JavaScriptはじゃまで,セキュリティを低下させる不要なものだと見なされていた頃がありました。しかしそれから一変して,「JavaScriptをがんがん使ってもいい」という空気になったことで,Webサイトを作成す
Crazy Egg'sで実装されている、テーブルのハイライトされた箇所を動的に切り替え、別の要素を表示するスクリプトの紹介です。
こないだの「インターネットってどういう仕組みで動いているの?」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。 想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。 ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。 じゃあ、さっそく始める! ユーザビリティって何? まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな? 日本語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、っ
データの妥当性検証は、ユーザからデータを受け取るウェブアプリケーションにとっては必須の機能だ。なぜなら、データの形式が正しいかどうかを、作業を行う前にまず確かめる必要があるからである。ウェブアプリケーションで妥当性の検証を行う際には、ASP.NETやJSPなどで利用可能なプラットフォーム固有の機能を使用するか、それともクライアントサイドでJavaScriptの機能を利用するかを選択することが可能だ。そして、ここでJavaScriptを選択した場合、正規表現を用いることによって検証作業を単純化できるようになる。 正規表現は一種のパターンマッチである。正規表現を用いるとテキストのパターンを簡単に表現することが可能になるため、正規表現はテキストデータの妥当性検証で大きな威力を発揮する。また、正規表現ではパターンマッチだけではなくテキストの置換を行うことも可能だ。私はかつてPerlを用いてUnix
勝つためのクラウド活用術 New Value on Azure ビジネスを次のステージへ! 50年の経験を持つアイネットが提供 ユーザー企業の使いやすさを第一に考えた ワンストップで使えるマネージドクラウド エッジ市場の活性化へ 高まるIoTを中心としたエッジ分野への期待 OSS活用が新しい時代のビジネスを拓く クラウド導入が進まない本当の課題 ITベンダーだからこそ知っている クラウドに二の足を踏む企業のボトルネック 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 ハイブリッドクラウド時代の救世主 企業ITを素早く進化させるためのAVS サービス開始から1年で大幅に機能がアップ 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 ID管理の基礎知識 新しい働き方におけるITガバナンスの
セキュリティモデルは変わった! クラウド活用、リモートワークはあたりまえ いま求められるゼロトラスト実現のために コンテナをエンプラITに! コンテナ活用の基礎 本番実装が増える背景とメリット データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある デジタル時代のITインフラ構築術 仮想化統合、クラウドを経て今「マルチ」へ ITインフラの最適化と継続的進化への道筋 ヤフー担当者が語る! 安心なサービスを作るための試行錯誤 効率とリスクのバランスをどうしているのか 時代はサーバ仮想化からコンテナへ あらためて整理したい企業ITにおける コンテナ活用の基礎と採用メリットを紹介 自社利用の知見・経験を顧客に提供 コンテナ活用を推進する日立製作所 VMware Tanzuを利用したモダナイズを伝授 激変するビジネス環境の中でのDX モダンアプリ
IEでJSのエラーになったときに立ち上がるデバッガって大体の人が使いこなせてないのではないでしょうか? ちなみに僕もそうだったのですが、ふと思い立って調べてみました。 追記 (2008-01-10T14:24:30+09:00) はてブのコメントで、 MS Office持ってない人はVisual Web Developer(VWD)で。/ちょっと前にこんなの書いたので、VWD 2008使う人は参考にしてもらえると幸い。 http://d.hatena.ne.jp/terurou/20071218/119796573 とありました。 これはid:kaorunさんにも聞いていたので後で試そう〜と思ってたので助かります。 合わせてご覧になって下さい。 Microsoft Script Editorとは? のようにOffice付属のツールだったりします。僕の環境では、 C:\Program Fil
ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 デジタル時代のITインフラ構築術 仮想化統合、クラウドを経て今「マルチ」へ ITインフラの最適化と継続的進化への道筋 RPAによる自動化を年30万で実現 小さな投資が目に見える大きな効果に! デジタル化によるわかりやすい業務効率向上 EDRトップランナー対談:後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる ITインフラ運用からの解放 HCI+JP1による統合運用による負荷激減で 次世代IT部門への役割変革へ一歩前進 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 オー
JavaScriptの関数を用いると、一連の手順をまとめ、簡単に特定のタスクを実行したりクラスのコンストラクタとして動作させることが可能になる。JavaScriptの基本的な関数についてのドキュメントはインターネット上に多数存在するが、それよりもむしろ、高度な関数の機能について調べてみよう。本稿を読んで、再帰やそれ以外の高度な機能を利用するために必要な洞察力を高めていただきたいと思う。 難しい話題に入る前に、JavaScriptで関数を定義するにはどのような方法があるのか見てみよう。 JavaScriptで関数を定義する方法 JavaScriptでは以下のような3種類の方法で関数を定義することができる。 function文を用いた定義 Function()コンストラクタを用いた定義 functionリテラルによる定義 ここでは、addという関数を作成することによって、これら3つのアプローチ
Facebox 1.0 Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」。 リンクをクリックで次のように画像をポップアップしてくれます。 これはFacebookでも使われているポップアップ方法のようで、知っている人は知っている、ポップアップの仕方のようです。 コードは次のように非常にシンプルです。 rel="facebox" でポップアップしてくれるみたいです。 <a href="/facebox/remote.html" rel="facebox">text</a> jQueryベースなので軽量な点もうれしいところ。 ちょっと気分を変えたい方は導入
WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 昨年末のことですが、かの Google 情報の大御所『Gmailの使い方』の管理人様からメールが届いていました。なにごとかと思って開いてみると、 「Gmail Greasemonkey API について、例のGoogleガジェットAPIのような解説ページを書いてみる気はないですか?」 というご依頼でした。う〜む、確かに Gmail Greasemonkey API
Greasemonkeyの過去においてのセキュリティ上の問題の解説。 Greasemonkeyだけに限らず、JavaScriptによるユーザ拡張を作成している全ての方に対して一読の価値があるドキュメントだと思われます。 原文:O'Reilly Media - Technology and Business Training Greasemonkeyの共通な落とし穴を避ける Greasemonkeyのセキュリティの歴史があなたの今にどう影響するのか (著) Mark pilgrim "Greasemonkey Hacks"の著者 2005/11/11 昔々、あるところにセキュリティホールがありました。(これは普通のおとぎ話ではないからそのまま読んでください。) Greasemonkeyのアーキテクチャは最初に書かれて以来大幅に変更されてきた。Version0.3は初めて広範囲に人気を得たバー
ZAPA氏の記事。 ニュータイプなJSライブラリjQueryを使ってみよう! これを見てから3日間。 ブログもあまりかけずこればっかりいじって遊んでました。 睡眠時間も1日2時間くらいになり、今日は書こうと思います。 まずZAPA氏、きっかけをありがとう。 私はJavaScriptの知識がほぼ皆無な人間です。 そんな私でもjQueryは簡単に使える為、面白くてはまりました。 ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。 ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。 JavaScriptダメダメの私でも出来ました データベース接続部や、なんやかんやは全てPHPでまかない、動作部分やFormなどはjQueryに投げる。 こんな方法で色々試して見ましたが、A
Greasemonkeyスクリプトを書くひとはこのへんを注意するといいと思います。 ほとんどDOM関連なのでGreasemonkeyに限った話じゃないかも。 異るドキュメントのノードをappendChildしたりinsertBeforeしたい場合は、一旦importNodeをしてから実行する htmlDoc.documentElement.appendChild(fragment)↓ htmlDoc.documentElement.appendChild(htmlDoc.importNode(fragment, true))fragmentがhtmlDocに属していなかったので、htmlDocにimportNodeしてからappendChildするようにした。 参考: Textノードを追加できない - DOSEI日記 http://d.hatena.ne.jp/DOSEI/20071013
(このエントリーは「Javascriptクイズ:無名関数と実行効率の話」の続編。) 「???」と頭をかしげる太郎に、「じゃあ、これだったらどうかな?」と三郎はコードを書き始めます。 function code2name(code) { var mapping = { 'us': 'United States', 'ja': 'Japan', 'ko': 'Korea', 'ru': 'Russa', 'uk': 'United Kingdom', 'fr': 'France', 'cc': 'China', 'gw': 'Germany' }; return mapping[code] || '(unknown)'; } 「カントリーコードを国名に変換しているんですね。」と太郎。 「どこが問題だか分かる?」 「うーん、マッピングのためのオブジェクトを毎回作り直しているところかな。」 「そう
Javascriptを使い始めたばかりの太郎君に、上司の花子さんから「スタイルシート用のスタイル名をDOMからアクセス可能なプロパティ名に変更するJavascriptのライブラリを作って欲しい」という課題が与えられました。何のことか分からずにポカンとしている太郎君に、花子さんは「"font-style" を"fontStyle"に変更する関数を作ればいいのよ」と言い残して立ち去ってしまいます。 O'ReillyのJavascript本としばらく格闘した太郎君は、やっとライブラリを完成させます。 function capitalize(str) { return str.charAt(1).toUpperCase(); } function style2prop(str) { return str.replace(/-[a-z]/g, capitalize); } "font-style"が
前回作った【e】パレットの後継に当たるもので、殆ど機能は変わらないという恐ろしく微妙なブックマークレットを作りました。 例にすると、紹介したいブログエントリを発見。 ただの紹介じゃ寂しいと思ったらこのBパレットを使います。 すると以下のようになります。 とりあえずはてぶ数を、リンクの右側に表示するようにして『タグ化』を選びます。 すると・・・。 こんな感じのタグが出てきますのでコピペーします。 そうすると、 Photoshopカスタム・シェイプいろいろ - DesignWalker ↑はてぶ数がついたリンクが完成>< ブックマーク数はリンクの回り、上、右、下、左の4種類から選べます。 2007年ウェブデザインの6つのトレンド | コリス CNET「読者ブログ」上でSEO業者が検索エンジンスパムな記事を何本も書いている件 ブックマークははてなブックマークと、livedoorClip、Buzz
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く