home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成: 2007-01-08T01:58:41+09:00 更新: 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
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.
Captcha security check ajaxlessons.com is for sale Please prove you're not a robot View Price Processing
I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic 'external link' icon, we showed that site's favicon? View demo Instead of this: or this: Do this: The favicon gives the reader something to recognize if they are already familiar with the destination site, and if not familiar, something new to associate with it.
Are you a content creator looking to take your first steps in website design? You’re precisely where you need to be. HTML stands for HyperText Markup Language. Visualise HTML as the structural backbone of any website. A foundation that organises all the text, graphics, videos and overall layout. It operates behind the scenes, instructing web browsers how to render content for viewers. HTML is used
Example - In search of the One True Layout - One True Layout- Interactive Example オンラインで自在にCSSレイアウトをデザイン出来るサイト。 フォームにて、ページのカラム数やそのカラムのサイズを調整でき、そのままボタンを押せばプレビューが実行されます。 他にもオプションが色々選択でき、結果的に、HTMLとCSSのコードを出力することが可能。 複雑なカラムのレイアウトを独自に作りたい際にはなかなか便利かもしれませんね。 ↓プレビューされたレイアウト レイアウトを作成する効率的な方法として、他にもレイアウト集のサンプルを元にコピペで作成していく方法がありますが、 この場合、「CSSレイアウトのサンプル集」で紹介したページが使えますね。 関連エントリ サイトのCSSを見たままリアルタイムに編集するツール色々 CSS
サイトリニューアルの際に、旧デザインで各エントリーページに付けていた、hatena ブックマーク、del.icio.us 等ソーシャルブックマークへの追加ボタンをはずしてそのままにしていたのですが、これを再度掲載することに。 その際、単にアイコンを並べただけでは味気ないので、ちょこっと小技を効かせてみました。 実物はエントリータイトル横のアイコンにマウスオンしてもらえればわかるかと思いますが、せっかくなのでソースとか公開。 2007年12月14日 追記 サイトリニューアルでボタンが変わったので、サンプルを下記に移動しました。 実際に動作しているサンプルはこちら さて、今回の材料は、 アイコン画像 JavaScript ファイル 3種 本ボタンの XHTML ソース 本ボタン用 CSS の追加 JavaScript ファイルはマウスオン、オフ時の動きを制御するために使用。これは 「PJ Hy
ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」 2006年12月27日- Particletree Dynamic Resolution Dependent Layouts ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」。 読み込んでおくだけで、750px以下、750px以上/950px以下、950px以上の3つのウィンドウサイズに応じて自動でCSSを切り替えることが出来ます。 JavaScriptの知識が一切なくとも、利用者の端末に合わせて、最適なUIを選択することができ、なかなか面白い&便利。 アイデア次第で凄く優れたWEBサイトになりそうな感じですね。 (750px 以下) (750px以上/950px以下) (950px以上) 関連エントリ AjaxでSS
Welcome to JavaScript Kit, a comprehensive resource for JavaScript tutorials, scripts, and more. JavaScript Kit- What's New? How to Set Up your Desk as a Programmer for Maximum Productivity See the best, most relevant frontend courses online to take to succeed as a frontend developer in 2019 and beyond. Best Developer Frontend Courses See the best, most relevant frontend courses online to take to
With 2006 coming to an end I wanted to post a little rant about some of the trends that I find really annoying about the Web this year. All in my personal opinion, of course, and with a healthy dose of exaggeration (meaning that you shouldn't take every word literally - really, don't). You have been warned. Overuse of JavaScript frameworks/libraries. Back to the 90's, baby, except they were called
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
CSS-based liquid layout has proven successful during the reign of 800-pixel to 1024-pixel screens, but as we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout. If we want to serve devices whose viewports range from 240 pixels to about 1680 pixels—and with resolution ranging from 72 to 150 pixels per inch—we need a new method. What’s the prob
YUI: Mouse Gestures JavaScriptを使ってページにマウスジェスチャ機能を実装するサンプルが公開されています。 基本ライブラリにはYahoo UI Libraryを使用しています。 画面上の灰色部分を左クリックしながらマウスジェスチャを行うことでアクションを起こすサンプルになっています。 コードは次のようになっています。 最初に、マウスの向きと関数名を関連付けた連想配列を定義して、YAHOO.widget.Gestures.init に渡しています。 後は関連付けた関数の中身を定義するだけという実装の容易さとなっています。 <script type="text/javascript"> var config = { 'left': test1, 'right': test2, 'up': test3, 'down': test4, 'upleft': test5,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く