上marginか下marginか、どちらに統一すべきかの結論｜DESIGN REMARKS [デザインリマークス]
WEB制作のCSS設計において、marginのルールを上か下かどちらに統一すべきかという議論は色々なところで行われてきました。 私もWEBサイトの制作を仕事にしてから10年ほどになりますが、この問題を日常的に考えてきました。 世の中のデザイナーさんやコーダーさんの記事を読んでいると、いくつかの結論がありました。 ・下marginで統一派 ・上marginで統一派 ・状況によって上も下も使い分ける ・サイトごとにルールが決まってればいい これだと全パターンありますよね。数としては下margin派が一番多いと思います。 ある意味、ちゃんと設計してあれば良いっていう感じもします。 今回は私なりにベストだと思うルールを紹介してみたいと思います。 一文で表すなら、 「基本的に下marginだけど場合によって上marginも使う。上に配置される要素が変わる要素には上marginも使う。」 これを分解し
![上marginか下marginか、どちらに統一すべきかの結論｜DESIGN REMARKS [デザインリマークス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a58aebbd74e3cc82382cb9dddc2a288b14c73df/height=288;version=1;width=512/https%3A%2F%2Fdesign-remarks.com%2Fwp-content%2Fuploads%2F2019%2F09%2Fmargin_top_bottom_thumb-1200x675.jpg)
私たちには、タイマッサージがある｜田中 伶
noteを始めたときから決めていた。いつか必ず「タイマッサージ」の凄さについて綴ること。このnoteの下書きの日付が2019年だったことがその証だ。 デスクワークのために生まれたわけではないダイニングテーブルで朝からパソコンに向き合っていたかと思えば、帰宅した子どもたちをかわるがわる抱っこする。荷物が多いので出かけるときはリュックだし、移動中のスマホで猫背だし、慌ただしく入るお風呂では湯船にゆっくり浸かって… なんて夢の話。ようやく入ったベッドでは自由すぎる子供の寝相に追いやられ、ろくに身体を伸ばすスペースもない。ときに夜泣きする子供のケアで部屋を行ったりきたりする、安眠とは程遠い生活。朝起きてぐぐっと身体を伸ばす。しかしなんだか思うように伸び切らない。”なにか” がそこに詰まって凝り固まっている感じ。肩が重い。背中が硬い。 つまり私たちは、今とっても疲れている…！ そんな私たちの救世主が
在宅勤務、集中できない…という方へ。ベテランリモートワーカーに聞く「気分転換法」 - りっすん by イーアイデム
「在宅勤務になってから、なんとなく作業効率が落ちた気がする……」「オンオフの切り替えができなくて困っている……」 急速に普及していったテレワーク（在宅勤務・リモートワーク）。通勤時間がなくなり朝時間にゆとりが生まれたなどメリットも多くある一方で、万全な準備もなくスタートしたことから、家で仕事をするうえでの悩みを持つ人も少なくないのでは。 そこで今回は、長年在宅勤務を経験してきた3人の方に、改めて在宅勤務をする上で意識しておきたいことや、在宅でもしっかりと仕事に集中するために意識しておくといい点を中心にお聞きしました。 ＊＊＊ ＜＜参加者プロフィール＞＞ 壽かおり（ことぶき かおり）さん：2016年夏よりフルリモートワーカー。全社員がリモートワークのシックス・アパートで広報を担当。Twitterではハッシュタグ 「#リモワノウハウ語るよ」でリモートワークノウハウを発信中。2020年に『リモー
「一緒につくる」を仕組みで実現する、SmartHRコムデの依頼チャンネル｜Cocoda
私たちコムデは、SmartHRのプロダクト以外すべての領域で、お客さまとのタッチポイントになるものをデザインしています。 たとえば、広告やサービス紹介冊子、 メルマガやブログのアイキャッチ、時にはSlack emoji、などなど！ こういった制作物は、ほとんど「こんなものがほしい」「こんなことがやりたい」といった他部署のメンバーからの依頼でスタートします。デザイン依頼は1日平均3件ほどあり、コムデのメイン活動となっています。 ここではじめにことわっておくと、コムデは依頼をもらって動く受け身の集団ではありません。他部署のメンバーが抱える課題を一緒に解決していくために、デザイナーとしてジョインして、一緒に作っていくためのチームです。たとえばブログのアイキャッチ作成といったシンプルな依頼でも、よりよくするためにタイトルを変える提案をすることだってあります。 私たちは解決策を「一緒に作る」ためのデ
フロントエンドエンジニアのカジュアル面談でよく質問される「会社の体制や案件について（前編）」
こんにちは、 Gaji-Labo フロントエンドエンジニアの鈴木です。 以前こちらの記事で書いたように、絶賛採用活動中の Gaji-Labo では、日常的にカジュアル面談を実施しています。 その記事では、カジュアル面談時によく質問されることをリストアップしました。 今回は、「会社の体制や案件について」フロントエンドの領域をメインに回答していきたいと思います。 以下の4つを前編・後編に分けてお届けします。前編では「どんな事業をおこなっているのか」「どんな案件をやっているか」についてまとめました。 どんな事業をおこなっているのかどんな案件をやっているかどんなクライアントがいるのかどんな体制でやっているかどんな事業をおこなっているのかGaji-Labo は受託でデザインプロセス支援と開発フロー支援を行っている会社です。 「フロントエンド開発」「UIデザイン」「チームとプロセス支援」の3つの領域を
React Hooksのみでドラッグ＆ドロップの並び替えを実装する
この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない React Hooks を使って実装する 並び替えするときにアニメーションさせる 簡単に扱えるようにする！ アニメーションは CSS を使って行いますが、今回は簡略化の為に CSS ファイルは扱わずにインライン CSSを用いる事とします。 どのように使えるか考える では早速、「 実装していくぞー 💪 」と行きたい所ですが、今回のような汎用的な処理を自作する時は、「 どういう感じで使いたいか？ 」という所から考えた方が、色々とやりやすいと思っています。なので、今回はそこから考え
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと
Pryはもう古い、時代はIRB - k0kubun's blog
僕はRubyで開発をする時は毎回Pryを使うくらいの熱狂的Pryユーザーだったのだが、PryはGemfileに書いてないと binding.pry できなくて不便。任意のgemをdefault gem化するgem default コマンドも作ったのだが、これをやるのすら面倒だと思っていた。 ある日、nobuさんがRubyに binding.irb という機能をいれた。Pryがdefault gemになるのを待つよりPryで僕が使う機能をIRBに全部移植してしまった方が早いのではないかと思い、4年前からPryの機能の移植活動を始め、今日僕がよく使う機能を全て移植し終えた。 その記念に、この記事ではIRBのPry互換の機能を紹介する。昔 今更聞けないpryの使い方と便利プラグイン集 という記事を書いたんだけど、この中で僕が毎日のように使うコマンドは全てIRBに移植したので、それを紹介する本稿を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「BASE」の商品をGoogleに！「Google商品連携 App」でかんたん連携 - BASE U｜ネットショップの開設・運営・集客のノウハウを学ぼう