Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![iPhone,iPadのアイコンなどのサイズ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/584a159f79b9774cd570ef7e4e841de8f4077f7e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY2NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTU1MTQwMjg5OD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz01MTk1ZjE4NjI3NzE4ZWM1MGEyNGRjZjM4MjE1ZGU0ZQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dfadc31c2857ddff8c7439ac4532a6356%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9aVBob25lJTJDaVBhZCVFMyU4MSVBRSVFMyU4MiVBMiVFMyU4MiVBNCVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MSVBQSVFMyU4MSVBOSVFMyU4MSVBRSVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MiVCQSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWQ4OGM0NGNjYjhkZmFkMjIwZDIwOGQ3NGJlYjVhNTEx%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzaGlyb3NldCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTc3N2NjNjFjMWEzYTkzYzYyYjk0MTA1ZDQyZDg3MGJk%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6e4417a627b51b2096495ae7df5b0ba9)
世の中にあるチュートリアル見まくって、沢山の技術や表現力を得て自分自身のオリジナルへと昇華させようぜ!的な記事を以前書かせて頂いたのですが、この記事を友人にもみてもらい、感想もらったりした結果、中々具体的な作る目的が無いと、チュートリアルとか出さないのが正直な所なのかもしれませんね。「これ、作るぞ!」みたいなやる気というかそういうの。 しかし、色々な人の話しを聞いている中で、以前のチュートリアル記事の中で、アイコンを作るチュートリアルに関して多くの人からコメントを頂きました。「おぉ、アイコンつくるチュートリアルすかー」みたいな。んで、もしかしたら、アイコンという誰しも一度は作ってみようと思う物を通したチュートリアルであれば、結構楽しくスキルアップできるんじゃないかと思った訳です! アイコンであれば色々なところで必要になるし、ミニマルだろうが、ポータルだろうが、コーポレートだろうが、ECだろ
全653種、商用利用無料、再配布可能だけでもすごいですが、更にベクターのEPS付きとフリー素材として至れり尽くせりのアイコンを紹介します。 アイコンのデザインもシンプルなので、使い勝手もよさそうです。 Default Icon [ad#ad-2] ダウンロードできるアイコンのフォーマットはEPS, PNG(16x16, 32x32, 48x48, 64x64, 128x128, 256x256)です。 アイコン全653種はウェブサイト・ウェブアプリケーション用にさまざまなものが揃っています。 以前紹介した際はver.1で168種類でしたが、作者様よりver.2にして数も増やしたよ、と連絡を受けました。 [ad#ad-2] アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。また、再配布も可能、とのことです。
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く