Upload your creations for people to see, favourite, and share.
エクセルの表をHTML保存したとき出力されるソースには属性・スタイル・ルビ・フォントタグなどが多量に含まれている。 それら不必要なHTMLソースをDreamweaverの正規表現置換で一掃する。 HTML化 エクセルから以下の方法でHTMLにする。 表のセルを選択(全体に適用する場合は3へ) Ctrl+N → Ctrl+V (新規作成とペースト) 「Webページとして保存」または「ブラウザでプレビュー」 「ブラウザでプレビュー」の場合は開発者ツールでHTMLをコピー後、 DreamweaverでHTMLドキュメントを新規作成してペーストするか、「名前をつけて保存」をする。 ここでは前者を例に取る。 「Webページとして保存」した場合 表はHTMLのテーブルタグに変換され、こんなソースが出ます。(headは省略) 「ブラウザでプレビュー」から保存した場合 Firebugなどの開発者ツール経由
2010年07月23日11:00 iPhoneやAndroid端末のWebアプリを作ろう!無料フレームワーク「Sencha Touch」【プロに学ぶ67WS通信】 カテゴリセキュリティ こんにちは、ロクナナワークショップの佐々木です。 iPadや、iPhone・Androidなどの端末の進出により、様々な環境への対応が求められるアプリケーション開発。ロクナナの制作チームも、いろいろなプラットフォームに向けたアプリケーション開発には苦労しています……。 そんななか、最近気になっているのは、ユーザーインターフェイス部分をWebブラウザに実装してしまうというWebアプリケーション。開発の容易さや、iPhone以外のプラットフォームでの動作などは、ネイティブアプリケーションよりWebアプリケーションの方がメリットも大きいようです。 そこで今日は、Webアプリケーション開発に便利な無料フレームワーク
iPhone(iPhone 3G/3GS)/iPod touchは、PC向けサイトがそのまま表示できるところが大きな魅力の一つです。しかし、小さな画面や、指で操作するとインターフェイスなどのようにデバイス特有な面も多く、PC向けサイトのままでは必ずしも見やすいとはいえません。そこで本記事では、Dreamweaverを使ってiPhone向けサイトを作る時のテクニックや注意点をご紹介します。 必要条件 この記事を最大限に活用するには、次のソフトウェアが必要です。 Dreamweaver CS5 体験版 今すぐ購入 制作したサイトの表示結果を確認する方法 ライブビューでプレビューする Dreamweaver CS5(および CS4)には「ライブビュー」機能が搭載されており、ページのレンダリングにはWebKitエンジンを利用しています。iPhoneのSafari(Mobile Safari)も
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R&D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 前回の記事(マークアップ効率化 - zen-codingでコーディングを倍速に)ではZen-Codingの基本について説明しました。 また、その内容をCSS Nite実行委員会(公式ページ)が主催した、Dreamweaver Town Meeting in TokyoというDreamweaverにフォーカスをあてたイベントで公演させていただきました。 [撮影:飯田昌之] その公演では、Zen-Codingを知らない方向けに、Zen-Codingとは何か・どんなことが出来るのかなど、基本に関して実演を行い
Dreamweaverをカスタマイズするには、環境設定を変更したり、エクステンション(機能拡張)をインストールするといった方法がよく知られていますが、Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法もあります。Dreamweaver自体を構成するファイルはXML、CSS、JavaScriptが多用されており、これらを編集することで機能の追加やUIの変更といったカスタマイズが可能です。Dreamweaverを利用する人にとってはこれらのコードは読みやすく編集しやすいでしょう。ここでは特にWebページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。 なお、記事内に登場するConfigurationフォルダは記事末尾の「各プラットフォームのConfigurationフォルダの場所について」にてご紹介しています。カスタマイズ前には念のため、"必
Dreamweaver用の拡張機能をまとめました。 便利なものばかりなので、ぜひお役立てください。 タグ挿入・文字列変換 コメントを生成して挿入するDreamweaver用拡張機能 <!– /#container –>などのコメントを簡単に挿入できます。 IDやClass名は自動で取得してくれます。 Adobe – Dreamweaver Productivity : Close Tags 閉じていないタグを閉じてくれます。 Adobe – : Adobe Dreamweaver 10周年セミナー:全角・半角変換拡張機能 全角の数字やカナを半角に直したり、その逆もできます。 携帯サイト作成にも便利ですね。 Zen-Coding DreamweaverでZen-codingが使えるようになります。 (CS3の方は、Zen Coding for Dreamweaver v0.5を選ぶといいかも
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
株式会社ワンパクの近藤&杉山の師弟コンビが 、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回取り上げるのは「正規表現を使った検索・置換」です。正規表現を使えば、値の異なる属性を検索したり、特定のマークアップ構造の要素を検索したりと検索の幅がグッと広がります。そして、「杉山のこれ知ってます?」のコーナーでは、使用頻度の高い検索・置換のパターンや便利な検索・置換のパターンを保存して、すぐに呼び出せるようにするクエリーについて紹介します。 やればわかる! わかれば使いたくなる! まずははじめの一歩! 杉山:師匠、ちょっと聞きたいのですが…。今やっている案件のHTMLにはいろんな人が関わっていて、ちゃんとした管理がされてなくて、HTMLのコードがタブでインデントされていたりされていなかったり、記述方法がバラバラで気持ち悪いんですよ。あれほどイン
株式会社ワンパクの近藤&杉山の師弟コンビが 、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回取り上げるのは「ショートカットキー」です。「ソースコードの操作」「ファイルの操作」「タグなどの編集」の3つに分類して紹介します。ショートカットキーを使いこなして、作業のスピードアップを目指しましょう。そして、「杉山のこれ知ってます?」のコーナーでは、<table>に関する便利機能として、<table>のソートと表データの読み込みについて紹介します。 基本は構えから! 近藤:なっとらん! そんな構えはまったくもって、なっとらん! 杉山:えっ…!? 構え!?!?ですか!?!?(@_@) 近藤:うむ。常に左手がWindowsならCtrlキー、MacならCommandキーに添えられているのが美しいファイティングポーズだ。 杉山:…ファイティングポーズ?…
xamppなどのテストサーバー環境を自分のPCにセットアップしている場合は、 Dreamweaverのサイト定義の際、 「ローカルルートフォルダ→xamppのhtdocs以下に作った任意のフォルダ」 「テストサーバーフォルダ→上記と同じフォルダ」 に設定しておけば、DreamweaverでF12を押したときのブラウザプレビュー時に、 いちいちローカルフォルダからテストサーバーフォルダへのファイルコピーが発生しないので、プレビュー表示の時間にロスがない(ローカルフォルダとテストサーバーフォルダが別だとファイルコピーに時間がかかったりコピーされるまでにタイムラグがある場合があり、頻繁に修正→表示確認を行う場合にかなりストレス)。 また、IEでプレビューする場合は、 「ツール→インターネットオプション→インターネット一時ファイル→設定→保存しているページの新しいバージョンの確認」 で、「ページを
AutoHotKeyを使ったスクリプト 先週土曜日のSaCSSコーディング勉強会 vol.4のライトニングトークでお話した、 AutoHotKeyのスクリプトを作ったので、取り急ぎ公開します。 何が出来るの? Dreamweaverで「Ctrl + s」を押して上書き保存された瞬間に、 バックグラウンドのFirefoxに「F5」を送って自動でブラウザをリロードさせるスクリプトです。 htmlやcssを書き換える度にブラウザを更新しなくても良くなるので、 活用すればコーディング速度がアップして集中力も途切れなくなるはずです。 ダウンロードと使い方 【スクリプトのダウンロード】 zipを解凍した中に、起動するだけで使えるexeファイルがあるので実行。 セキュリティ不安な人は、 AutoHotkey公式サイトのDownloadページから「AutoHotkey Installer」でインストール。
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く