CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し

はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ

はじめに 他の人が書いたコードを読んでいるときに時々気になるのが、英語の間違いです。 特に動詞、名詞、形容詞の使い分けが間違っていたりすると、かなり違和感を感じます。 そこで今回はモデル（＝クラス）やメソッドに名前を付けるときの基本的な原則をまとめてみます。 また、英文法的に正しい品詞が選べるようになるための習慣についても最後に説明します。 想定する言語/フレームワーク この記事の説明ではRuby/Ruby on Railsを想定しています。 ただし、基本的な考え方は他の言語でも同じように使えるはずです。 モデルの名前は名詞にする 例: 「支払い情報」を表すモデルを作りたい場合 × Pay ○ Payment 「支払う = payか。よし。」でモデルを作ってはいけません！ payは動詞で、payの名詞形がpaymentです。 Payモデルではなく、Paymentモデルを作りましょう。 例:

Why not login to Qiita and try out its useful features?You get articles that match your needsYou can efficiently read back useful informationdark_modeYou can use dark theme

ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ

徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多

Photoshopでドットグラデーションを作る方法 こんにちは、さち です。 今回は、Photoshop Elements で上の画像のような ドットグラデーション（水玉グラデーション）を作成する方法を紹介します。 私の備忘録的な記事ですが ドットグラデーションを作成方法を知りたい方に 少しでもお役に立てたら幸いです。 まずはモノクロ（白黒）のドットグラデーションを作る カラーのドットグラデーションツールを使る場合も まずはモノクロドットグラデーションを作る必要があります。 黒から白へ変化する普通のグラデーションを作ります。 必ずカラーコードは、黒は「#000000」白は「#FFFFFF」にして下さい。 グラデーションを作ります。 グラデーションの方向はどんな向きでもよいです。 グラデーションのレイヤーを選択した状態で 「フィルタ」→「ピクセレート」→「カラーハーフトーン」。 「最大半径」

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ ページ全体のレイアウト CSS Gridはコ

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

最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン

この記事は、カラー画像の黒成分を透明処理ついてPhotoshopを使った方法を説明をします。 また記事の最後では、Photoshopアクションファイルの配布もしています。 ※ 本記事では、Adobe Cloud Photoshop 2020 を用いて解説した再編集版です。旧記事 Photoshop CS6での解説はこちら にあります。 黒成分を透明化って？ 透明化処理前と透明処理後は、こちらのとおりです。 透明化 前： 透明化 後： 透明化後の写真は、写真から黒い部分が取り去られ、その部分が透明化しました。 すこしわかりにくいので、この画像下にカラーレイヤーを敷いてみます。 左から、何も敷かない（Photoshop画面上の表示）、白を敷く、黒を敷く、になっています。 黒を敷いた箇所をみると、元の画像と同じであることがわかり、黒い部分がキレイに取り去られたことが確認できます。 それでは、この

歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っています。ここでは10分程度の工程でPhotoshopでネオン管が光っているような文字の作り方を解説します。 動画解説はこちら Photoshopでネオン管が光っているような文字の作り方背景を複製し、新規レイヤーに任意のテキストを入力（OPEN）。 複製した背景にレイヤーマスクを追加し、描画モードを通常から乗算に変更。 レイヤーマスク部分に不透明度や流量を調整した黒色のブラシでテキストの周辺をなぞるように塗ります。 テキストレイヤーにレイヤー⇒レイヤースタイル⇒境界線を選択しサイズを調整。（色はテキストと同色） テキストの塗りを0にして境界線だけを表示させます。 テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤースタイルをラスタライズ。 テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤ

最新verは広告が出ると聞いて躊躇っていたのだがやむを得ずアップデート。色々と酷すぎたので改善を試みる。目障りな広告を非表示。スレ閲覧時の不具合を解消。 3/20追記 ver3.83にも対応。 広告が出るだけならともかく起動時に、 「安価が無反応」「最新のレスまで正しく表示されない」 などver3.83に更新してもスレ閲覧に困る不具合が出るのはどうかと思う。 「スレの新着チェック」「スレの最上部を表示」「メモ欄を下に表示」 これらの操作を行えば正常になるがこれを毎回やるのは流石に面倒。 ◆バイナリエディタ(Stirling)で上記の問題点を解消 Stirlingのダウンロード : Vector ソフトを探す！ ◆Stirlingの設定 ダウンロード後に解凍したらJane Styleをひとまず終了する。 ▼Stirling.exeを右クリックから「管理者として実行」 メニューバーのファイル

はてなでブログを書き始めて2週間ほど経過したのだけれど、ブログを始めると書く内容そっちのけでやたらとデザインにこだわりたくなることがある。 特に、ホットエントリーを覗いてみると、内容はもちろんすばらしいものばかりだけれど、なかにはデザインが素晴らしいサイトもあって、魅了されることがある。 どんなふうにデザインしたのか、どういう思考回路になるとこんなデザインが思いつくのか、などなど。 デザインはデザイナーの既得権益・不可侵領域はなく、万人が自由に扱えるものだ。そして、デザインはセンスではなく理論(theory)だ、ということも以前書いた。 デザインを勉強すれば、ブログに手を加えたり、自分で名刺を作ったり、部屋をお洒落にコーディネートしてみたり、いろんなことができる。 ブログでいえば「Webデザイン」というジャンルから始めるのが定番ではあるのだけれど、これからデザインを始めるひとにはぜひ「グラ

Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。 togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。 僕がPhotoshopを教えていて一番好きな瞬間は、「○○を消せ」系の初心者向け課題で、必死で作業すればするほどプレデターを次々に生み出して絶望していく生徒に「もうお前の地球は終わりだ」と講評することです。 pic.twitter.com/gEpXGVx7xo ? ﾚｲﾆｰ氏 (@moeebu) 2016年3月8日 おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。 Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない！という方に

ドクターマーチンの靴紐ってしっかり結んだつもりでも、いつの間にかユルユルになってしまうんですよ。これが悩みであまり履いていなかったんですがこれからは履きまくれます！ ほどけない紐の結び方をマスターしました！今回ほどけにくい靴紐の結び方を調べていてたどり着いたのが「イアン結び」という結び方です！ イアン結び（6ステップ） ステップ1＆2 まずは左の紐が上、右の紐が下になるように普通に結びます。次に「左の紐（黄色）は手前側にひもを垂らし、右の紐（青）は奥にひもを垂らすように輪っかを作ります」 ステップ3＆4 左の輪に右奥の紐を通します。右の輪には左の手前の紐を通します。ここが分かりにくいんですが最初に貼った動画を何度か見れば大丈夫だと思います。 ステップ5＆6 あとは通した紐に持ち替えて左右にギュッと引っ張れば完成！ これだけで本当にほどけないの？って思いましたが…ほどけないんですよ！簡単だし