第15回リクリセミナー「Frontrend in Osaka」 - Re:Creator's Kansai http://recreators.doorkeeper.jp/events/5240 で利用したスライドです。本編60分でした。 同年の7月に行ったWCAN Summer 2013の講演とは…
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
前回のエントリーに続き、今回は2段組の部分をやっていきます。 取り合えず、2段組部分の仕様をば。 デザインを見ていただければお分かりになるかと思いますが、サイドメニューの下に破線があるんですが、その破線がちゃんとメインコンテンツ部分の内容にあわせて伸びる（繰り返す）ようにします。 ボクの組み方はfloatなんでpositionを使った全体のレイアウトに関しては、ウチでは期待しないで下さい。（ポジションによるレイアウトでサイトを作成した経験がありません...） このサンプルのHTMLはサイドメニューがソース上、コンテンツの上に位置してます。 メインコンテンツ部分が上に来ても同様のレイアウトが実現できますが、それは追々ってことで。 だいたいこんな感じです。 んじゃ、いってみますか、、、 前回のエントリーが、ビックリするくらいアクセスあってびびってますが、変なプレッシャーに負けずまったりマイペー
現時点で約200個以上のウェブサイトテンプレートが無料でダウンロード可能になっており、ライセンスも商用利用可能なものからGPLライセンス、CCライセンスまでいろいろ。 特筆すべきは検索機能の充実具合で、XHTML準拠、ライセンス別、明るい系か暗い系か、幅は固定かそうでないか、カラムの数、色名を組み合わせて絞り込みが可能。 詳細は以下の通り。 Open Design Community - Download Free Web Design Templates - OpenDesigns.org http://www.opendesigns.org/ 強力な検索機能の利用は以下から。 Search Designs ・ OpenDesigns.org 以下からサムネイル画像でテンプレートのプレビューを見ることもできます。サムネイル画像の上にマウスを乗せれば詳細な情報が表示されるので便利。クリック
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height
最初に真っ白なページを作り、そこにシンプルな文字列を配置して、徐々に形を整えていくことによってデザインを作り上げるというプロセスをスクリーンショットで記録してGIFアニメーションにすることでわかりやすくしています。このデザインプロセスのGIFアニメーションの作者によると、この記録のタイミングはHTMLファイルを保存したタイミングで行っていったそうです。こうすることによって過去のどの時点でデザインをどのように変えたのかが自分でわかるようになり、過去の時点に戻って別のデザインに発展させるパターンなども可能になるとのこと。また、記録することによってどういう意図で自分はこの部分のデザインをこのように変更していったのかという記録にもなり、制作の腕が上がるそうです。ちょっとした修行みたいなものですかね？ GIFアニメーションは以下から。 designline-openair.gif (GIF 画像,
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/926613b1f7bf3db5a7cb6f8141c603e41d3c2275/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
Why virtual private servers are worth considering for the new website owners? There are multiple steps and processes that people in Australia need to follow in order to set up their website. In fact, there is a range of possible services, solutions and helpful resources that are needed to help people get started with the online business setup. We cannot say that each and every person who gets read
2006-12-13T09:47:51+09:00 数日前に行ったリニューアルでは、いくつか課題を設けました。ただただリニューアルしても張りがありませんし、ウェブデザインを行うものにとって自身のウェブサイトは自身の作品のようなものだし、好き勝手できるのも魅力なわけです。何回かの記事にわけて、リニューアルでおこなった作業をまとめていこうと思います。 前回、スタイルシートを分けて管理する方法をまとめるで CSS ファイルを分割管理するメリットや、どのように分割するか案を書いてみましたが、今回のリニューアルで実際に案を元に分割管理を実践し、結果はリストのようになりました。各ファイルの概要は案段階から変化がないので、そちら参照ください。以下のリストでは、テーマファイル以外の実際の CSS ファイルにリンクしています。 common.css component.css fonts.css scree
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
パチンコの遊び方と攻略 – 成功のための戦略を発見しよう！パチンコの遊び方をマスターしよう！プロのテクニックを習得して勝者に！パチンコの楽しさを体験しよう！成功のための戦略を発見しよう！戦略を鍛えてより高い勝率へ！
A premium domain name exclusively for sale on the BrandBucket network. Dynamic Drive: A vibrant, forceful name that conveys motion and innovation, suggesting cutting-edge technology and forward-thinking solutions. Possible uses: A mobile app for car diagnostics. A tech platform for logistics. An adaptive learning software. Full ownership of domain dynamicdrive.com. Logo design source files and rig
AJAX calls do not cover updates from the server, which are needed for the modern real-time and collaborative web. PubSub (as in “publish and subscribe”) is an established messaging pattern that achieves this. In this article, Alexander Gödde will look at precisely how PubSub solves the updating problem, and he’ll look at one particular solution (the WAMP protocol) that integrates both the calling
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
What can be better than simple, useful and handy tools you can use “on the fly” in the development process? Whether you’d like to test font size, generate online-forms, create rollover-navigation, create a slide-show, format CSS code or optimize your code - you can use dozens of tools to make your life easier. What can be better than simple, useful and handy tools you can use “on the fly” in the d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
