jQueryで正規表現を学んでみる。【基礎編】
Posted: 2010.11.14 / Category: javascript / Tag: jQuery, 正規表現 正規表現といえばフォームチェックがぱっと思いつきますが、最近ではjQueryで外部APIで様々な情報を取得する機会が増え、それによって文字列の置き換えなどもできるようにならんとな、と思ったりしている人も増加しているはず！ ということでお手軽に使えるjQueryを使用して正規表現をちょこっと勉強してみようと思います。 文字列を置き換える基本の形 正規表現の前にjQueryで単純な文字列を取得して、置き換えて表示するということをしてみます。 html <p> 正規表現はjavascript以外のプログラムやテキストエディターなどの検索でも使えます。でもここではJavaScriptを使うんです。 </p> 例えばここにpタグでマークアップされた文字列があります。 「java
:before 疑似要素を使ってテキストを画像に置換 - lucky bag
Image Replacement （背景画像置換）ネタ再び。我ながらしつこいネタだけどキニシナーイ。とりあえず今回は、:before 疑似要素を使って、テキストを画像に置換してみるっす。 残念ながら、IE は:before 疑似要素をサポートしていないんだけど、この方法による利点は画像オフ CSS オンの状態でも問題なくテキストを表示してくれるってこと。おそらく IE7 ではサポートされると思うんで、IE7 がそこそこ広まったうえで、それ以前の IE をバッサリ切り捨てる潔さがあれば、意外と使える方法かもしれない。 :before 疑似要素によるImage Replacement の仕組み :before 疑似要素と content プロパティを使うことによって、当該要素の前に生成内容を挿入することが可能になる。今回のImage Replacement （背景画像置換）の仕組みとしては、
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
iPhone4 Retina Display対応のデザインのコツ！
僕はどうやったらRetina Displayが綺麗に表示されるか必死に模索する毎日です。（保護シート含め） ということで、今後のiPhone開発に”必須!!!"のRetina Display対応のデザインデータの作り方のコツについてご紹介します！
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS-Tricks
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022, gained support in Safari 16, are finding their way into macOS and iOS, and are slated to be the future for password managers like 1Password. They are already supported in Android, and will soon find their way into Chrome OS and Windows in […]
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
オリジナルテーマの作り方 3.0+
2014年8月22日 Wordpress WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが（もちろんあった方が楽ですが）、自分でデザインをするためのPhotoshopとCSSの知識は必要です。 ↑私が10年以上利用している会計ソフト！ WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマ作成 完璧ガイド WordPressをローカルにインストールする WordPress オリ
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
Tags of tumblr.
Text: Tumblr で使えるタグ - 導入 2010-01-20 IntroductionDashboard で Customize をクリックして Theme タブを選択し、Use custom HTML ボタンをクリックすると tumblelog のテーマを自由に編集できるようになる。 この CustomHTML に {…} や {block:…}…{/block:…} 形式の要素を仕込むことで、それらが別の要素に置換される。 例えば <head><title>{Title}</title></head> と書けば、{Title} がページ作成者の設定したページタイトルに置換される。 マークアップに用いる {…} 形式の要素を「変数」、{block:…}…{/block:…} 形式の要素を「ブロック」と呼ぶ。また、ブロック要素に囲まれた部分を「内容」と呼ぶ。 例： <html>
HugeDomains.com
Captcha security check monodez.com is for sale Please prove you're not a robot View Price Processing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript + Ajax 実践サンプル集 - ホーム
https://design-spice.com/2012/06/13/responsive-web-design-image/
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
IDEA * IDEA
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
http://www.designwalker.com/2010/05/css3.html
