今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
商用利用OK！2016年にリリースされた無料フォント30 | Webクリエイターボックス
2016年12月20日 フォント 2016年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント あさご本丸ゴシック 上品な丸みが可愛らしいフォント。軽やかさをいかしたポップなデザインに仕上がります。豊富なバリエーションは有料。 マキナス 2008年に制作開始したマキナスフォントが更に読みやすくなってリリースされました。約6,600字に対応。見出しに大きく打ち出して使うとかっこよさそう。 マメロン 約6,600字に対応しており、画数の多い漢字でもきれいに表示されます。個人的にはこのフォントの漢字がとっても好み！全角英数字は一文字ずつボタンのように枠がつきます
子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装
2016年9月21日 CSS, Wordpress ブログ等の個別記事でよく見かける、「前の記事」「次の記事」へのリンク。これまでも実装方法やスタイリング方法は紹介されてきましたが、Flexboxを使ったらもっと楽に作れちゃうよ！ということで、その方法と、ついでにWordPressでの実装方法も紹介します。 ↑私が10年以上利用している会計ソフト！ 1. モバイル用リンクを作成 まずは小さい画面用のリンクを作成します。「モバイルファースト」と呼ばれる手法ですね。前の記事のリンクを上に、次の記事のリンクを下に並べて表示します。ここでは特に込み入った事はしないので、簡単に実装できるはずです。 HTML <div class="prev-next-link"> <a class="prev-link" href="#"> <p class="prev-next-label">前の記事</p> <
シニア層を対象にしたスマートフォンサイトのユーザビリティ
2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
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を一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
かわいい系デザインに使えるCSSいろいろ
2015年2月18日 CSS 過去に書いた「かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました」という記事でかわいい系デザインの作り方を紹介しました。今回はかわいい系第二弾！CSSだけでできるかわいい小技をいくつか紹介します。すべてデモ付きなのでイメージしやすいかな？と思います。デモ画面内にある「HTML」「CSS」タブでコードが表示されるので、コピペして使ってくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 キラキラ系テキスト マーカーでラインを引く ステッチ風ボックス リボン 画像をハート型で切り抜く ハートの鼓動 ラブビーム 1. キラキラ系テキスト 某ギャル雑誌（もう刊行されてないのかな？）で毎回見かけていたこの白抜き＋明るい色のシャドウ。CSSでは text-shadow を用いて表現できます。ポイントは文字を白に設定し、シャドウの横位置・縦位置と
和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました
2017年7月14日 Webデザイン, ダウンロード, 色彩 今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！ ↑私が10年以上利用している会計ソフト！ 1. 配色 「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。 伝統色 日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに
少しのコードで実装可能な20のWordPress小技集
2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ
Beautiful Watercolor Effect Tutorial and Photoshop Brushes
2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、４倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね！ 1. ぼかし 画像を開いて、そのレイヤーを複製します（コマンド＋J）。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし（詳細）で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個
2017年6月30日 便利ツール 以前「ChromeからFirefoxに戻した6つのくだらない理由」という記事を書いてから約８ヶ月。久しぶりにChromeをいじってみると、エクステンションの数も増え、いろいろと進化しているようです。「Firefoxにあるこの機能がChromeであれば移行するのに…」と思っていた事がだいぶ解消されたので再びChromeに復帰しました！そこでFirefoxに入れていたアドオンと、Chromeで使用し始めたエクステンションを紹介します。Firefox派の人も、Chrome派の人も、移行検討中の人も、ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ Firefoxアドオンに代わるChromeエクステンション 私のようにもともとFirefoxユーザーの場合、一番のネックは便利なアドオン。それに代わるエクステンションがないと移行の決意はできません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
