CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </detai
SVGを使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
The Basic Idea of Symmetrical Design
2014年1月28日 Webデザイン デザインをする上でシンメトリー（対称性）は頻繁に使われる手法のひとつです。古代から様々な場面で使われてきた美の構図、シンメトリーをうまく取り入れることで、安定感のあるレイアウトを生み出すことができます。今回はこのシンメトリーに焦点をあて、具体例とともに構成方法を考えてみようと思います！ ↑私が10年以上利用している会計ソフト！ シンメトリー（対称性）とは シンメトリーは広く「左右対称・反転」として知られていますが、他にも「回転」や「平行移動」、「拡大・縮小」も含んおり、これらの手法を取り入れた構成のことを言います。シンメトリーには規則性があり、バランスのよい安定した調和を感じさせます。シンプルで一度法則を覚えたら様々なデザインに取り入れられるので、デザイン初心者な方でも比較的容易にまとまったレイアウトを構成することができます。 シンメトリーとは異なる、
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
静かに流行り始めているポリゴン風デザインに挑戦！
2013年5月9日 Webデザイン, インスピレーション, 便利ツール 2013年を代表するデザイントレンドと言えばフラットデザイン。それを横目に、実は静かに流行り始めている「ポリゴン風デザイン」をご存知でしょうか？ローポリと呼ばれているものですね。今回はツールを使って写真からポリゴン風イラストを作ってみましょう！デザインの参考になるWebサイトやグラフィック・アートもまとめているので、オリジナルポリゴンアートに挑戦してみてください！ ↑私が10年以上利用している会計ソフト！ 「triangulator」でポリゴン風イラストを作成 ポリゴンは通常は3D系のソフトで作りますが、PhotoshopやIllustratorでも作ることができます。ただ、それではかなり時間がかかってしまうので、写真をサクッとローポリイラストに変換できる「triangulator」を使用します。こちらの動画をご覧頂け
Free “Japanese-ish” Fonts 10 + 1
2013年3月25日 インスピレーション, フォント 先日同僚と日本語の文字についておしゃべりしていると、「日本語はまるで絵や記号みたいだ！」と言われました。確かに私達日本人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね！ということで探してみるといくつか見つかった素敵フォント。パッと見日本語に見えたり、日本をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト！ 「日本語風」の英字フォント 1. TokyoSoft ダウンロード（商用利用可） カタカナ風の英字フォント。日本人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…！ 2. Kaneiwa ダウン
Credit Card Test Numbers and Paypal Test Accounts
2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」
電子書籍を自分で出版してみよう！
2016年6月8日 Web関連記事, ダウンロード, 便利ツール スティーブ・ジョブズ氏の公式伝記が販売されて、各書店を賑わせてますね。この本は紙の書籍だけでなく電子書籍でも販売されています。iTunesストアでは本日もちろん一位に輝いています。そんな電子書籍を読みながら「電子書籍ってどうやって作れるのかなー？」なんて疑問に思ったので調べてみました。出版業界の人でなくても、「自分の本を出版する」ってなんだかワクワクしますよね。さっそく見てみましょう！ ↑私が10年以上利用している会計ソフト！ 電子書籍ってどんなもの？ 電子書籍とは、PC・MacやAppleのiPhoneやiPad、AmazonのKindleなどのディスプレイで読める書籍のこと。書籍はインターネット上で購入、ダウンロードします。ファイルを用意するだけでコンテンツを提供できるので、紙の書籍よりも低コストで手軽に作成できます。デ
見落としがちなHTML5で変更された要素いろいろ
2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ ↑私が10年以上利用している会計ソフト！ HTML5の基本はここからお勉強！ 「ところでHTML5ってなに？」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！ Webの3つの問題を解決する「HTML5」とは何な
WordPressの管理ページをより便利にカスタマイズする方法13
2014年8月22日 Wordpress WordPressを使ってWebサイトを作る際、自分のサイトならさほど気にならない管理画面も、クライアントに納品するのであれば少し手を加えて使いやすくしておきたいところ。少しデザインを変えるだけ、機能を追加・削除するだけで「オリジナル感」がでますよね。今回はそんなWordPressの裏側、管理ページのカスタマイズ方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの管理ページをカスタマイズ 目次 管理バーを消す コメントに「削除」「スパム」ボタンを追加 ログイン画面：ロゴを変更する ログイン画面：CSSを変更する 管理画面左上の「W」ロゴマークを変更 投稿画面の項目を非表示 サイドバーのメニューを非表示に フッターテキストを変更 ユーザープロフィールの項目を追加 ビジュアルリッチエディターを非表示 投稿画面のビジュアルリ
生活をもっと便利に・楽しくしてくれる無料Webサービスいろいろ | Webクリエイターボックス
2017年6月30日 便利ツール 「こんな事がネットでできると便利なのになあ」と思った事はありませんか？生活に「便利」「楽しみ」をくれるサービスが無料であれば嬉しいですよね！ということで、今回はWebに詳しくない人でも簡単にはじめられるWebサービスを紹介します。中には会員登録も不要なものも！今直ぐ試してみてください！ ↑私が10年以上利用している会計ソフト！ ファイルシェア Sendoid Sendoid 会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。おすすめです！ イベントスケジュール ATND（アテンド） ATND（アテンド） イベント・カンファレンス・勉強会の告知や参加者管理が簡単にできるサービス。イベントの詳細を入力したり、参加予定者がコメントしあったりできます。Twitter、Google、Yahoo、Mixiなどでログイ
プロジェクト管理ツール「Basecamp」の使い方
2017年6月30日 便利ツール 「海外Webサイト・海外Web屋の特徴」でも少し紹介したプロジェクト管理サービス、Basecamp。「日本語版があれば使ってみようかな」という人がいたのですが、実は日本語に対応しているのです！アカウントの作成、言語の設定を含めた、Basecampの簡単な使い方を紹介します！ ↑私が10年以上利用している会計ソフト！ Basecampとは？ Basecampは37signalsが提供しているオンラインプロジェクト管理ツール。「よりシンプルに使いやすく」をテーマに作られ、海外では企業やフリーランサーに大人気です。チームメンバーとタスクを共有することで、誰がどんな業務を持っているのか、どこでつまづいているのかなどがわかるようになり、結果プロジェクトの進行がスムーズになると思います。 Basecampの特徴 メッセージボード、ToDoリスト、マイルストーン、Whi
絶対二度見してしまうギークなタトゥー
2017年6月29日 ネタ 美しいもの、かっこいいものなど、タトゥーにもいろんなデザインがありますよね。今回は私たちWeb屋さんが日々身近に見ているあのロゴ、あのマークのタトゥーを入れちゃった人たちの写真をFlickrやGeeky Tatoosで発見したので紹介します。個人的には痛々しいので入れる気はありませんが、見るだけなら楽しめそうです。 ↑私が10年以上利用している会計ソフト！ えっ、それ入れちゃったの？ 実際にこんなタトゥーを入れちゃった人たちもいるんですね。愛する気持ちが痛いほどわかります。 Apple Photo by Terry Johnston Apple 旧バージョン Photo by Jesska M Twitter Fail Whale Photo by Critter WordPress Photo by Takamorry Firefox http://www.f
DreamweaverからCodaに変えました
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
ChromeからFirefoxに戻した6つのくだらない理由
2017年6月29日 Web関連記事 私は標準ブラウザーにFirefoxを使っています。「えっ、Chromeじゃないの？」と思った人もいるかもしれません。それほどWeb制作に携わっている人に愛されている（たぶん）Google Chrome。一度は試したものの結局もとのFirefoxに戻しました。そのくだらない理由を書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 追記：その後Chromeに返り咲きました「Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個」 Web制作関連の友人が大絶賛してきたブラウザー、Google Chromeを今まで華麗にスルーしていました。理由はエクステンションを入れるのがめんどくさいから。それだけです。しかしあまりにも「いいから試してみて！」との声が多かったので、ブラウザーテスト用も兼ねてChromeを入れてみることにしました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
創作意欲を刺激する！デザイナーやイラストレーターのInstagramアカウントいろいろ
いろんな「世界一」のWebサイト | Webクリエイターボックス
