ブックマーク / webcre8.jp (10)

  • [デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した

    角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました! デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。 illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog 私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。 気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。 形状としての

    [デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した
  • [CSS]擬似要素の実用的な使用用途のまとめ

    (個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。 つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。 とりあえず擬似要素で そこで今回は自分が擬似要素を使

    [CSS]擬似要素の実用的な使用用途のまとめ
  • ちょっとこの辺でHTML5のタグを全部確認してみようぜ!!

    HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますw 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの? ― #HTML5のタグは百八つまであるぞ …? ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き@kazuhi.to: 巷(何処)で話題のmain

    ちょっとこの辺でHTML5のタグを全部確認してみようぜ!!
  • [HTML5 入門]HTML5の略された49タグの語源全てを調べた

    タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。 付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。 一応分かりにくいものだけ補足 hrタグについて よく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ

    [HTML5 入門]HTML5の略された49タグの語源全てを調べた
  • HTML5の学習に役立つ(主に)日本語のサイトまとめ2012

    webにあるHTML5の情報は英語のものが多い 当然のことですが、HTML5の情報は殆どが英語です。W3Cのサイトだって英語で書かれていますし、大抵の情報は英語さえ分かればアクセスできますね。 まあとはいえ、HTML5を勉強しようと考えるいきなり誰もが英語を読めなければならないとなるとちょっと難しいですよね。最初は先輩方の翻訳または日語で書かれたオリジナルの文書から学びたい。そして情報の速度や判断の尺度のずれが気になってきてから、それから国外の情報で勉強しても遅くはないはずです。…そう思いたいですw HTML5に関する国内のサイトや情報源をまとめました と言う訳で、今回はwebcre8が認識しているHTML5に関する情報源やリソースサイト、参考になった記事、調べてたら出てきたものをざっくりとまとめてみます。サイト、ブログ記事、リファレンス、ツール等です。せっかくなので、知っているものは英

    HTML5の学習に役立つ(主に)日本語のサイトまとめ2012
  • 私がweb制作でよく使うサイト47+α 作業ごとリスト

    web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねw 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ

    私がweb制作でよく使うサイト47+α 作業ごとリスト
  • [HTML5]文を書くのも上手くなる!セクショニングを理解する

    webcre8はまだまだ不勉強なところもありますが、HTML5の学習を進めるとともに、このセマンティックWebについて深く興味を持っています。それを通じて学んだことや考えたことはこのブログに残していこうと思います。ご指摘などありましたらブログのコメント欄や@webcre8の方にご連絡頂ければと思います! セクショニングの立ち位置 HTML5にはセクショニングと言う概念が存在します。文書構造を明確にする考え方のことで、要素としてはセクショニング・コンテンツやヘッディング・コンテンツに分類されている要素がそのマークアップ上の役割を担っており、これらの要素を用いてセクショニングすることで、文書は正しいアウトラインを得ます。これについては過去記事の[HTML5]アウトラインで迷わない! sectionと見出しについてをお読み頂ければと思います。ある程度勉強したけどsectionとかarticleの

    [HTML5]文を書くのも上手くなる!セクショニングを理解する
  • デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

    元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいw はじめに:デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。 だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ

    デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素
  • [webコンテンツ]パブリックドメインで使える音楽・画像・テキスト等まとめ

    まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。

    [webコンテンツ]パブリックドメインで使える音楽・画像・テキスト等まとめ
  • [Photoshop]極座標フィルタでできるクリエイティブ表現色々

    調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。

    [Photoshop]極座標フィルタでできるクリエイティブ表現色々
  • 1