マークアップ時に助けになるwebツール、サイト5選+@
tanです。 先日マインクラフトにはまったのですが、家を建て終わったら満足してしまいました。 でっかい目標立ててすごいの作りたいです！ さて、マインクラフトでも重要になってくるのがツールです。 木を切る時には斧を、地面を掘るにはスコップを使うととても効率がいいです。 マークアップもツールが大事になってきます。 エディタやsublime textのプラグイン、フリーソフトなど色々試しているのですが、 今回はwebツール、サイトを紹介しようと思います。 もくじ 変換ツール 特殊文字 タグプロパティ対応早見表 生成ツール チェックツール まとめ 変換ツール css2sass cssをsass(scss)に変換するツールです。 cssを上のテキストエリアに貼り付けて「convert 2 SCSS」ボタンを押すと、scssに整形されたcssが生成されます。 scssはcssの拡張子をscssに変える
デザイナーチームにコーディングのお話をしました。
こんにちは、デザイナーのてっちゃんです。 自転車に乗るのが楽しすぎて毎週多摩川サイクリングコースで羽田まで行っています。 今回は、デザイナーチームに対してコーディングを講座した話をします。 内容はこちらから確認するとして、背景や所感をお伝えしようと思います。 背景 デザイナーチームではスキルをあげるために隔週で課題に取り組んだり、情報共有を行っています。 その中で、苦手分野となっているコーディングについて取り組みたいという事で、コーディングも行っている僕からみんなに話をすることになりました。 デザイナーチームの中でも当然問題意識としてありましたが、業務では中々やる機会がないので、 ちょうどいいタイミングでした。 目的 コーディングと言ってもかなり幅の広い話なので最初に軽いヒアリングをして目的設定を行ないました。 今までコーディングを全くしてこなかったわけでは無かったので、初歩の書き方は置い
コードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツール
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> function googleMap() { var latlng = new google.maps.LatLng(,);/* 座標 */ var myOptions = { zoom: , /*拡大比率*/ center: latlng, mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] } }; var map = new google.maps.Map(document.getElementById('map1'), myOptions); /*アイコン設定*/ var ic
知らないと一生後悔するDreamweaverで正規表現
そろそろいくらが食べたくなって来ました、tanです。 なんとか効率化できないかシリーズですが、今回は正規表現です。 コーディングを進めていくうちに、まとめて変換したい部分が出てきたりします。 例えば、ナビゲーション部分に変更があり、拡張子がjpgからpngになった！ こんな単純な決まった文字列＋連番の組み合わせなのに、普通にやると一括置換できません。 複数のページに跨ったり、変換したい要素が離れていたりするとなかなか手間です…！！ こんな時は正規表現なら一発です！ 様々なプログラム言語で使われている正規表現ですが、難しそうでなかなかとっつきにくいです。 でも少し知っておくだけでもなかなか便利です！ 今回は決まった文字列＋連番です。 連番ということは、数字です。 数字は「\d」です。 （無理して覚える必要はなく、調べれば一覧が出てきます） Nav\d.jpgで検索をかけると、Nav1.jpg
!importantはもう使わない！CSSの優先順位をおさらいしよう
先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった！ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。 もくじ 0.デモの準備 1.基本の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと？ 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし 「ある程度なら知ってるよ！」って方は5.つまりどうゆうこと？から読んでもらえれば大丈夫かと思
【怖くないJavaScript + jQuery】コンテンツの高さを自動で調整してくれるjs
ウィンドウの高さに対して、コンテンツの内容が少ない場合、footerより下の部分が真っ白になってしまう…しかし邪魔だしfooterをfixedにはしたくない。そんな時ってありますよね。 Sticky footerなど他にも手はありますが、内容が動的の場合使えなかったりするんですよね。 そんな時に便利な、コンテンツの高さを自動調整してくれるjsを作ってみましょう。実はとっても簡単なんです。 コンテンツ部以外（headerとfooterなど）の高さが固定であることが条件です。 今回はページ読み込み時にのみ処理を走らせます。ウィンドウサイズが途中で変更された時は妥協して何もしません。 デモはこちらから ファイルのダウンロードはこちらから
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
FC2からWPへ引越した際のお話 #今更 / Maka-Veli .com
超今更ですけど、いつもなんとなくググりながらやっていて何も残していなかったのでメモっておきます。丁度今さっきやってたので。 ただしだいぶ既出なので細かいところ割愛は省略しています。流れだけ。 ちなみに移管はこのブログの話しじゃないです 流れ FC2管理画面 > ツール > データバックアップ > エクスポート > 記事全部 > 全ての記事 > ダウンロード をクリックして○○○○.txtをダウンロード。 次に、同ページ下部の ファイルバックアップ > 画像ファイル >ページ○○ > リストを開く をクリックして、表示される画像を全てダウンロード。 FireFoxだと DownThemAll とかアドオンで一気にダウンロードできますが、100件単位でページが分かれてるので、数が多いと結構辛い。 通るかわからないけど、管理画面から一気に全ファイルDLして後でゴニョゴニョして画像フ
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX | コリス
Effect -LetterFx LetterFXの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body> Step 2: HTML アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。 <p
HTMLメール制作のコツや便利なサービスいろいろ
2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「WEB屋さん1年目に知ってほしいマークアップ4つのこと」というお話をしました