覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
Firefoxの開発ツール
2. この資料について • JavaScript での開発を助けるツールの紹介 • 想定する読者 • これまで Firebug を利用して来た方 • JavaScript で開発をされて来た方 • デバッガを利用したことがある方 2
新型はてなブックマークボタンを速くする
遅い原因も調べてますがとりあえずその辺は後述ということで、先に新型はてブボタンの動作を速くする方法から書いていきます。 まずはてブのボタン配信ページから貼り付けコードを取得します。こんな感じの HTML スニペットがもらえると思います。 <a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz" class="hatena-bookmark-button" data-hatena-bookmark-title="さくらたんどっとびーず" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリ
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。 - webruary
隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。 Category:Web 2012-05 11 Comments 0 TrackBack 0 今更ながらCSSのセレクタがちょー便利。 IEも場合によっては強制自動更新で8もしくは9になった関係上、ココ最近結構多用してました。 (↑正直、もぉIE6については他のブラウザと表示が違くなっててもスルーしたり…。) そこで、自分が使い方を勘違いしてたところがあったのでメモしつつ、誰かの参考になれば。 ここから続き 隣接セレクタと間接セレクタのサンプル。 とあるタグと、とあるタグが隣同士の時に発動。 css h3+p{ background:#f00; } html <h3>h3さん</h3> <p> h3と隣同士のpタグ。 ここは背景が赤くなる。 </p> <h4>h4さん</h4> <p> h4と隣同士のpタグ。 ここは背景がかわらない
試す価値あり!?Firefox開発ツールの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして！デザイナーのハルエです。 LIGに入社して1週間。現在私は自分を開花させる機会をうかがっている最中です。 ところで皆さんはWEBサイトの制作中、どの開発ツールを利用していますか？ おそらくお使いのメインブラウザによって大きく分かれるのではないでしょうか。 Firefoxの方はアドオンの「Firebug」。 ChromeとSafariの方は標準搭載されている「デベロッパーツール」など。 私自身はずっとFirefoxにお世話になっていたのでFirebugを愛用していましたが、速さと快適性に衝撃を受け2年程前にメインブラウザをChromeに切り替えました。 開発ツールもChrome版のfirebugからChromeのデベロッパーツールに変えたりと、ここ最近ふらふらしてたわけです。 ところが・・・なんか聞けばFirefoxに標準搭載された調査機能が進化しているそうで。 さらっと乗り換え
IE条件付コメントまとめ｜クロノドライブ
条件付コメントとはIEの独自仕様でそのコメントで囲われた部分の表示・非表示をバージョンによって分けることができるというものです。 例えば、IE用のCSSを別に用意した場合に、そのCSSを読み込む際に使われたりします。 IE条件付コメントの書式 条件付コメントの書式は、指定のバージョン・指定のバージョン以上・指定のバージョン未満に分かれます。 指定のバージョン <!–[if IE 6.0]>内容<![endif]–> 指定のバージョン以上 <!–[if gte IE 6.0]>内容<![endif]–> 指定のバージョン以下 <!–[if lte IE 6.0]>内容<![endif]–> 指定のバージョン未満 <!–[if lt IE 6.0]>内容<![endif]–> 6.0 というのがバージョンの指定です。ここの数字を変更することで、対象のブラウザを決めることができます。 指定のバー
画像置換のあれへの補足
先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式がありました: /* Phark method */ .ir { height: 100px; width: 400px; background: url(image.png) no-repeat 0 0; text-indent: -9999px; } このテクニックは長らく利用され続けてきましたが、その代替として、パフォーマンス面でより良いとされる Scott Kellum さんのテクニック (ケラム式) が Jeffrey Zeldman さんの記事 で紹介されました: /* Kellum method */ .ir { height: 100px
＆nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)
いかがでしょう？ WEBブラウザにもよりますが、結構実際の見た目も違うように思います。 で、冒頭の「半角スペースと 」の件ですが、ちゃんと意識しておかないと「あれ？」と思うことがあります。 「 を半角スペース (0x20) に置き換える」プログラムがあるように、「 を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。 冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした おまけとして、 を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。 use HTML::Entities; use Encode; use Data::Dumpe
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
HTML5 基礎知識 - web探検隊
HTML5を書くための基礎知識をメモHTML5の雛形XHTML5ではなくてHTML5のマークアップについて html> head> title>HTML5 基礎知識title> meta charset="UTF-8"> head> body> body> html> HTML5の新要素 文章構造に関するものsection汎用的なセクション。文章のアウトラインを構成する。articleセクションの一種で、Webページから独立したコンテンツを表す。asideセクションの一種で、外側のセクションに対する補足情報を表す。navセクションの一種で、外側のセクションに対するナビゲーションメニューを表す。footerセクションのフッター。headerセクションのヘッダー。hgroup複数の見出し(h1-h6)をまとめる。 外部コンテンツの埋込みfigureキャプションを伴うような内容のものを文章中に埋
XSLT により XML ファイルを HTML として表示する際のノウハウ的なもの - vivid memo
Web サービスや Web アプリケーションなどでは、データを XML でやりとりすることも多いと思います。 XML ファイルをブラウザで表示するようなこともあるかもしれません。 そういうとき、XML ファイルのテキストデータがそのまま表示されるよりも、HTML 形式で表示された方が見やすいわけで、そのために使用するのが XSLT というものです。 XSLT とは、XSL (Extensible Stylesheet Language) による変換 (Transform) のことです。 XSL は XML に適用するスタイルシートの一種で、XSLT により XML 構造を別の XML 構造に変換したり、HTML や単なるテキストデータに変換する事ができます。 XSLT によって XML を HTML に変換するための方法については各種サイトにて解説がありますので、ここでは注意点を書いておき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
携帯サイトを見ている時にフルブラウザで開きなおすようなリンクを貼る方法を教えてください。…