今回、初めて画像からHTMLの起こし、CSSの適用までやってみましたが、まー大変ですね。 コーダーのみなさん、ありがとございますです。 でも、1枚なんとかやり遂げたので、2枚目以降はもっとスムーズだと思うし、大体の時間間隔もつかめたことですし、説得力のある無理のいいかたができるのではないかと（おい というわけで今回気づいたこと・やったことをまとめてみました しかし、HTML5とCSS3で表現力があがりますね！楽しいぞ！未来！ 角丸 この辺は基本ですよね。もう。山ほど、ノウハウだったりtipsもでてますし。 -moz-border-radius: 12px; -webkit-border-top: 12px; ちょっとだけ気の利いた事するんだったら、例えば、4つ角の1箇所だけ角丸にしたい場合 mozillaとwebkitで異なっているのでちょっと注意が必要です -moz-border-rad
HTML5ではこれまでのHTMLより明確に文書構造、意味を示すことができるように新要素が追加されました。 その中で、コーディングコンテストで使用したものを紹介します。 記事のタイトルにある「アウトライン」とは文書の階層構造のことです。 HTML5ではアウトラインをどのように判別するか定義されているので、マークアップする際はこのアウトライン・アルゴリズムを意識することが重要です。 header要素 セクションのヘッダーを示します。通常はセクションの見出し要素などに加え、セクションに関する概要やナビゲーションなどをマークアップすることができます。 セクションの中で1つ使用できるので、1ページに1つまでではなく、ページ内に複数出現することも可能です。 footer要素 セクションのフッターを表します。ヘッダー同様にセクションで使用ができ、そのセクションの著者情報や関連ページへのリンク、著作
2010年4月17日のCSS Nite LP9にて株式会社ピクセルグリッド主催、CSS Nite LP9連動 第2回コーディングコンテストの結果発表が行われ、89件（有効81件）の応募作品の中から優秀作品が選ばれました。 告知・募集ページ 審査について 審査は審査員それぞれが7点まで作品を選出するプレ審査、その後、2名以上の審査員に選ばれた作品を本審査という流れで行いました。 審査風景写真 審査委員長から 審査委員長の小久保です。コンテストに参加されたみなさん、また応募するまでは行かなかったけれども課題に挑戦されたみなさん。本当にお疲れ様でした。そしてありがとうございました。今回のコンテンストのお題はチャレンジングな要素が多く、かなり時間がかかったことと思います。私は前回のコーディングコンテストでも審査員を務めさせていただきましたが、今回は課題が難しくなったのにもかかわらず応募作全体のレベ
コーディングコンテンストについて 4月17日に開催されたCSS Nite LP, Disk 9「Coder’s Higher」にて、第2回コーディングコンテストの審査結果発表が行われたのですが、そちらで入賞を頂きました。 CSS Nite LP, Disk 9「Coder’s Higher」については当日のTwitterのTLを参照して頂ければなんとなく雰囲気が伝わるかと思います。 入賞した作品 応募したのは以下のHTMLになります。 Movable Type 5 他のcssファイル、画像ファイルは0ファイルなので、このindex.htmlだけを応募しました。 ちなみに1枚にする前のファイルはこちらにまとめてあります。 詳細は続きから。 前提みたいなもの ちゃんと手を付けたのが締め切り日の13時付近で、まあ11時間くらいあれば終わるだろうなんて思っていたら… まったく持って終わらない
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
締切後のソース公開OKらしいんで晒しておきます。 応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。 連休中のいい暇つぶしになりました。 イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は４日くらい。 例によってMooToolsをしこたま多用してます。 完成したのはこれ ボタンにはCSS3のtransitionとグラデーションをフル活用してます。 このプロパティ面白いんだけど手打ちは地獄を見れるぜ…！ transition.cssのカオスさは必見かもしれない。 一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。 工程スクショ Chromeの神プラグインWebページショットで制作経過を撮影してみた。 製作中に気づいた事など 要素を均等に横並びにするdisplay:boxが意外と使えない 横並びしたく
![[HTML5+CSS3] 第二回コーディングコンテスト に参加してました](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4a6b7027cd8fa3fb524681defedc3f52bfbd6d0/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2010%2F03%2Fnormal-160x300.png)
おおよそ2週間くらいかけて、仕事の合間チマチマやってたら結局間に合わなかったので、どんな感じになったか、今回の問題点、実現可能な手法の考察をまとめてみた。今さら感満載でお送りしますｗ スクリーンショット オリジナル 作ったページ 実際のページはこれ 不足点 出来てるところより出来てないところを挙げた方が早いので。 一番上の黒いバーみたいなところ 右上の「Movable Type ドキュメントプラグイン」ボタン画像の :hover,:active の実装 キャプチャの拡大（フツーに画像ファイルにリンクする予定だった） 「個人ライセンス」のダウンロードボタン（2番目と同じ理由） 「関連製品・ソリューション」の画像が違う（ミスですｗ） 上記5点さえクリアされてれば提出できたけど、なんだかめんどくさかったのを後回しにしてたら間に合わなかったｗ 「Movable Type ドキュメントプラグイン」画
CSS Nite LP9というWeb制作関連のセミナーイベントと連動して行われた「第2回コーディングコンテスト」で優秀賞をいただきました！応募作品はこちら ≫ ウェブサイト管理の新標準。 Movable Type 6以下、気になったところ、苦労したところ、僕の作品の変わってるところなどページの上のほうから適当に。(※見難かったので書き方を変えてみました) 対象外ブラウザへの対応 情報が正しく伝わればOKとのことだったので、html5.jsでHTML5に対応していないブラウザでも新要素を要素と解釈してくれるようにした上で、IE7以前ではCSSを読み込まないようにしました。IE8、Opera、Chromeは割と普通に見れたので特に対策はしませんでした。 Safari4がbox-shadowのinsetに未対応 少なくとも僕の環境(WindowsXP)のSafari4最新版では、box-shad
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.
先日、ALPHA LABEL: アルファラベルのふっちーさんからお誘いがあり、Attribute=51のぐりさんとボクの男三人で飲んできました。 ふっちーさんとがっつり話したのも初めてだったのですが、ぐりさんは以前からブログを拝見していたのもあり、会いたい人の一人だったのでお会い出来て良かったです＞＜ 思わず二件目行っちゃうくらい楽しい時間を過ごせました。 さて、17日に行われたCSS Nite LP, Disk 9「Coder's Higher」にて第二回コーディングコンテストの結果が発表されました。 入賞された方々、おめでとうございます！ 今回、残念ながら最優秀賞は該当者無しと言う結果になってしまいましたが、開催目的である これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。 は十分達成されたのかなーと思います。 ボクも、
ユーザー目線でのデザインが得意で、プロダクトの成長をより加速させるためのデザインも得意です。 toC ユーザー向けのプロダクトのデザインを注力していましたが直近は、toB ユーザー向けのプロダクトのデザインに注力しています。 他、ロゴや Web サイトデザイン/マークアップ、写真撮影、映像撮影・編集、デザインの講師など。 自己紹介 (note) About - puzzel.jp 2010年10月からスタートした、puzzel.jp。 開設時から1つまえのサイトが残っています。 デザイントレンドによって変わっていたり、ガラケー対応のサイトだったりと、時代を感じることができます。 History: 2010, 2011, 2012, 2013, 2014, 2016, 2020 Chompy, Inc. 2021 - 2023 フードデリバリーサービス Chompy の UI / UX デザ
許容できないくらいHTMLのエラーが出ていますのでもろもろご注意ください。 CSS Nite LP9 連動 第2回コーディングコンテストが開催されています。僕も応募しましたのですが、取り組んだ際の反省などを。 いろいろデカイこと言ってすみません えーっといきなり謝ってしまいますが、「賞を狙っているんですよー」などと大きなことを言ってしまいすみませんでした。何名かの、すでに応募作品を公開されているを見る限り「あー、ここはこうやれば良かったのか」などなど反省点がわんさかありまして、柄にもなく自信をなくしました。 残念な点 ページ上部の影ですが、body:afterなんかでやるのが一番スマートっぽいですね。気づかずにbodyにたいしてbox-shadow: insetを使ってます。さらにそうするとページの左右にもぼかしたぶんだけ影が出てしまったので強引に消したりしています。さらにその強引さがゆえ
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.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
