2017年12月27日のブックマーク (6件)

  • 商用可で完全無料!2017年公開のフリーフォント素材129個総まとめ

    2017年は、特にたくさんのフリーフォントが公開され、当サイトで紹介した素材も637個にのぼります。 今回は2017年に公開された素材の中から、商用利用可能で無料ダウンロードできるフリーフォントのみを、カテゴリ毎に分けてまとめています。 コンテンツ目次 1. 日フォント 2. 万能フォント 3. 筆記体フォント 4. サンセリフ書体 5. セリフ書体 6. 手書きナチュラル系フォント 7. 筆ブラシ・フォント 8. ビンテージ・フォント 9. デコレーション・フォント 01. 日フォント 無料で商用利用できる日語フリーフォント、18書体をまとめています。 【2017年保存版】デザインが良くなる!最新の日語、和文フリーフォント35個まとめ 日語フリーフォント、これだけは持っておきたい厳選22個まとめ しっぽり明朝 流 源流明朝の漢字としっぽり明朝の仮名を合成したコラボレーション

    商用可で完全無料!2017年公開のフリーフォント素材129個総まとめ
  • 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

    2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! ↑私が10年以上利用している会計ソフト! 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

    日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
    z1a2nh
    z1a2nh 2017/12/27
  • 日本らしさを表現!CSSで文字の縦書きに挑戦!

    2017年8月24日 CSSの書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基なので、縦書きを取り入れることで日らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました!今回はそんな縦書き表現に注目したいと思います! ↑私が10年以上利用している会計ソフト! 縦書きにするには 縦書きを設定するのはとっても簡単!縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左(Right to Left)という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl(上から下、右から左=

    日本らしさを表現!CSSで文字の縦書きに挑戦!
    z1a2nh
    z1a2nh 2017/12/27
  • CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する

    2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい!そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ!もちろんレスポンシブにも対応させたいと思います! ↑私が10年以上利用している会計ソフト! CSSグリッドの基の書き方は動画で確認! 基的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう! 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に!慣れるま

    CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
    z1a2nh
    z1a2nh 2017/12/27
  • 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

    2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…!今回はそんなborder-radiusの基的な使い方と、応用表現を紹介します! ↑私が10年以上利用している会計ソフト! 無難で王道!正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で

    今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!
    z1a2nh
    z1a2nh 2017/12/27
  • レスポンシブ対応!縦に半分割しているWebサイトの作り方

    2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 縦に半分割しているWebサイトを作ってみよう! Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回

    レスポンシブ対応!縦に半分割しているWebサイトの作り方