araproのブックマーク - はてなブックマーク

よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ

この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.

arapro 2021/10/28

.短すぎる納期 { transform: scale(9999999999); }

リンク

Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ

この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめコンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV

arapro 2020/08/09

あとでよむ

リンク

フォトショップで入れておきたい無料ブラシ素材90個まとめ 2024年版

フォトショップの素材の中でも、高品質なブラシは使いやすい万能アイテム。あらゆるスタイルを表現できますが、どれを使ったら良いか迷ってしまうというひとも多いでしょう。いつの間にか同じブラシばかりを使っていた、なんて経験もあるかもしれません。この記事では、フォトショップでまず入れておきたい無料ブラシ素材90個をまとめてご紹介します。ダウンロードしたブラシ素材のインストール方法や、新しくなったCreative Cloudライブラリを活用した、ブラシの整理、保存テクニックも参考にしてみましょう。これから紹介するブラシを利用するには、Adobe Photoshopが必要となります。ここ最近のAIをつかったフォトショップの新機能は、「過去10年でもっとも革新的なアップデート」とも言われています。その理由はずばり、「だれでも簡単な使いやすさ」。ブラシでなぞって不要なモノを消したり、必要なモ

arapro 2016/11/24

photoshopブラシ

リンク

デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。コンテンツ目次イメージ画像・ビデオ動画の関連ツールアイコン関連ツール書体、フォント関連ツール配色カラーツールモックアップ＆プロトタイプツールウェブサイト制作ツールコラボレーション、作業効率ツールデザインコミュニティーサイトオンライン・ラーニング、スクールイメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov

arapro 2016/09/15

リンク

プロが実践するモダン CSS の書き方入門テクニック20選まとめ

海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー

arapro 2016/09/05

リンク

日本語フリーフォント、これだけは持っておきたい厳選22個まとめ

日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。

arapro 2016/06/21

あとで読む

リンク

ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

arapro 2016/04/25

あとで読む

リンク

【簡単】2023年Photoshop切り抜きおすすめテクニック15選完全ガイド

コンテンツ目次「被写体の選択」機能「選択とマスク」機能「選択とマスク」（複雑な背景バージョン）オブジェクト選択ツールレイヤースタイル「ブレンド条件」消しゴムツール自動選択ツールクイック選択ツール多角形選択ツールペンツールチャネル設定色域指定レイヤーマスククリッピングマスク境界線を調整さいごに、 1. 「被写体の選択」機能もっとも簡単な、最新の切り抜きテクニック。ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。試しに、こちらの写真の女性を選択してみましょう。元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。たったこれだけで、女性モデルのみを選択することができました。選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了実は