タグ

Textに関するherakuresのブックマーク (7)

  • vivus.jsを使って文字のアニメーションを作りたい! - DESIGN NOTES

    ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました! やりたいこと ・IllustratorでSVGファイルを作成しvivus.jsを使用 ・文字のアウトラインの基のアニメーション ・SVGマスクを使ったアニメーション SVGコードを編集 ①作成したSVGをエディタで開きます。 ②1.2行目と、pathを囲んでいるgタグとその閉じタグを消します。(pathは消さない) ③続いてsvgにidを付与します。今回は id="text-anime" と入れました。 ④pathのcssを追加 編集後のコードがこちらです。 <svg version="1.1" id="text-anime" xmlns="http://www.w3.org/2000/svg" xmlns:

  • 文章校正を行うためのtextlint入門 - ICS MEDIA

    ICS MEDIAでは読みやすい文章作りの取り組みとして、自社で公開しているVS Code拡張機能の「テキスト校正くん」を使用して文章校正を行っています。スタッフの校正ルールを統一して、一定の品質と読みやすさを確保することを心がけています。 「テキスト校正くん」は、文章校正エンジンにtextlintというNode.jsのパッケージを使用しています。textlintは設定した校正ルールにもとづいて文章校正を行えるので、プロジェクトに適切なルールを設定して文章校正ができます。以下の記事で、textlintの活用事例が紹介されています。企業がtextlintを導入し、文章品質を高めるワークフローとして活用されていることがうかがえます。 『textlintを使っている企業の事例・ルールをまとめてみた - Zenn』 『よりよい文書を書くための校正ツール「textlint」のSmartHR用ルールプ

    文章校正を行うためのtextlint入門 - ICS MEDIA
  • [CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール

    Webデザインで使用する見出し、小見出し、文、リストなどフォントの基サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最初に定義して、それを元に見出しや文を設計するので、rem指定も可能。また、SCSSもサポートされているのも便利ですね。 Gridlover Gridloverは完全無料で、登録などの面倒なことも一切不要です。 下記ページの「Try Gridlover」をクリックすると、ツールを利用できます。

    [CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール
  • 自動要約 無料ツール by ユーザーローカル

    要約したい文章を入力し、「自動要約する」のボタンを押してください。10,000文字までの文章を要約することができます。 サンプル: 芥川龍之介 『蜘蛛の糸』

    自動要約 無料ツール by ユーザーローカル
  • テキスト周りで使えるCSSの小技いろいろ

    テキスト周りで使えるCSSの小技いろいろモバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック!基的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 テキスト周りで使える CSS の小技 目次テキストを選択する時の色を変更蛍光ペンで線を引いたような効果長いテキストを「…」で省略する番号リストの表現を変更リンクの種類でアイコン変える言語によってスタイルを変更テキストリンクのエフェクトプリント時は URL を表示長い URL を途中で折返す途中で折り返さず、次の行に先頭の文字を大きく先頭を一文字分あけるグラデーションテキストブラウザーは特記していなければ Chrome、Safari、Firefox、

    テキスト周りで使えるCSSの小技いろいろ
  • FINDJOB!終了のお知らせ | FINDJOB!

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    FINDJOB!終了のお知らせ | FINDJOB!
  • 制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ

    制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろWebサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう! ダミーテキスト(英文)Lorem Ipsum ダミーテキストの大命、Lorem Ipsum。Photoshop でも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTML タグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ&ドロップでカスタマイズできます。類似

    制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ
  • 1