WEBレイアウトの画像をアップしてドラッグ＆ドロップでHTMLに変換できる「RecRec」:phpspot開発日誌
RecRec - Image to HTML WEBレイアウトの画像をアップしてドラッグ＆ドロップでHTMLに変換できる「RecRec」。 サイトのレイアウトの画像をアップロードして、ブロック部を選択するだけでHTMLとCSSを出力できるWEBベースのツールです。 生成されるHTMLはdivベースのデザインになります。 簡単なものならこれで仕上げちゃうこともできそうです。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル そのまま使えるWEBレイアウトのPhotoshopテンプレート40 スタイリッシュなWEBレイアウト作成Photoshopチュートリアル PhotoshopによるフレッシュなWEBサイトレイアウト作成チュートリアル集８０
DreamweaverからCodaに変えました
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
ウェブデザイナーとしてスキルアップするための20のメソッド
素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に
【レポート】HTML5の機能を知るための15のデモンストレーション | エンタープライズ | マイコミジャーナル
Tech Drive-in - Technology, Linux, Ubuntu FTW 主要ブラウザの対応が進んでいることもあり、HTML5の技術を活用したデモンストレーションサイトが増えている。現在主流の技術と互換性が高いことから、すでにHTML5を採用すべきという意見もある。ブラウザの更新頻度は早まる傾向にあり、HTML5/CSS3の対応は日進月歩で進んでいくことになるとみられる。 HTML5やCSS3のデモンストレーションサイトやテクニック紹介ブログはこれまで何度も取り上げてきた。15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash - Tech Drive-inにおいて、HTML5デモンストレーションサイトがまとめられており参考になる。中にはこれまでマイコミジャーナルで取り上げたサイトも含められている。紹介されて
https://footballpanthershops.com/
Liebe Besucher von FootballPantherShops.com, Wir möchten Sie darüber informieren, dass die Webseite FootballPantherShops.com nicht mehr weitergeführt wird. Diese Entscheidung wurde getroffen, um Ihnen eine noch bessere Nutzererfahrung zu bieten und Sie auf neue, spannende Inhalte aufmerksam zu machen. Während die Seite nicht mehr aktiv ist, empfehlen wir Ihnen zwei hervorragende Alternativen, die
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
ウェブデザインに磨きをかけるテクスチャの効果的な使い方
テクスチャの用途は単に背景に配置するだけではありません。最近のウェブトレンドでもある繊細なテクスチャを使用して、ウェブデザインに磨きをかける方法を紹介します。 How the use of textures can improve your web design 下記は各ポイントを意訳したものです。 はじめに 1. イラストの強調 2. エレメントのグルーピング 3. コンテンツの強調 4. リアリティとデザインの奥行き 5. 独創的な魅力 テクスチャを活用したウェブサイト集 はじめに ウェブデザインに必要なのは確かなる知識と創造性、そして情熱です。そして、素晴らしいウェブデザインを産みだすテクニックはたくさんあります。その中の一つ、テクスチャの使い方を紹介します。 1. イラストの強調 繊細なテクスチャは、イラストにより強い個性を与えることができます。下記のサイトにあるテクスチャは、イラ
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
CSS3 を活用したボタン等の作り方 - WebOS Goodies
先週の Icon Creator Widget に続いて、本日も Opera の開発者向けサイトからのネタをひとつ。公開されたのは先月末なのですが、 CSS3 の text-shadow, box-shadow, border-radius などを活用して美しいボタンやボックスを作成する方法の解説記事が掲載されていました。今後の Web 制作でとても役立つテクニックだと思うので、その内容を簡単にご紹介します。 なお、この記事は CSS3 を使用しているため、ブラウザによっては正しく表示されません。たぶん Firefox, Google Chrome, Opera の最新版であれば大丈夫かと思います（Safari は box-shadow に未対応）。 text-shadow, box-shadow, border-radius について 元記事ではすぐに本題に進んでいるのですが、ここでは
pagetutor.com - pagetutor リソースおよび情報
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.
Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 いちいち英語を調べるのもメンドいし、かといって「gaiyo」とかじゃ気持ち悪いし、どうしたもんかねー、とずっと思っていました。 で、今回、勢いでざっくりとまとめてみたのでついでに公開します。 本当にざっくりなので抜けもあるだろうし「それくらい書かんでも分かるわボケ」なものもあるでしょうけど、まぁそれは追々。 ディレクトリ名やファイル名として使用することを前提としているので、文法とかは全く考慮してませんので悪しからず。 最近、医療・病院関係のサイトに仕事で関わることが多
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
100％、CSSのみで構成されるメニューの作り方 - GIGAZINE
JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
【ネタ帳】すべてのデザイナーはGetしておくべきハイクオリティなフォント50種類 25記事*二十歳街道まっしぐら
ColorJack: Design Tools
[CSS]ボタンやナビゲーションを実装するスタイルシートのチュートリアル集
Zymic ¨ Free Templates & Tutorials