1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
ぼくたちのかんがえたさいきょうのi18n国家
本記事は下記のtweetから始まるスレッドに触発され、@qnighyや@na4zagin3からアイディアを拝借して書いた。 i18n力が最強の国は国内に複数の言語があり、そのうちいくつかは他国でも使われている言語の方言で、1バイト文字での代替表記が困難で、歴史的にISO-2022ベースの文字コードとUnicodeと独自エンコーディングが混在していて、フリガナなどの特殊な組版規則があり、右書き左書き縦書きを併用し、 — Masaki Hara (@qnighy) 2018年8月6日 皆さんのおかげで最強のi18n国家が建設されつつある。一瞬で滅びそう — Masaki Hara (@qnighy) 2018年8月6日 長い前置き ソフトウェアのi18nは難しい。自文化では当たり前と思っていてハードコードしてしまった仮定が崩れて、大幅な再設計を余儀なくされるからだ。気づいて再設計できればまだ良
プログラミング初心者が挫折するまでの道のり - Qiita
結論 複数の設計工程（PSやSSなど）とコーディング（PG）をごちゃ混ぜに勉強しているせいでプログラミングが理解できないんじゃね？ はじめに この記事は、新卒で採用された会社の研修にて、プログラミングができない人と半年近く一緒に過ごした筆者が、現在のプログラミング教育の問題点を考察したものである。 googleで「プログラミング初心者 挫折」と調べると、大多数のホームページにて「質問できる機会がない！」だとか「エラーが解決できない！」などの定型文が転がっており、そうじゃねぇだろと思いこの記事を書こうと思った次第である。 この記事は大きく分けて2つに分かれる。1つ目は、プログラミング初心者に立ちはだかる大きな壁。2つ目に、私が考えたプログラミング教育だ。 あくまでも少ししかプログラミングに触れていないただの初心者がほざいているだけだが、もし一つでも共感できるところがあったらとても嬉しく思う。
HTML Living Standard
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
A Complete Guide to Flexbox | CSS-Tricks
display This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. .container { display: flex; /* or inline-flex */ } Note that CSS columns have no effect on a flex container. flex-direction This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional
2分間コーディングのすすめ、コードを書く習慣のハードルを下げる
最近私は「2分間コーディング」と呼んでいる取り組みを行っています。文字通り2分間で完了する程度の、非常に簡単なコーディング作業を繰り返すことで、 技術書の最初のページの数行のコードだけ写経して走らせる ネットで見つけたサンプルコードをコピペして走らせる など、多くはコピペするだけで終了するくらいの作業量です。しかし、その頻度を今までの何倍にも増やすのがポイントです。実際にはやっているうちに気分が乗って、そのまま5分、15分以上とコーディングが続くことも多いのですが「まずは2分で終わることだけを始める！」と強く意識することで、コーディングの頻度が大きく増えました。 この記事では、私にとって2分間コーディングがどういう効果があったか、なぜ取り組みを始めたかを紹介します。 効果: 新しい技術を覚えやすくなった 2分間コーディングを始めてから、今まで公式ドキュメントや本を読んだだけで終わってしまい
[PHP] 静的解析ツールPHPStanの機能概要 - Qiita
はじめに PHPのコードを書いているとコンパイルを必要とする言語のように検知できるエラーは動かす前に検知したいと思うことがあると思います。 PHPStanというツールを使えばコンパイラのようなエラーチェックができます。 本記事はPHPStanのversion0.9.2を対象にしています。 PHPStanとはどのようなツールなのか？ PHPStanは、PHPの静的解析ツールです。 PHPStan - PHP Static Analysis Tool コードを実行せずに 構文エラーはないか？ 関数に渡すパラメータの数が適切か？ 未定義のものにアクセスしようとしていないか？ 関数に渡す値が関数のパラメータの型宣言と一致するか？ PHPDocの内容と関数の戻り値は同じか？ などのエラーを見つけてくれます。もちろん他に沢山のチェック項目があります。詳しくは後述の"PHPStanはどういう観点でコード
![[PHP] 静的解析ツールPHPStanの機能概要 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fbfc00d182a8094b8d121a123df7fd1b98f2396/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-1.2.2%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D380%2526txt%253D%25255BPHP%25255D%252520%2525E9%25259D%252599%2525E7%25259A%252584%2525E8%2525A7%2525A3%2525E6%25259E%252590%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525ABPHPStan%2525E3%252581%2525AE%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E6%2525A6%252582%2525E8%2525A6%252581%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253Daeca6040078d165bf9d26a1235917265%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D500%2526txt%253D%252540mizutsu%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253Dc258d87b3d27319517bf285b65409bbb%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3D7466808958e9515aa921998e7c6692de)
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku
もう年末ですね。 去年の今頃は風邪で鼻水だらだらの記憶がありますが、皆さんは如何お過ごしですか？ どうも、しばおです。 さて、いきなりですが、皆さん ハンバーガーボタン ってどうやって作ってます？ ハンバーガーボタン の作り方をググったりすると、空っぽの span タグ 3個で作ってたり、div タグ や チェックボックスで作ってたりするのをよく見かけます。 でもね。僕的には、button 要素がベストだと思っているんです。 そこで今回は、なぜハンバーガーボタンを button 要素で作った方がいいのかや、僕なりの作り方をできる限り詳しく解説をしてみたいと思います。 ちなみにこの記事は、ある程度、HTMLやCSS、JavaScriptを使った基本的なコーディングを理解している人向けになりますので、CSSって何？って方は先に、基本的なコーディングを学習しておいて下さい。 ハンバーガーボタン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーディングだけをすればいいと考えているプログラマーが多いです。プログラマーであること以前に、一社員としての自覚をもってほしいのですが、どうアプローチすべきだと思いますか？
DirtyMarkup Formatter - CSS Beautifier for Stylesheets