【第4弾】少しのコードで実装可能な10のCSS小技集
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
ニュース・マガジン風レイアウトのWordPressテーマ「Magazine」
2014年8月19日 Wordpress, お知らせ 私の参加しているWordPressテーマ制作チーム、Themifyで、新しいテーマ「Magazine」がリリースされました！私はデザインと、コーディングの一部を任せて頂きました。様々なレイアウトに対応しており、BBCのような本格ニュースサイトや、さまざまなカテゴリーを扱っているはてなブックマークのような情報サイトにピッタリのテーマです！ ↑私が10年以上利用している会計ソフト！ デモ ダウンロード 英語による解説動画。カスタマイズの流れが紹介されています。 「Magazine」テーマの特徴 メガメニュー カテゴリーメニューから4つの記事をサムネイル付きで表示することができます。コンテンツ量の多いサイトでは嬉しい機能じゃないでしょうか？ 外観→メニュー のページで、画面右上の「表示オプション」をクリック 「詳細メニュー設定を表示」の「CS
制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ
2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類
視覚的に情報を伝える！実例で見るインフォグラフィックスの魅力
2015年1月21日 インスピレーション, 便利ツール インフォグラフィックスとは情報やデータをを視覚的に表現したものです。情報を素早く簡単に表現したい場面で用いられ、私たちの身の回りにある路線図や会議での資料、学校の教科書などなど、様々な形で目にする事があるかと思います。今日はそんなインフォグラフィックスに注目してみましょう！インフォグラフィックスを制作する機会がないという方でも、全体のデザインやアイコン制作、配色のアイデアになりますよ！ ↑私が10年以上利用している会計ソフト！ なんでインフォグラフィックスを使うの？ インフォグラフィックスで情報を視覚化することで、伝わりづらい数値や専門的な情報も比較的伝えやすくなります。簡単に例えると、「チョコレートを食べる量が2011年は200kgだったのが、2012年は240kgに増えました」と文章だけで説明されるより、棒グラフで推移を視覚的に見
Credit Card Test Numbers and Paypal Test Accounts
2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」
生活をもっと便利に・楽しくしてくれる無料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
Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個
2017年6月30日 便利ツール 以前「ChromeからFirefoxに戻した6つのくだらない理由」という記事を書いてから約８ヶ月。久しぶりにChromeをいじってみると、エクステンションの数も増え、いろいろと進化しているようです。「Firefoxにあるこの機能がChromeであれば移行するのに…」と思っていた事がだいぶ解消されたので再びChromeに復帰しました！そこでFirefoxに入れていたアドオンと、Chromeで使用し始めたエクステンションを紹介します。Firefox派の人も、Chrome派の人も、移行検討中の人も、ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ Firefoxアドオンに代わるChromeエクステンション 私のようにもともとFirefoxユーザーの場合、一番のネックは便利なアドオン。それに代わるエクステンションがないと移行の決意はできません
Web屋さんのための新年の抱負アイデア24
2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ ↑私が10年以上利用している会計ソフト！ 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする
ECサイトの色やデザインと購買意欲の関係 | Webクリエイターボックス
色と消費者 色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。 黄色 楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。 赤 エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。 青 信頼と安全の色。銀行や企業のメインカラーとして使われます。 緑 裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。 オレンジ 活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。 ピンク ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。 黒 パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。 紫 落ち着き
配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
