まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
【第3弾】少しのコードで実装可能な15のCSS小技集
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
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
Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
WebデザイナーのためのVue.js事始め
2018年4月18日 JavaScript, Vue.js Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！ ↑私が10年以上利用している会計ソフト！ Vue.jsの使い方 Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。 最初の一歩目の例として「JavaScriptで
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
Twitter 人気のつぶやき 4/9～4/15 2016
2016年4月16日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. ウェブ制作あるある ―― ウェブ制作会社管理の失敗あるあるとその予防策 この記事をRTする 2. Webサイト制作：ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 この記事をRTする 3. 写真：あの美しい写真はこのように加工されていた。プロのカメラマンが明かした写真加工ビフォア・アフター この記事をRTする 4. Webサイト制作：コピペで実装できる、最新ウェブテクHTML/CSSコードスニペ
CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス
2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
多言語Webサイトを制作する時に気をつけたいポイント
2015年12月9日 Webサイト制作, Webデザイン, Wordpress Web業界は他のどの分野よりもグローバル化が進み、今や日本のサイトやサービスを海外の人が楽しんでいることも自然なこととなってきています。これから海外に向けて情報を発信していきたい人も、すでにWebサイトをお持ちの方も、「多言語化」を視野に制作してみませんか？ ↑私が10年以上利用している会計ソフト！ 多言語サイトを作る時のポイント 見えやすい場所に言語選択リンクを置く 時々ページの一番下に言語オプションリンクを設置しているサイトを見かけますが、実際にその機能に気づける人は少ないでしょう。なるべくすぐに目につくような、例えばメインメニュー内や記事タイトルの直下等に置くといいと思います。 CacooのWebサイトではロゴのすぐ隣に言語オプションが設置されています。 国旗アイコンは使うべき？ 言語選択メニューにて、国
CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法
2015年10月27日 CSS Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 ↑私が10年以上利用している会計ソフト！ @supports とは？ 指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSSを記述していけます。「プログレッシブエンハンスメント」というやつですね
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
少しのコードで実装可能な20のWordPress小技集
2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本 まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き
モバイルサイトのナビゲーションメニューは画面下に置くべき
2014年2月19日 スマートフォン, ユーザビリティ スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に記事にしてみます。 ↑私が10年以上利用している会計ソフト！ よく見かけるWebサイトのナビゲーションメニュー 人気Webサイトギャラリー「The Best Designs」に掲載されている多くのWebサイトはメニューアイコンをロゴとともに画面上部に掲載しているのをよく見かけます。よく見かけるからと言ってこの場所に設置するのが本当に使いやすい
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をダウンロード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
