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
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
スクリーンショットにコメントをつけてシェアできるツール
2017年11月23日 便利ツール Webサイトに修正指示を出す時、どんなツールで、どのようにシェアしていますか？該当ページのスクリーンショットを撮影し、その画像に指示を入れていく…という方が多いかな、と思います。今回はWebサイトの制作者のみならず、制作者に指示をだす人や、クライアント側も使える、修正指示がグンと楽になりそうなツールをいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ AUN[あうん] AUN[あうん]はふせん紙の感覚でWebサイトや画像にコメントを残し、共有できるツールです。登録不要！無料で気軽に利用できるところが魅力的。対象となるWebサイトのURLを入力するだけでスクリーンショットを撮影でき、指示やコメントを残していけますよ。さっそく試してみましょう。 サイトからURLを入力し、読み込みが終わると、画面をトリミングするかどうかの選択画面が表示されます。読
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
アイコンフォントから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がレティナディスプレイを発表して
制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ
2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
世界のWebデザイナーのお給料はいかほど？
2013年12月25日 Web関連記事, 海外情報 以前日本のWeb屋さんと、海外のWebデザイナーのお給料について話したことがあります。話を聞く限り、日本は長時間労働・低収入、海外は時間キッチリ・高収入な私の勝手なイメージ。じゃあ実際どんなもんかしら？と思い、働いたことにある国を中心に、6カ国の賃金事情を調べてみました。各国の最低賃金とWebデザイナーのお給料はどのくらいあるのでしょう？ ↑私が10年以上利用している会計ソフト！ さっそく見てみましょう！ お給料（年収）は総支給額の中央値、レートは2013年3月11日のものです。ソースは記事の最後に。 オーストラリア オーストラリアが国で定めた最低時給はAU$15.96（1,568円）*1。オーストラリアはチップ文化がないため、比較的高めの設定になっていると聞いたことがあります。ちなみに日曜に出勤したら時給2倍に、祝日だと3倍になります！
20 Creative Design Galleries to Submit Your Website
2013年3月25日 Web Design Web design gallery websites are very useful to get inspiration. When you had created great works, show off your creative design which you are really proud of! All of the ones featured in this post are free to submit to. I will share some Japanese web design galleries as well. [adA-en] You can submit your website from “Submit” page. People who are managing those gallery websit
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
Useful WordPress Plugins for Web Designer and Developer
2016年6月8日 Wordpress, 便利ツール ブログツールとして大人気のWordPress。Wordpressを使って、WebやIT関連の情報ブログを書いている方も多いと思います。今日はWebデザイナーやプログラマー等の本職＋ブロガーとして働く皆さんの強い味方となるプラグインをいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ Key Shortcut Formatter Key Shortcut Formatterはショートカットキーを表示するのに便利なプラグイン。アプリの使い方などでショートカットキーを説明する時に便利。例えばMacで「貼り付け」を説明するのに、通常「コマンド＋V」と書きますが、このプラグインを使えば コマンド + V と表示できます！ちょっとした違いかもしれませんが、見栄えがよくなりますね。また、画像を使わずCSSで装飾しているので、CSSをいじれ
How to Learn iPhone App Development for Non-Programmers
2014年8月17日 スマートフォン 「iPhone/iPadアプリを作るのは難しい」。デザイナーの人は特にそう思い込んでいませんか？確かに新しいプログラミング言語を習得するには時間がかかります。しかし、一度「楽しい！」と思えばこっちのものです。その気持ちだけで難しいものも簡単に乗り越えてしまえるもの。そう、もう無敵です！どんなアプリでも作れるようになります！ここではアプリの開発方法よりも、「どうやって楽しく学習できるか」に焦点を当ててみたいと思います。 ↑私が10年以上利用している会計ソフト！ 準備しよう 必要なもの Mac OS Lion iOSアプリの開発は基本的にMac OSですすめることになります。Apple Storeでポチッちゃいましょう :P XCode 4 iPhone/iPadアプリの開発にはXcodeが必要になります。App Storeで最新のXcodeをダウンロード
20+ Mac Apps for Web Designer
2013年11月28日 便利ツール 私のメインマシンはMacです。以前から制作環境であったり、使ってるアプリを紹介してほしいとのリクエストを頂き続けているので、やっと重い腰をあげてまとめてみます…。というのも結構有名所のものばかり使っていて、目新しいものは特にないので…あまり…面白くないかなって…。それでも読んであげるよっていう優しい人は続きをどうぞw ↑私が10年以上利用している会計ソフト！ 簡単にスペック紹介 Macbook Pro 13″です。それでWebデザインって画面小さくないかって？小さいですよ！大きな画面に憧れてますよ！しかし国をまたいだ引越しが多く、作業もカフェや図書館ですることが多いので、持ち運びを重視して小さなサイズです。いい加減デュアルディスプレイにしたいです。 デスクトップ。普段はドック隠してます。デスクトップがファイルだらけになるのが嫌いなので、一時的に画像やファ
WordPressの検索機能をもっと使いやすくする
2013年4月1日 Wordpress WordPressにはデフォルトで検索フォームが設定されているので、一行のコードを追加するだけで簡単に検索フォームを設置することができます。しかしその検索フォームは本当に簡易なもの。よりユーザーが使いやすくなるようにカスタマイズする方法をいくつか紹介します。実際にWebクリエイターボックスで使っているコードも公開しているので、ぜひ参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ 検索フォームの設置方法 まずは基本編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法（たぶん）。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。 <?php get_search_form(); ?>
WordPressでどんなサイトでも作れちゃう気になれる無料プラグイン9個
2016年6月8日 Webサイト制作, Wordpress WordPressのプラグインってすごいですよね。少しカスタマイズするだけで思い通りの機能のついたWebサイトを作ることができます。今回は「えっ、こんなことまでできちゃうの？」と思わせてくれるような高性能プラグインをいくつか紹介します。WordPress 3.0から追加されたマルチサイト機能を使えばWebサービスとして運営することもできそうなもの多め。どんな風に使おうかわくわくしちゃいますよ！ ↑私が10年以上利用している会計ソフト！ 1. SNS BuddyPress WordPressをSNSとして運営することができるプラグイン、BuddyPress。過去記事「WordPressプラグイン「BuddyPress」でSNSサイトを作成」で詳しく紹介しています。
ブログ記事を読んでもらうための10の書き方
2013年10月10日 Web関連記事, ユーザビリティ 私は基本的に一日60記事前後、多くて100記事のブログに目を通しています。でもその中で上から下まで全て読むのはその半分以下。途中で記事を読むのをやめる事も多々あります。理由は求めていた内容と違った、というのも多いですが、「読む気がなくなってきた」なんてものも。最後まで読んじゃう記事はやっぱり読みやすさやまとめ方が違います。今ブログを書いている方も、これから始めようと思っている方もぜひ気をつけて欲しいブログ記事の書き方をまとめてみました。 ↑私が10年以上利用している会計ソフト！ 1. 画像を使う これはチュートリアルサイト等の、何かを説明している記事は特に必要だと思います。私の英語力がまだまだだった頃のお話ですが、英語力がないにもかかわらず勉強も兼ねて英語サイトのみ閲覧するようにしていました。その時に思ったのが、スクリーンショット画
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
こんなWebデザイナーは成長しない
2013年3月23日 ライフハック Webデザイナーのみなさん、自分を成長させるためにしていることはありますか？効率化をはかるため、よりよいデザインをするためにしていることはありますか？今回はあえてこんな記事のタイトルをつけましたが、ではどうすれば成長できるのか？という点も一緒に考えてみました。もし当てはまるものがあれば一緒に解決策を考えてみましょう！ ↑私が10年以上利用している会計ソフト！ 情報収集をしない Web業界では新しい技術や情報が毎日のように更新されていっています。情報が多すぎてついていけない…新しい事を覚えるのがめんどくさい…という人もいるかもしれませんが、私たちはWeb業界で働いているんです。Web屋にとって情報は武器です。日々の情報収集が仕事に役立つという場面も多くあると思うので、日頃から新しい情報にふれるくせをつけておきましょう。よく読むブログはRSSリーダーに登録し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
