タグ

web制作とhtmlに関するyananakiのブックマーク (12)

  • ウェブ制作者のためのベストエントリ33【2010年7月版】

    というわけで、しばらくまとめていなかったまとめ記事を再開し、私は元気ですとアピールしたい。 7月にあつめたブックマークのまとめです。 7月度必須ブクマベスト HTML5 Canvas Cheat Sheet 悩んだけど一応ベストへ。 HTML5 Canvas tagのチートシート。日常的に使うものでもないし、開発者向けになってしまうけど念のため。 OSを選ばないウェブデザイナーのための使えるウェブアプリ15*ホームページを作る人のネタ帳 7月に書いたけどついこの間のようだと思ったら、あんまり記事かいてないからそう思うんだきっと。 ついでにこちらも7月でした。 今日から現場で使えるjQueryのフォーム関連プラグイン15選 iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた スマホアプリ開発者ならブクマしておきたい一品です。 Googl

    ウェブ制作者のためのベストエントリ33【2010年7月版】
  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

  • 【HTMLタグの簡単検索】TAG index - ホームページ作成情報

    ページ全般 ボックス テキスト リンク リスト イメージ テーブル フレーム フォーム フィルタ CSSの基 CSSプロパティ一覧[ABC順] リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

    【HTMLタグの簡単検索】TAG index - ホームページ作成情報
  • コーディング前に確認しておきたいこと。 - CSS HappyLife

    CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう?ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は?って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容(だと良いな)! じゃあまずは最初に確認しておきたい基的なことか

    コーディング前に確認しておきたいこと。 - CSS HappyLife
  • 誰でも作れる! “崩れない”HTMLメルマガ作成術(1/4)- @IT

    誰でも作れる! “崩れない”HTMLメルマガ作成術:一撃デザインの種明かし(12)(1/4 ページ) キレイなHTMLメールを作るコツ/Tips盛りだくさん! ECサイトはもちろん、企業サイトのニュースなど、いまなおプッシュ型の情報配信として支持されるメールマガジン。一時のフィードリーダーの盛り上がりもあり、以前に比べると落ち着きましたが、まだまだメールマガジンの効果は侮れません。 今回は、そんなメールマガジンの中でも、表現力豊かなHTMLメルマガの作り方について、徹底解説します! 「HTML」自体は、それほど難しくないが…… 「HTML」というマークアップ言語自体はプログラム言語に比べると手が出しやすいので、Webを仕事としていない方でも触れた経験をお持ちの方はいらっしゃるのではないでしょうか? そういう人にとっては、HTML言語自体はそれほど難しくないと思います。 しかし、そのHTML

    誰でも作れる! “崩れない”HTMLメルマガ作成術(1/4)- @IT
    yananaki
    yananaki 2010/07/16
    メルマガ案件てたまにしかないけど、結構苦労することがある
  • Webページ制作の効率をUPするためのカスタマイズ | デベロッパーセンター

    Dreamweaverをカスタマイズするには、環境設定を変更したり、エクステンション(機能拡張)をインストールするといった方法がよく知られていますが、Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法もあります。Dreamweaver自体を構成するファイルはXML、CSSJavaScriptが多用されており、これらを編集することで機能の追加やUIの変更といったカスタマイズが可能です。Dreamweaverを利用する人にとってはこれらのコードは読みやすく編集しやすいでしょう。ここでは特にWebページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。 なお、記事内に登場するConfigurationフォルダは記事末尾の「各プラットフォームのConfigurationフォルダの場所について」にてご紹介しています。カスタマイズ前には念のため、"必

  • CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net

    cssHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニュー シンプルなドロップダウンメ

  • HTML+CSS templating

    HTMLテンプレートを作るのは簡単? 赤の他人が作ったHTMLテンプレートを簡単に編集できるか? 新人に数千ページのサイトのコーディングを任せられるか? HTML, CSS, JavaScriptを覚えればコーディングは楽勝? そこまで簡単じゃないかもしんない ブラウザのバグ? まぁそれもあります Cascadingという仕組みは素敵ですが あっという間にコードが大変なことになります CSSには素敵なセレクタがたくさんありますが、 残念ながらIE6を下限とする環境では使えないものばかり

  • 見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

    ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
  • より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net

    Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding(家) HTMLコーディングが3倍速くなる?「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla

    より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
  • 論より証拠!! 米Appleが"HTML5"のデモページを公開 | パソコン | マイコミジャーナル

    Appleが、HTML5、CSS3、JavaScriptなどWeb標準技術で構築されたWebサイトのリッチな表現力や機能を紹介するショーケースページ「HTML5 Showcase」を公開した。Safariブラウザを使って、以下の7つのデモを体験できる。 ビデオ:videoタグを使ってWebページに組み込まれた動画プレイヤー。再生/一時停止、画面サイズの変更が可能。再生画面全体を傾けて奥行きを出す機能も備える。 タイポグラフィ:CSSSVGを用いたベクターベースのフォントの装飾。書体・サイズ・色の変更のほか、行間・字間・透明度の調節、回転や影のオン/オフなどが可能。 ギャラリー:CSSトランジションと3Dトランスフォームを用いた写真ギャラリー機能。写真が流れるストリップを2D/3D、縦方向/横方向に切り替えられ、またグリッド表示も可能。 トランジション:CSS 2Dおよび3Dトランスフォ

  • 1