タグ

ブックマーク / ics.media (4)

  • デザイナーにもお勧め! CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA

    デザイナーにもお勧め! CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ(GSAPジーサップなど)を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか? 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ

    デザイナーにもお勧め! CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
    uss267
    uss267 2024/08/29
  • has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

    2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

    has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA
    uss267
    uss267 2024/08/09
  • エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA

    ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基的な校正ルールを使う いろんな場面で使える基的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「当に技術に詳しいの?」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 GithubGitHub(Hは大文字) JavascriptJavaScript(Sは大文字) After Effect → After Effects(複数形の「s」を忘れてはいけな

    エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
    uss267
    uss267 2022/01/10
  • エラーは出ないけど…何か変??Vue.jsでやりがちな「サイレント・ミス」(ロジック編) - ICS MEDIA

    Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、

    エラーは出ないけど…何か変??Vue.jsでやりがちな「サイレント・ミス」(ロジック編) - ICS MEDIA
    uss267
    uss267 2020/07/17
    分かると知らなかったが両方あった。ありがたい。
  • 1