CSS3Machine: iPadで素晴らしいCSSを作成する

CSS3Machine: iPadで素晴らしいCSSを作成する
CSS3Machine: iPadで素晴らしいCSSを作成する

私はWeb開発者です。HTMLとCSSに命を懸けています。CSS3Machine(App Storeで6.99ドル)ほどクールで便利なツールは、これまで見たことがありません。CSS3には、(特にWebKit特有の)難解で冗長なキーフレームやグラデーション背景といった、誰も覚える暇のない機能が満載です。ですから、ビジュアルインターフェースで全てをこなしてくれるツールがあるのはまさに天の恵みです。

CSS3Machineの基本的な考え方は、CSS3のクールな機能を追加したいHTMLファイルを作成し、iTunes経由でインポートして、CSS3でスタイルを設定するというものです。このアプリを使い始めて約1週間になりますが、まだできることのほんの一部しか使いこなせていません。非常に多くの可能性を感じています。クライアントの仕事で既に一度使用しましたが、信じられないほど便利でした。

ワークフローは非常にシンプルです。スタイルシートを選び、HTMLテンプレートと組み合わせるだけで、あとは作業を進めるだけです。レビュー用に、非常にシンプルなHTMLページとスタイルシートを作成しました。ダウンロードしやすいように、下部にまとめています。まずはスタイルを追加します。HTMLセレクターにリンクし、使用するスタイルの種類を選択します。選択肢は無数にあり、「基本CSS」オプションでは、高さや位置を強制的に変更する必要がある場合にカスタムCSSを追加できます。

グラデーションのかかったシンプルなボックスを作り、画面上を飛び回るアニメーションを作ってみました。特別なことはしていませんでしたが、いろいろ試して何ができるかを考えるのは本当に楽しかったです。信じてください、私(そしてアプリをダウンロードしたあなたも)は、かなり色々なことができるんです。

小さなピンク色の円が青いボックスの周りを飛び回る様子は、本当にクールです。CSS の作成が完了したら、それを自分にメールで送信したり、iTunes ファイルマネージャーを使用してエクスポートしたりできます。これが、このアプリに欠けていると思う唯一の部分です。テンプレートを使用したり、iTunes を行き来したりすることなく、Bonjour 経由でファイルを読み込んで編集し、コンピューターにライブで保存する機能が本当に欲しいです。開発中は Espresso を使用しており、Espresso にとどまりながら、すべての CSS 作業を維持できるようにしたいと考えています。Web ビュー機能を使用すると、これを回避できます。LAN 上にいる場合、CSS3Machine は http://device-name.local に Web ページを作成し、作成した CSS を表示できます。

それでも、編集するたびにブラウザからテキストをコピーして Espresso に貼り付けるのは、私のワークフローに大きな支障をきたします。iPad のファイルシステムをロックダウンした Apple にも責任の一因がありますが、開発者がもっと簡単にできた点もあります。それはさておき、CSS3Machine は素晴らしいツール (そしてかなり楽しいおもちゃでもある) だと感じています。CSS マニアを自認する人なら、このアプリはぜひ手に入れるべきです。このアプリには、すべての CSS に関する優れたドキュメントが含まれています。ツールの 1 つを使用した後、iボタンを押すだけで、そのスタイルに関する大量の情報が表示されるのは本当に素晴らしいことです。組み込まれている情報で十分でない場合は、「詳細」を押すと、そのスタイルに関する W3C サイトに直接リンクされます。

特定のスタイルがどのブラウザで動作するかを示す小さなチェックリストがあるのは非常に便利です。CSSをあらゆるブラウザで動作し、適切にデグラデーションするようにカスタマイズできるからです。基本的なスタイルの作成が完了したら、アニメーションに移ります。CSS3MachineはWebKitのキーフレームを使用してアニメーションを制御します。基本的には、キーフレームを作成し、最初のスタイル設定と同じように各キーフレームにスタイルを設定します。これはシンプルなプロセスですが、驚くほどパワフルな結果をもたらします。特に3Dアニメーションはクールで、ウェブサイトを作成する際に注目を集める素晴らしい方法です。

結局のところ、CSS3Machineは最高です。シンプルでパワフル、見た目も良く、しかも安価です。ぜひ使ってみてください。

[デモファイルのダウンロード]

追伸

以下は、CSS3Machineの将来のバージョンに搭載される新しいテンプレート編集インターフェースのプレビューです。さらに、10名様にプレゼントいたします。

プレゼント企画のルール

プレゼントに応募するには、次のようにツイートしてください:

CSS3Machine: iPad で素晴らしい CSS を作成 - 10 部プレゼント http://mcstr.net/agZWYQ

10月5日午後11時59分(太平洋夏時間)までにご応募ください。Twitter.comでツイートとリツイートを検索し、ランダムに当選者を選出いたします。 当選されたアプリのプロモーションコードをダイレクトメッセージでお送りできるよう、Twitterで@macstoriesnet をフォローしてください。

当選確率を上げたい方は、この投稿にコメントを残してください。CSS3Machine に応募したい理由、またはHTMLとCSS3を使った素敵な作品があれば、ぜひお聞かせください。皆さんの作品を拝見し、楽しみにしています。

受賞者は10月6日(水)に発表されます 。幸運を祈ります!

クラブ・マックストーリーズ

追加コンテンツと特典にアクセスする

Club MacStories は 2015 年に設立され、ほぼ 10 年間にわたって毎週独占コンテンツを提供してきました。

毎週、毎月の電子メール ニュースレターから始まったものが、すべての MacStories ファン向けに設計されたメンバーシップ ファミリーに成長しました。

詳細については、こちらおよびクラブの FAQ をご覧ください。

Club MacStories : アプリ、ヒント、自動化ワークフロー、長​​文執筆、MacStories Unwind ポッドキャストへの早期アクセス、定期的な景品など、盛りだくさんの情報を満載した、電子メールと Web 経由の週刊および月刊ニュースレター。

Club MacStories+ : Club MacStories が提供するすべての機能に加え、アクティブな Discord コミュニティ、クラブの過去のカタログ全体を閲覧するための高度な検索機能とカスタム RSS 機能、ボーナス コラム、多数のアプリ割引などが含まれます。

Club Premier : 上記のすべてに加え、早期に、広告なしで、高ビットレートのオーディオで配信される当社の主力ポッドキャストの拡張バージョンである AppStories+ が含まれます。