文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurとcontrastで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみください。 「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。 See the Pen CSS morphing by Amit Sheen (@amit_sheen) on CodePen. 実装コードは、下記の通りです。 デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。 <div class="morphing"> <div class="word">Pure CS
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
カンパネラ @campanella0807 会社にクレーム処理がすごく上手な事務員さんがいて、コツを聞いたら、「私も一緒に怒っちゃう。何でこんな事になったんでしょうね！？本当に腹立ちますよね！！って言っちゃう。まず相手の味方をする。説明は後から。」って言ってて、なるほどなぁ〜って思った。 手練れである。 2020-07-18 06:31:55
ニッチな話題ですが、業務におけるCI/CDの現場では避けることのできない大規模リポジトリと戦うためのgit cloneのテクニックを紹介します。 この記事はDeNA Advent Calendar 2020の10日目の記事です。 CI/CDマニアの@Kesin11です。SWETではCI/CDチームの一員として、CI/CDの啓蒙活動やJenkinsを必要とするチームのサポートなどの業務を行っています。 はじめに おそらくどこの会社でも1つぐらいは巨大なリポジトリが存在しているかと思いますが、歴史あるリポジトリはgit cloneするだけで数分を要し、checkout後のリポジトリサイズがGB単位になることも珍しくないでしょう。業務で古くから存在するプロジェクトのリポジトリを触ったことがある方はきっと経験があるかと思います。 git cloneを実行するのは最初のセットアップ時だけなのであまり
Instagramに使用されているCSSのテクニックを紹介します。 世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？ Inspect Element As A Way To Feed Your Curiosity by Ahmad Shadeed はじめに Instagramに使用されているCSSのテクニック レイアウトにCSS GridやFlexboxを使用していない Instagramのアンケートに使用されているCSSのテクニック 終わりに はじめに フロントエンドのデベロッパーにとっての最高の贈り物のひとつは、Webページを調べるだけで何がどのように実装されているのか、CSSが裏でどのように機能しているのか確認できることです。Webページを見ている時に気になるレイアウトやエフェクトがあり、どのように実
いわゆる「核のごみ」の最終処分場の選定をめぐり、調査に応募するか賛否の声があがっている北海道寿都町（すっつ）で、町長が当初は先月中にも調査への応募を決める方針を示していたことが、NHKが入手した非公開の町議会の会合の議事録でわかりました。 議事録では「町民に伺いを立てたらかえって面倒になる」などの発言もあり、住民に説明する前に応募を決めようとしていた意向がうかがえ、議論を呼びそうです。 処分を実施する国の認可法人、NUMO＝原子力発電環境整備機構によりますと、北海道寿都町の大部分は「科学的特性マップ」では“濃い緑色”で示されているということです。 この濃い緑は「科学的に好ましい特性が確認できる可能性が相対的に高く、廃棄物の輸送面でも好ましい」とされるエリアです。
山田議員と赤松健氏らの共著「表現の自由」の闘い方に収録されているプロローグマンガ「ヤマーダクエスト」がかなり寒いプロパガンダになっていると話題に
電脳藻屑 @Nou_YunYun "■プロローグ漫画で山田赤松の支持獲得活動方針が分かる （略） 赤松健氏による「ヤマーダクエスト」という短編漫画が描かれています。これも「国連のバックにしたフェミニストやリベラルなどによるジェンダーに基づく批判が表現の自由の最大の敵であり、山田太郎と赤松健はこれと戦っていく」” 2022-04-24 10:10:26 電脳藻屑 @Nou_YunYun ”この漫画は世界を正しい教えに導こうとする「連合国」がヤーパンという国を呑みこもうとしていて、一歩街を出ると表現の自由がない——という設定の説明からはじまります。” 2022-04-24 10:12:59 電脳藻屑 @Nou_YunYun ”次は連合国の女聖騎士リベーラが「半裸で道を歩くなど言語道断」と言って、ヘソ出しでミニスカートを履いているヤーパンの女冒険者を攻撃しているシーン。女冒険者は自分の服装は「プ
お弁当を買った時や外出先などで、意外と使うことが多い割り箸。 最近ではすでに分かれているタイプの箸も見かけますが、まだまだ自分でパキッと割るものが多いですよね。 割り箸は左右バラバラに割れると、なんとなく気持ち悪くありませんか。本記事では、誰もが感じたことのある割り箸のストレスを一瞬で解決する方法を紹介します。 割り箸をうまく割るコツは？ 割り箸をきれいに割る方法とはズバリ、箸を水平にしてから割るだけです！ 箸は左右に引き裂いてしまうと、持ち手部分が均等に割れないのだとか。 そのため、美しく割るには箸自体を横にして、上の箸だけを引っ張るというのがコツだそうです。 ここまで書いておきながら、未だそんなことで箸がきれいに割れるとは信じ切れない筆者。 実際に割り箸が均等に割れるのかを検証しましょう。まずは何も考えずに、いつも通り割ってみます。
《なんちゅう男じゃ》羽生結弦の離婚発表に「バイオリニスト妻」の故郷では残念がる声「地元はみんな応援しようって」（NEWSポストセブン） - Yahoo!ニュース
羽生結弦（28）が11月17日、スタッフ公式Xアカウントにメッセージを掲出。〈私は、一般の方と結婚いたしました。互いを心から尊敬し、大切にしていく覚悟を持って結婚いたしました。それぞれを守るために様々なことを考えながら共に乗り越え、過ごしてきました。そんな生活の中で、お相手は、家から一歩も外に出られない状況が続いても、私を守るために行動し、支えてくれていました〉としたうえで、〈私が未熟であるがゆえに、現状のままお相手と私自身を守り続けることは極めて難しく、耐え難いものでした。（中略）お相手に幸せであってほしい、制限のない幸せでいてほしいという思いから、離婚するという決断をいたしました〉と発表。またこのメッセージのなかで羽生は、お相手やその親族のほか自身の親族、関係者に誹謗中傷やストーカー行為があったことも明かした。 【写真】地元で愛されるバイオリニストの末延さん、羽生結弦と肩を寄せる姿も
1日に約7～9時間睡眠を安全に取ることができる人間とは異なり、厳しい自然界で生きるペンギンなどの動物は、数時間眠ることが命取りにつながる場合もあります。リヨン神経科学研究センターのポール・アントワーヌ・リブーレル氏らの研究チームが、ヒゲペンギンが約4秒間の睡眠を1日に約1万回行うことで、合計11時間以上の睡眠時間を稼いでいることを報告しました。 Nesting chinstrap penguins accrue large quantities of sleep through seconds-long microsleeps | Science https://www.science.org/doi/10.1126/science.adh0771 Penguins snatch 11 hours of sleep through seconds-long micronaps https:
CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。 ラインが一方向にスーッと通り過ぎるような感じです。
Kaggleや競プロのトップランカーが持つ「本質的な強み」とは。リクルートが作り出す、競技と業務の好循環 - はてなニュース
ソフトウェアエンジニアがプログラミングの腕を競い合う競技プログラミングや、データサイエンティストや機械学習エンジニアが機械学習モデルの精度を競い合うKaggle。こうしたコンペティションのトップランカーが持つテクニックやスキルを実際の業務にも活かそうとしている、あるいはすでに活かしている企業も少なくないでしょう。 一方で、その能力を最大限活かして仕事に取り組めるかには課題も残っているようです。「競技のトップランカー」の肩書きに引きずられるためか、彼らの強みを活かすためには起用範囲を絞らざるをえない、という悩みも方々から聞こえてきます。 そんな中、リクルートではトップランカーのスキルや技術だけでなく、「本質的な強み」に着目。その「本質的な強み」を、領域を横断してさまざまなプロジェクトに活用することで、事業課題の解決やサービス価値の向上につなげています。 トップランカーの「本質的な強み」とは、
IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css
*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。 サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass（SCSS）を使用しています。 サンプルを別ウインドウで開く コードを確認する background-imageとアニメーション タイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に
｢仲良く貧乏｣を選んだ日本は世界に見放される
日本は、アメリカ・中国に次ぐ「世界3位の経済大国」とよく言われます（2008年までは世界2位）。ここでの3位は、GDPの「総額」の順位です。しかし、一国の経済水準は、GDPの「総額」ではなく、「国民1人当たり」で比較するのが、世界の常識です。 日本の2021年の1人当たりGDPは3万9340ドルで、世界28位です（IMF調査）。2000年には世界2位でしたが、そこから下落を続け、世界3位どころか、先進国の中では下のほうになっています。 経済の話題になると、景況感指数・物価上昇率・失業率・平均賃金といった数字がよく取り上げられますが、これらは経済の一部分に光を当てているに過ぎません。総合評価としてもっとも大切なのに日本ではあまり注目されていないのが、1人当たりGDPです。 日本や主要国の1人当たりGDPはどのように推移してきたのでしょうか。そこから日本にはどういう課題が見えてくるでしょうか。
※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。 テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。 本書は「Second Edition」とある通り、2017年に刊行された「知りたいレイアウトデザイン」の第2版になります。前書では紙媒体のレイアウトが中心でしたが、第2版では紙媒体だけでなく、Webサイトやスマホアプリやバナーなどデジタル媒体のレイアウトが数多く解説されています。実例の数はおよそ3倍と大幅増量（担当者様より）です。 本書は今週、発売されたばかり！
はじめに 話題となっている『良いコード／悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方』 (出版社のページ) を読みました。 全体的には「うんうん、そうだよね」と同意できることが多かったです。 もちろん、初めて目にするような考え方, アイディア, テクニックもありました。 一方、気になったことやちょっと引っかかったこともありましたので、メモしておきます。 あくまでもメモなので結論のようなことはありません。 p.55: HitPoint.isZero HitPoint クラスに isZero メソッドがあります。 「ヒットポイントがゼロであれば true」という仕様で、実装は次のようになっています。
妻が新興宗教の勧誘を失礼のないように断りました。 - Everything you've ever Dreamed
己の良心に従って新興宗教のセールスを断ったら心が死んだ。自分で思った以上に深刻なダメージで、完全回復できていない。先日、大きな台風がやってくる直前の午前中、某新興宗教のセールスが我が家へやってきて、僕が対応した。女性の二人組だ。おばはんと若い女性。もしかしたら親子だったかもしれない。彼女たちは簡単な自己紹介をすると、タンクトップから腋毛をのぞかせているふざけた恰好の僕を相手に、真顔のまま、チラシを見せて、あれこれセールストークをはじめたが、お二人の幸薄いオーラがすべてを無にしていた。そんな負の空気をまとっているグループにどんな物好きがすすんで入ろうというのか。ひととおり話を聞いた後で、申し訳ないけど、つってお断りをした。友好的なムードであった。誰かハマる人がいるといいねって笑いながらリビングに戻ってくると、妻は「キミは何をしているのですか。バッサリと話を斬ってしまいなさい。私はいつもそうし
要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。 Flexbox Dynamic Line Separator by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 区切り線の実装 なぜ区切り線が小さい四角になるのか 区切り線の太さ グラデーションの区切り線 破線の区切り線 これを行う別の方法 終わりに はじめに UIをデザインしているときに
最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(
ページのレイアウトやUIコンポーネントなど、Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックを紹介します。 ヘッダやナビゲーション、フォーム、テーブルなど、実際のプロジェクトでよく使用されるテクニックです。 Master Flexbox in 12 Minutes with Most Common Use Cases by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ブロック要素を水平に揃える 2. 要素を中央に配置する 3. 要素間にスペースを分配する 4. 要素を端にプッシュする 5. 相対的なサイズのカラムを構築する 6. メディアクエリがある場合とない場合のレスポンシブレイアウトを作成する 7. アイテムの順番を変更する 8. アイテムの位置を変更する
『ゼルダの伝説 ティアーズ オブ ザ キングダム』リンクの“体重”が割り出される。ユーザー製天秤によって示される重さデータいろいろ - AUTOMATON
『ゼルダの伝説 ティアーズ オブ ザ キングダム』において「ゲーム内で実際に重量を計測できる秤（はかり）」を開発したプレイヤーが現れた。重さの比較による計測の結果、リンクの体重などが明らかになっている。 『ゼルダの伝説 ティアーズ オブ ザ キングダム』は、Nintendo Switch向けに発売中のアクションアドベンチャーゲームだ。『ゼルダの伝説 ブレス オブ ザ ワイルド』の続編にあたる。新作においては、ハイラルの地が突如として天変地異に見舞われる。城は宙へと浮かび上がり、空からは謎の遺跡群が降り注ぐ。大地と大空が広がった世界にて、“右手”に力を宿したリンクがハイラルの異変に立ち向かう。 本作ではリンクの新たな能力「ウルトラハンド」によって、さまざまなモノがビルド可能。攻略に役立つメカからなんの役にも立たない装置まで、プレイヤーたちが多彩なモノ作りに励んでいる（関連記事）。Reddit
モバイルファーストとデスクトップファーストの現状、それぞれのワークフローを解説し、今日のレスポンシブ対応のレイアウトを実装するより良いアプローチ方法について紹介します。 ビューポートサイズとは関係ないすべてのデバイスで共通の基本スタイルを優先的に記述する方法、メディアクエリを使用しない方法、モバイルとデスクトップの違いを考慮する必要がない方法など、最新の実装テクニックも解説します。 The State Of Mobile First and Desktop First by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モバイルファースト・デスクトップファーストとは何を意味するのか モバイルファーストのワークフローはどうあるべきか デスクトップファーストのワークフローはどうあるべきか スコ
UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
Webページやスマホアプリなど、UIデザインで使用されるシャドウをより美しく実装するテクニックを紹介します。 シャドウをぼんやりとしたグレーにするだけでなく、美しく最適化して実装します。また、シャドウのサイズで要素に標高差をつけ目立たせたり、彩度と明度の関係など、UIデザインに効果的なテクニックも詳しく解説されています。 CSSでシャドウを実装する前に、一読をお勧めします。 Designing Beautiful Shadows in CSS by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、当記事では画像にしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに シャドウをなぜ使用するのか 一貫性のある環境の構築 美しいシャドウの実装方法1: レイヤー化 美しいシャドウの実装方法2: 色
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説します。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載です。 CSS Variables 101 by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数（カスタムプロパティ）とは 変数名の付け方 CSSの変数のスコープ CSSの変数のフォールバック CSSの変数の効果的な使用例 インラインでCSSの変数を定義 メディアクエリでCSSの変数を定義 CSSの変数の継承 CSSの変数のバリデーションの仕組み CSSの変数の興味深い発見 デベロッパーツールで使用できる便利なテクニック 終わりに はじめに CSSの変数（別名: カスタムプロパティ）がブ
SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. SVGで切り抜きを実装 2. SVGでセクションの見出しを実装 3. SVGでリンクの下線を実装 4. SVGでテープを実装 終わりに はじめに SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー
この記事は 10X アドベントカレンダー2023 という企画の1日目（12/1）の記事です。 こんにちは、10Xでソフトウェアエンジニアをしている 岡野（@operandoOS）です。 今回 10Xで3回目となるアドベントカレンダー企画の1日目をありがたく担当させていただきます💪 目次 目次 10X アドベントカレンダー2023ってなに？ さてさて、本題へ CIは絶対に速い方がいい CIを高速化するテクニックの紹介 キャッシュの利用 マシン性能の調整 ジョブの並列実行とテスト分割 最適なテスト分割 ジョブの実行順序・依存関係の最適化 不要なジョブ・ステップを削除する テストコードの実行速度を上げる 紹介したテクニックを活用した10XでのCI高速化事例 アプリのビルド時間の大幅短縮に成功！！ APIのテスト実行時間の大幅短縮に成功！！ CIを高速化するために日々取り組んでいること CI/C
カスガ @kasuga391 海外のブログで「日本語と中国語を見分けるには文中に『の』という渦巻きがあるか探せばいい」という裏技を読んだことがあるけれど、逆に言えば非漢字圏の一般人にはそれぐらいしか見分け方がないようだ。 2020-06-01 09:56:25 カスガ @kasuga391 なんか予想以上にRTされたので、参考用に情報元のブログのURLを貼っておきます。 legendsoflocalization.com/is-that-writte… あと沢山のRTやFavやコメントありがとうございます。 さすが全部のコメントに返信するのは無理ですが、目は通させて頂いております。 2020-06-01 23:20:08
当サイトでは、Photoshopのテクニックを学ぶのに最適なチュートリアル、作り方をまとめて紹介しています。この記事では、2019年のあいだに公開された、特に確認しておきたいPhotoshopのデザインチュートリアルをまとめてご紹介します。 満を持した登場となったiPad版Photoshopはもちろん、アップデートされたPhotoshop CC 2020の新機能にはじまり、お手軽な写真加工からこれぞPhotoshopな合成テクニック、設定ひとつで完成のお手軽テキストエフェクトなど人気のデザインスタイルのつくり方を揃えています。 これからPhotoshopを始めてみよう、というひとにもぴったりなテクニックを揃えています。年末の連休をつかって、新しいテクニックを習得してみてはいかがでしょう。 【総まとめ】2019年公開のすごいPhotoshopチュートリアル、作り方厳選まとめ 風景写真をイラス
菅原一秀前経産相を略式起訴に追い込んだ元秘書が暴露 現金バラマキ、パワハラ、隠蔽工作のすべて | AERA dot. (アエラドット)
略式起訴された菅原一秀前経産相（C)朝日新聞社 菅原氏と秘書が交わしたLINE(提供） 菅原氏と秘書が交わしたLINE(提供） 前経済産業相で衆院議員を辞職した菅原一秀氏は、地元の衆院東京9区の有権者に香典や現金など80万円を寄付した公職選挙法違反（寄付行為）で6月8日、東京地検に略式起訴された。 【写真】菅原氏が秘書に「ペナルティだぞ」と怒ったＬＩＮＥはこちら 一度、不起訴と判断されたが、検察審査会は2月24日付けで起訴相当と議決。東京地検が再捜査をしていた。その結果、菅原氏が地元有権者に香典や会費、陣中見舞いなどの名目で53万円の現金を配り、供花などで27万円相当の花を贈ったことが判明した。 「長く国会議員を務め、大臣にまでなっているのに菅原氏は遵法精神など皆無。香典などカネのばら撒き以外でも、めちゃくちゃです。ひどい目にあった」 こう証言するのは、菅原氏の元で公設第2秘書を3年間ほど
昨日、株式会社はてなの京都オフィスで開催されたKyoto Tech Talk #4でちょっとしたトークをした。 hatena.connpass.com タイトル「(新サービス|カクヨムネクスト)(オープン)?を支える スプレッドシート(芸|技術)」は、正直なところ決めるのがめんどくさくなったので、解釈の幅をもたせることで解決した。正規表現での発話を流行らせたい。 kakuyomu.jp オフライン登壇だったので、だいぶ実地の言葉で補足をした、つまりスライドだけ読んでもだいぶ端折られてる。スライドもこの記事の最後で公開はしておくが、テキストで補足をする。 新サービス立ち上げ時の運用機能は、作り込みすぎないではじめられるスプレッドシートが使える ぼくもそうだが、Excelやスプレッドシートはノンエンジニアでもだいたい使うことができる。新サービス立ち上げのような局面では、できるだけユーザー向けの
取引先との商談で、社内のコミュニケーションで、思ったような返事を引き出せない……。誰しも一度は、そんな苦い経験をしたことがあるはず。 仕事は、利害の異なる相手と妥協点を探っていく作業の連続。しかし、その技術は基本的に経験から学んでいくしかありません。交渉下手で悩む人は、どうすれば自分の利益をはっきり主張し、勝ち取れるのでしょうか。 今回お話を伺った若林翔さんは弁護士としてナイトビジネスに深く関わる中、さまざまな相手と交渉を繰り広げてきました。かつては暴力団関係者に事務所へ乗り込まれた経験もあるとか。 そんな若林さんは、交渉がうまくいかない最大の原因を「目標や終着点を決めずに “モヤっと”話してしまっている」ことと指摘します。「モヤっと話す」とは、一体どういうことなのでしょうか。 タフな経験をしていなくても使える基本的な交渉のテクニックを、交渉のプロに学びます。 夜の世界のトラブルを「交渉」
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
公開日：2021.12.23 更新日：2022.07.07 駅伝を先導する白バイの超絶ライテクを知る。安全＆機敏を極めたバイク走行を見せてもらおう！ 箱根駅伝というものがある。正式名称は、東京箱根間往復大学駅伝競走。毎年1月2日〜1月3日の2日間、東京の大手町から箱根の芦ノ湖までの往復を各大学の選手が襷（たすき）をつないで走る駅伝競技大会だ。1920年から始まった歴史ある大会で、1987年からはテレビ中継も始まり、毎年多くの人を熱狂させている。 中継を見ていると、白バイが駅伝ランナーを先導していることが分かる。ごくゆっくりと、ランナーと常に一定の距離を保っているのだ。 この先導、一見かなり簡単そうに見えるが、実はかなり難しいのではないだろうか。なにしろ先導する白バイの車体は全くブレていない。限りなくゆっくりと自転車を漕いでいる自分を想像してみてほしい。多分、自転車はふらふらと頼りなく進んで
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
会社の事務員さんから聞いたクレーム処理のコツが日常生活でも色々と応用できそうだった「これは有効そう」「前の会社でやってた」
大規模リポジトリで高速にgit cloneするテクニック - DeNA Testing Blog
Web制作者は要チェック！Instagramに使用されているCSSのテクニック
「核のごみ」北海道寿都町 非公開の議事録に書かれていたこと | 各地の原発 | NHKニュース
割り箸を一瞬で『左右均等に割るコツ』 「見違えた」「教えたらみんな感動」
https://twitter.com/sakurazari/status/1566607158317584385
約4秒の昼寝を1日1万回することでヒゲペンギンは11時間以上の睡眠時間を稼ぐ
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト
この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA
情報整理から視線誘導まで、レイアウトに関するテクニックがこれでよく分かるデザイン書 -知りたいレイアウトデザイン
『良いコード／悪いコードで学ぶ設計入門』を読んで気になったことのメモ
CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック
Webサイトやスマホアプリの実装でよく使用されるFlexboxのテクニックのまとめ
レスポンシブ対応のレイアウトを実装する最新テクニックを解説、モバイルファーストとデスクトップファーストの現状
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説
Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック
CIを高速化する技術⚡️ - 10X Product Blog
外国人が日本語と中国語を見分けるのには文中に『の』という渦巻きがあるかどうか探すというテクニックがあるらしい
【総まとめ】2019年公開のすごいPhotoshopチュートリアル、作り方厳選77個
関数とGASを使い分けてスプレッドシートでシステムを作る - ミネムラ珈琲ブログ
口下手＝交渉下手はウソ。「歌舞伎町の弁護士」が教える交渉術の基礎 | Dybe!
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
駅伝を先導する白バイの超絶ライテクを知る。安全＆機敏を極めたバイク走行を見せてもらおう！｜KINTO
Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装