Tag designを表示しています。
2020.10.7 水
もう有名といえば有名なCypressの照会をします。数あるツールの中でもCypressが使いやすいと思います。 公式ページは数々のドキュメントがあるので、なかなかいいです。 https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements ここではMac環境でテスト環境を構築する方法を紹介します。(CentOSやUbuntuでもだいたい同じような手順でできます。) Cypressを利用するにはnode.jsが必要なので、Mac環境にnode.jsをあらかじめインストールしておきてください。しかし注意が必要なのはnode-pre-gypがnode8じゃないと動かないっぽいってこと...
2017.12.8 金
正直このアイコンがどこまで使えるかという問題があるはあるんですが、Font AwesomeはWebページで使われる典型的なアイコンを文字として扱うことができるサービスです。コーディングするときには、 <img src="icon.png"> と書く必要がなくなり、 <i class="fa fa-tasks fa-lg"></i> という感じでクラスの指定だけでいける。 CSSを読み込むだけで使えるのでとてもいいです。依存関係までちゃんと見ていないのですが、最新のブラウザーではそこそこ使えるんじゃないかというところです。$60で有償版も使うことができます。買ってみようかな。 設定と準備 CDNを使う場合は、 <link href="https://m...
2016.10.23 日
利用可能なFontをダウンロードしておきます。(.otf .ttc .ttf等) アプリケーションにFont Bookというのがあるので、それを開きます。 左メニューからすべてのフォントを選択します。 上部バーの[+]マークをクリックして、ダウンロードしたフォントを選択します。 開くをクリックしてインストール完了です。 左メニューのユーザーを選択するとインストールしたフォントが新しく追加されています。 別のアプリケーションで利用する際もFont Bookから自動的に読み出されるので問題なしです。 インストールされたフォントはここらに格納されるようです。 /System/Library/Fonts/*.ttf /Users/osamu/Library/Fonts/*.ttf https://s...
2016.4.1 金
sassのインストール # gem install sass Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing documentation for sass-3.4.22 Installing ri documentation for sass-3.4.22 1 gem installed バージョン確認 # sass -v Sass 3.4.22 (Selective Steve) compassのインストール # gem install compass Compass is charityware. If you love it, please donate on our behalf ...
2016.3.22 火
http://ao-system.net/favicon/ http://ao-system.net/favicongenerator/ こういったサイトさんがありまして、かなり便利になってます。 最も大きなサイズが192×192となっているので、これ以上の大きさのPNGでFaviconのデザインをすればよいかと思います。凝ってしまうときりがないんですが、小さくなっても潰れないシンプルなデザインがいいかと思います。物好きな方は、自作でつくるのもよいでしょう。結構たくさんあります。 <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="ico...
2016.3.20 日
サーバーサイドでも直接sassが使えないと結構不便ということで、インストールしてみた。 まずはrubyのインストール yum install -y ruby rubygems ruby-devel libffi-devel gcc gem install sass gem install ffi gem install compass これでいいっぽい。くそみたいに時間がかかる。
2016.3.7 月
border-radius ブロック要素に対して角丸ができます。 (IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降のみ) border: 3px green solid; border-radius: 5px; 各箇所を個別に丸くする border-top-left-radius: 5px; /* 左上 */ border-top-right-radius: 5px; /* 右上 */ border-bottom-left-radius: 5px; /* 左下 */ border-bottom-right-radius: 5px; /* 右下 */