タグ

ブックマーク / hail2u.net (5)

  • レスポンシブ・タイポグラフィーなど

    ウィンドウや画面のサイズに合わせて文字の大きさを自動的に変更するテクニックは、俗にレスポンシブ・タイポグラフィーまたはフルイド・タイプと呼ばれている。当初は僕も良いアイディアだと思い多用していたが、重要なのはビューポートの大きさではなくデバイスとの距離だろうと思い直したためもうほとんど使うことはない。当初から嫌いといっていた人はこの辺にしっかりとした意識があったのだろう。 使うことをやめた理由は、単純に技術的制約によってユーザーとデバイスの距離を知るすべがないからに過ぎない。レスポンシブ・タイポグラフィーが目指す、適切な文字の大きさを環境ごとに提示することそのものについては正しい考え方であると思う。ただ今利用されている「ビューポートが768px以下なら文字を小さめにする」というようなアバウトな実装だと問題がある。もちろんvw単位を使ったフォント・サイズ指定でも同じだ。 なぜならばデスクトッ

    レスポンシブ・タイポグラフィーなど
  • CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

    Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要がある以外には特別なマークアップは必要ない。 .hexclip { display: inline-block; position: relative; line-height: 1; background-image: linear-gradient( 30deg, #fff 0, #fff 18%, transparent 18%, transparent 100% ), linear-gradient(

    CSSで画像を六角形にくり抜く - Weblog - Hail2u.net
  • display: noneとレスポンシブ・ウェブ・デザイン

    レスポンシブ・ウェブ・デザインとその設計を語る時にdisplay: noneが引き合いに出されることが多いなと感じる。その多用は設計ミスというような具合だ。そういうところは確かになくはないが、多用自体はCSSの貧弱さからくるHTMLの複雑さを意味するだけなのではないかと思う。 レスポンシブ・ウェブ・デザインはコンテンツを様々なデバイスで「収まる」ようにレイアウトを調整することではない。実装としてはそうなることは多いが、実際には多様なデバイスでのコンテンツの一貫性を確保するアプローチであると考えた方が適切なはずだ。その一貫性とはほぼコンテンツへのアクセス性と言って良い。様々な画面でそれを同じように確保するためには、レイアウトの調整だけではなく、構成部品の間引きや移動などが必要となる。 そういった一貫性の確保を同じHTMLを通して行う、とすると実装はほぼCSSに限られることになる。そして今のC

    display: noneとレスポンシブ・ウェブ・デザイン
  • right: 100%か負のマージンか

    これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある

    right: 100%か負のマージンか
    hayasi-n
    hayasi-n 2013/12/17
  • JekyllみたいなのとWordPressみたいなのの組み合わせ

    静的ウェブサイト生成ツール(面倒なので以下Jekyllみたいなの)と動的ウェブログ・システム(同じくWordPressみたいなの)のそれぞれの長所や短所はみなよく知っているようで、よりその人の状況にあったどちらかを選んだみたいな記事をよく見る。そういうの見る度にどうして両方使わないんだろうと思う。 静的なHTMLでのウェブサイトの運営は簡単で楽だしコストも掛からず、環境もあまり選ばない。けどMovable Typeでの破綻を引き合いに出すまでもなく、1000やそれ以上のHTMLを生成できる無理のないシステムはあるのかというと微妙な感じがする。で、規模に応じて動的なCMSと使い分ければ……となることが多いわけだけど、使い分けるのではなくJekyllみたいなのとWordPressみたいなのを組み合わせるのが良いのではないか。 テンプレート 分けちゃうとテンプレートの管理も分かれて面倒くさいとか

    JekyllみたいなのとWordPressみたいなのの組み合わせ
  • 1