タグ

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

  • [webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス

    書体デザイナーと話し、長年の疑問を全て解消してきました 先日、[クリエイター]英Monotype社の書体デザイナー大曲都市さんに会いにいってきましたという記事を書きました。このときはたまたま英Monotype社の書体デザイナーの大曲都市さん(@Tosche_J)としっかりと話をする機会を得たわけですが、そこで私がフォントについて「こうだと思っているけど実際どうなのか」という質問をたくさんぶつけてきました。 私としてはすごく納得がいき、フォントというモノに対する認識がはっきりしました。なので今回はその都市さんから聞いた話を踏まえた上で私の現時点でのフォントについての考え方の着地を6つのアドバイスとして書いてみます。 特に独学でデザインの勉強をしてきた人は「こういうものだと思うんだけど、皆は実際どう考えているんだろう」という悩みを抱えているはずだと思うので、それに対する答えを出したいと思います

    [webデザイン]独学デザイナーでも自信を持ってフォントを選ぶための6つのアドバイス
  • [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)

    figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端:リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

    [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
    pink_dark
    pink_dark 2013/05/09
    「figureの場合はそのセクションから参照される。asideの場合はそのセクションの内容と無関係でよい」。aside要素との違いがぼんやりしてたけど、やっとな遠くできた。セクション・ルートは、body要素も該当するのか。
  • [HTML]素朴な疑問:空白の行は内容か装飾か ― 文章とHTML

    久しぶりのエントリになってしまいました><また元気に書いていきます★ webcre8は正直なところHTMLを学びだして大した年月を重ねているわけではありませんが、自分なりに密度の濃い学習に励んできたつもりはあります。 そしてその中ではとりあえず理解が及ばなかったり、ソースが英語で、「自分より詳しい人がこの解釈で間違いないと言っているから」「リファレンスに書いてあるから」そういうものだと受け入れてしまっているセオリー的な知識や情報も多々あります。 でも「これってそう言われてるけど当にそうなのかな」って考えることも必要ですよね。 HTMLは内容、意味 CSSは表現、装飾 これは大前提ですよね多分。pは段落。h1、h2、h3等が見出し。sectionは段落から始まるコンテンツの塊(セクション)。blockquoteは引用。このように、HTML内に書かれたテキストや画像、コンテンツ等の文書の内容

    [HTML]素朴な疑問:空白の行は内容か装飾か ― 文章とHTML
    pink_dark
    pink_dark 2013/05/08
    「意味を持っている空白」か、確かに面白いな。空白を表現するならば、<br>よりも<p>&nbsp;</p>の方がいいかなと思った。
  • [CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)

    先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー!★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですw 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ:box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、

    [CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)
  • 1