2024年9月18日 Webサイト制作, 便利ツール PodcastでノーコードツールでWebサイトを作ってみよう！STUDIOって最近よく聞くよねー！気になるねー！というお話になり、実際にひとつ簡単なWebサイトを作る予定もあったので、STUDIO使って制作してみました！ ↑私が10年以上利用している会計ソフト！ STUDIOとは？ STUDIOは、HTMLやCSSでコードを記述する必要のない、ノーコードでのWebサイトデザインや制作ができる国産ツールです。サーバーの設定も不要で、STUDIOだけで設計から制作、公開までを一括管理できます。 日本製というのがポイントで、海外のツールやテンプレートで作ったWebサイトを日本語にした途端にダサくなったりしちゃうんですよね。しかしSTUDIOではモリサワが提供する500種類以上のフォントが使えるため、日本語でもデザイン性の高いWebサイトが作れ

2024年8月22日 Webデザイン デザインの勉強を始めて最初のうちは、とにかく数をこなすことがスキルアップへの近道です。架空のものでもいいので、ジャンルが偏らないようにバナーデザインから取り組んでみましょう！グラフィックツールの練習にもなりますよ！ ↑私が10年以上利用している会計ソフト！ デザインスキルを向上することが目的です。様々なジャンルのバナーデザインに挑戦しましょう！とは言え、どんなテーマでなんの広告を作ればいいか、パッと思いつかなかったりしますよね。そこで、架空の商品やサービスのバナーデザイン案をご用意しました！お題にあうバナーを作ってみましょう。10個作り終わった頃には、だいぶコツが掴めてくるのではないでしょうか？毎日の空いた時間に、ぜひ挑戦してみてください！ 簡単なルール 提示されているキャッチコピーや素材は必ず利用しましょう 提示されている画像は特に注意書き等なければ

2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに

2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で

CHAPTER 1　最初に知っておこう！ JavaScriptでできること CHAPTER 2　JavaScriptに触れてみよう！ CHAPTER 3　JavaScriptの基本を学ぼう！ CHAPTER 4　イベントで操作しよう！ CHAPTER 5　複数のデータを使ってみよう！ CHAPTER 6　アニメーションを加えよう！ CHAPTER 7　Webページを作ってみよう！ CHAPTER 8　エラーと解決方法 カバーイラストはこれまでと同様ICHIRAKU STUDIO様に描いていただきました！今回も素敵なイラストをありがとうございます！ 購入する こんな人におすすめ Webサイトに動きをつけてみたい人 HTMLとCSSの基礎を学んだあと、何を勉強しようか考えていた人 一度JavaScriptを勉強したけど挫折した人 最近のJavaScriptの書き方を学びなおしたい人 jQuer

2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte

2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく

2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>

WordPressの編集画面が生まれ変わる！開発中の新しいエディター【Gutenberg（グーテンベルク）】 2017年7月9日 Wordpress 先日京都で開催されたWordPressのイベント、WordCamp Kyoto 2017に参加しました！日本のWordCampに参加するのはこれが初めて！参加無料ってすごい！様々な有益なお話が聞けた中で、現在ベータ版の新エディター「Gutenberg（グーテンベルク）」の紹介にピンときたのでさっそく試してみました！ ↑私が10年以上利用している会計ソフト！ Gutenberg（グーテンベルク）って何？ Gutenbergは現在開発中のWordPressの新しいエディター。まだ実装はされていませんが、プラグインとして公開されているのでお試しで使用できます。ベータ版ということで、「公開中のサイトでは使用しないで下さい！」とのことです。 特徴はMe

2017年4月15日 CSS, 便利ツール 先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ ↑私が10年以上利用している会計ソフト！ Griddyのサイトを開くと4つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指定します。デフォルトでは3つのボックスが横並びになっていますが、4つ以上

2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,

2017年1月25日 Webデザイン, 便利ツール 企業ではもちろん、個人でWebサイトやブログを運営している人にとっても、ロゴは個性を表す重要な要素です。しかし、非デザイナーが自分でデザインするのはなかなか敷居が高かったり、プロに頼むと時間もお金もかかってしまう…そんな時のために、今回はロゴをサクッと作れちゃう便利なサービスをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ Logaster 企業名の入力やビジネスタイプを選択するだけでかっこいいロゴが作れるサービスのLogaster。アイコンやフォントの種類も多く、ビジネスにあったデザインを選ぶだけ！日本語にも対応していて安心です。 まずはサービスの名前を入力。ビジネスタイプを選んで次へ。 選択したビジネスタイプから、それにあったロゴマーク付きのデザインが表示されるので、好みのものを選択します。アイコンを検索することも可能

2016年10月4日 インスピレーション 使ってますか？Instagram。友人の写真を見るのも楽しいですが、美しいデザイン、作品を眺めるのもワクワクしちゃいますよね。そこで今回は、デザイナーやイラストレーター、アーティストなど、多分野で活躍中の方のInstagramアカウントの中から、プライベートの写真少なめで、作品の写真をメインに投稿しているアカウントをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ Seb Lester

2016年9月1日 ユーザビリティ 8月某日、ワイヤーフレーム作成ツールのCacooなど、制作業務を円滑に進めるための様々な便利ツールを開発しているヌーラボさんにおじゃましました。そこで、まもなくプロジェクト管理ツールのBacklogをリデザインするということでしたので、ユーザビリティテストの被験者をしてみることに！ユーザビリティテストを行うことはありましたが、本格的なテストの被験者をすることはあまりなかったので、ワクワクしながら受けてみましたよ。 ↑私が10年以上利用している会計ソフト！ リデザインの経緯 長く愛用され続けてきたUIを改新するということですので、デザインを変更することを決めた理由や経緯について、中の人に聞いてみました！ 今までのUIは、少し前のWebアプリケーションで良く見られたような、1画面に多くの情報を載せてすべての機能を文字ラベルで表示するタイプでした。この方針には

2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う