タグ

2017年12月27日のブックマーク (31件)

  • MySQL初級者を脱するために勉強してること -INDEX編- - Qiita

    欲しいデータを取得するくらいにはSQL書けるし、システム要件を満たすくらいにはテーブル設計は出来る、そんな僕が中級者を脱するために勉強している内容を備忘録的に書き綴ります。 予約語は大文字 その他は小文字で記述しています。 あー、インデックスね、はいはい。作ると参照が速くなるやつでしょ? そのくらいの知識でしたが、INDEXを適切に運用する上で原理など理解していないと、意味の無いINDEXを作ってしまう事があるので勉強しました。 INDEXとは 今回は多くのRDBMSでサポートされているB-TreeINDEXについて解説します。 B-Treeは以下のような形式でデータを保持しています。 ヘッダブロックでは大まかな値の範囲を保持しており、ブランチブロックではさらに細かい範囲を保持 リーフブロックでは実際の値と行への物理的な位置を保持しています。 INDEXが作成されている事で並び替えが速くな

    MySQL初級者を脱するために勉強してること -INDEX編- - Qiita
  • Poedit Translation Editor — Poedit

    Poedit Easy translation of apps & sites with PO, XLIFF, JSON or Flutter formats Full gettext support. And then some. Poedit was built to handle translation using gettext (PO), which is used by many PHP projects (Drupal, WordPress), Python projects (Django), or virtually anything running on Linux. Lost in translation? Not with Poedit. With comprehensive safety checks, a minimal and intuitive interf

    Poedit Translation Editor — Poedit
  • Scaffold�とBakeのメリット・デメリット - Qiita

    ScaffoldとBakeはどちらも開発をサポートする機能です。 どちらも「ひとつの画面を用意するのに、モデル作って、ビュー作って、コントローラ作って...と、似たようなコードを何度も書きたくない」というプログラマの希望を叶えてくれるありがたい機能です。ただ、個人的には昔「何が違うのか?」と悩みました。 似て非なるこの2つの機能について、メリット・デメリットを理解して使いどころを分けましょう。 Scaffoldについて 簡単なコントローラをひとつ用意するだけで、テーブルの一覧・追加・削除・編集画面などを簡単に実装することができるといった機能です。 具体的には以下のようにコントローラを用意すると、shopsテーブルの一覧・追加・編集・削除ができる管理画面を実装されます。

    Scaffold�とBakeのメリット・デメリット - Qiita
  • selectボックスを実装

    今まで、selectボックスのgroupを作成するのにSet::Combineを使用していましたが、意外と簡単にできることに気付いてしまったので、ご紹介。(自分だけ知らなかったことに気付いた と言ったほうが近い。) デモ(データ配列なども) モデルは、散々出尽くしているかもしれませんが、以下 CREATE TABLE IF NOT EXISTS `prefectures` ( `id` INT NOT NULL AUTO_INCREMENT, -- id `prefecture` VARCHAR(8) NOT NULL, -- 都道府県 `area` VARCHAR(8) NOT NULL, -- 地方 PRIMARY KEY (`id`) ) 単一選択のselectボックス 一般的なセレクトボックス。中から1つを選ぶものです。 find('list')でfieldsに対して2項目設定しま

    selectボックスを実装
  • 「scaffold? 何それ?」って言ったら笑われた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    先日、他のプログラマの方たちとCakePHPについて語り合っているときに、scaffoldって単語が飛び交いました。僕以外の二人は当然のようにそれを分かっていましたが、僕だけ何のことか分からなかったので、「それ何ですか?」って聞いたら「知らないのかYO!!」って言われてしまいました。 何かよく分かんないけど、CakePHPとかを使っていればわりと初期の段階で知ることなんだそうです。 主人がオオアリクイに殺されてからもう一年くらい経つのに……間違えた、僕がプログラマになってからもう一年くらい経つのに……普通に知りませんでした。Scatmanなら知ってるけど……。 CakePHPにおけるscaffoldとは何ぞやというと、コントローラーとモデルさえ作っとけば勝手にデータの生成や編集、削除のフォームを良い感じに作ってくれるということらしいです。 //コントローラー class UsersCont

    「scaffold? 何それ?」って言ったら笑われた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    kathew
    kathew 2017/12/27
    scaffoldもbakeもCakePHPのかなり根幹になる機能なので、よりよく活用して開発工数を大幅に削減したい
  • 築地銀だこの悲劇、1500円相当のたこ焼き株主優待が1万3500円の高級たこ焼きに豹変 : 市況かぶ全力2階建

    業務停止命令のみんなで大家さん、速攻で執行停止決定を勝ち取り転倒しかけた自転車をしぶとく漕ぎ続けることに成功

    築地銀だこの悲劇、1500円相当のたこ焼き株主優待が1万3500円の高級たこ焼きに豹変 : 市況かぶ全力2階建
  • 100均で買って良かったベスト10 : Rinのシンプルライフ〈50代からの心地よい暮らし・小さな平屋に引っ越しました〉

    Rinのシンプルライフ〈50代からの心地よい暮らし・小さな平屋に引っ越しました〉 シンプルライフブロガー。お片付け・断捨離・インテリア等を中心に日々の生活を綴っています。桧家住宅で建てた小さな平屋に夫と2人で住んでいます。 #断捨離#整理収納#シンプルライフ#ミニマリスト#インテリア#片付け#北欧#IKEA#無印良品

    100均で買って良かったベスト10 : Rinのシンプルライフ〈50代からの心地よい暮らし・小さな平屋に引っ越しました〉
  • プリキュア15周年!最新作「HUGっと!プリキュア」は“子供を守るお母さん”

    「HUGっと!プリキュア」の主人公・野乃はなは、新学期に転校してきた中学2年生の女の子。将来はイケてる大人のお姉さんになることを目指しており、何にでも興味を持ちチャレンジするもドジをして失敗することも多い。そんなはなの元に、不思議な赤ちゃん・はぐたんと、そのお世話係のハムスター・ハリーが空から降ってきた。はぐたんの持つ「ミライクリスタル」を狙う悪の組織・クライアス社が放つ怪物に襲われたはなは「はぐたんを守りたい」という強い気持ちにより、元気のプリキュア・キュアエールに変身する。 そのほか、はなのクラスの学級委員長・薬師寺さあやは、知恵のプリキュア・キュアアンジュとして、はなのクラスメイトで、大人っぽいクールな女の子・輝木ほまれは、力のプリキュア・キュアエトワールとして、はなとともに大切なものを守るために戦い、成長していく。 なお「1話をみてDVDゲットキャンペーン ~HUGっと!プリキュア

    プリキュア15周年!最新作「HUGっと!プリキュア」は“子供を守るお母さん”
    kathew
    kathew 2017/12/27
  • 「基本的に運転士が悪い」JR西元相談役の主なやりとり:朝日新聞デジタル

    主なやりとりは次の通り。 ――業務上過失致死傷罪に問われた裁判で無罪が確定した。改めて事故のことをどう考えているか。 経営者の一員として道義的責任を感じる。裁判後のほうがより責任の重さを感じているし、亡くなった方や遺族の方に申し訳ない気持ちが深くなった。 ――なぜ、追悼慰霊式に出席せず、遺族の前に現れなかったのか。 事故直後の国会で当時の社長が「企業風土に問題があった」というようなことを言い、我慢できなかった。幹部から遺族の前で謝罪してほしいと言われた。「その時に『事故の遠因に企業風土は絶対になかった』と言う」と伝えたら、引き下がった。それが「何で出てこないんだ」となった。 ――企業風土を否定するのはおかしいということか。 自分としては、国鉄時代の「親方日の丸」的な発想から、民営会社にふさわしくすることに尽力した。それができたと思ったのは、阪神・淡路大震災の時。社員は自分の家も壊れ、家族に

    「基本的に運転士が悪い」JR西元相談役の主なやりとり:朝日新聞デジタル
  • MySQL、CakePHP 2.3で「tinyint(1)」の Boolean型の動作を再確認

    MySQL、CakePHPで「tinyint(1)」のフィールドは Boolean型として認識 MySQLでの「tinyint(1)」のフィールドは Boolean型と認識するが... MySQLの「tinyint(1)」の悲劇 Boolean型になるとは... この記事に「結論が間違っています」コメントをいただきました。 そのために検証を行った結果、「tinyint(1)」のフィールドが「Boolean型」として処理されるのは MySQLの機能ではなく、CakePHPの機能によって起こっていることを確認しました。 ※厳密な表現では、MySQLでは「tinyint(1)」で設定されたフィールドは Boolean型として処理する仕様となっているため、その定義に従って、CakePHPでは「0」「1」しか持てないように処理している、ということになるでしょう。 MySQLの定義については以下参照

    MySQL、CakePHP 2.3で「tinyint(1)」の Boolean型の動作を再確認
    kathew
    kathew 2017/12/27
    前の記事でモヤッとしていたものがすっきりした。数値型の桁数指定のMySQL的な意味については言及されていなかったので、誤解の原因はそこな感じ
  • MySQLの「tinyint(1)」の悲劇 Boolean型になるとは...

    MySQLで「tinyint(1)」を設定すると 「tinyint(1)」は「0」と「1」に変わる CakePHPのプログラムを作っていて、登録された値が想定していた値にならず困っていました。 まだまだ CakePHPの初心者の私はプログラムの記述が間違ってるのだとさんざん悩んでいました。 登録する項目は下記の「authority」の項目に「1:システム管理者」「2:マネージャー」「3:オペレーター」「4:一般ユーザ」といった 4種類の権限を保存するというものでした。 ———————— CREATE TABLE IF NOT EXISTS users ( : : authority tinyint(1) NOT NULL DEFAULT ‘1’, : : ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ; ———————— 何度も

    MySQLの「tinyint(1)」の悲劇 Boolean型になるとは...
    kathew
    kathew 2017/12/27
    “「tinyint(1)」の「(1)」は、「1桁」という意味ではなく、「1bit」という意味になります。”そうなの!? INTの括弧数字はゼロ埋めした時の桁数指定なので、意味がバラバラで分かりにくいね…
  • CakePHP input typeの自動設定 - Qiita

    _magicOptions CakePHP 2.4.5だと /Cake/View/Helper/FormHelper.php L1137 このfunctionを見ればどこまで動的にinputタグを生成してくれているかがわかる。 使っていて一番便利だと思ったのは、テーブルのカラム名のsuffixを_idとすること。 こうすることでViewを表示するとselect boxができあがっている。 よって、DBもCakePHPを使うとなれば命名規約も先に整理するのがベスト。 よく使うメモ カラム名 型 type

    CakePHP input typeの自動設定 - Qiita
  • $form->inputで行われる自動判別のまとめ - Writing Some Code

    1.1系ではHtmlHelperにあったinputメソッドが、1.2系ではFormHelperに移っています。 使い方としては <?php echo $form->input('field_name', array('type' => 'textarea' /* テキストエリア指定 */)); ?> などといった感じで、オプション指定の配列にtypeを指定することで、テキストエリアやセレクトボックスなどの種類を指定できるのですが、単純に <?php echo $form->input('field_name'); ?> と、フィールド名の指定をしただけでも、自動的にテキストエリアになったり、セレクトボックスになったりすることがあります。 どんな自動判別をしているのか気になったので、調べて分かったことをまとめてみます。(バージョンはBeta 1.2.0.6311) type指定がない場合の決

    $form->inputで行われる自動判別のまとめ - Writing Some Code
    kathew
    kathew 2017/12/27
    CakePHP1の話だけど、2でも参考程度に
  • CakePHPのFormHelperのInput Type Dateで年月日のemptyを別々にする - Qiita

    まあ要はこうしたいということですね。 とは言え普通のセレクトボックスのようにemptyを指定しても、こんな感じにしか指定できません。 echo $this->Form->input('誕生日', array( 'type' => 'date', 'dateFormat' => 'YMD', 'monthNames' => false, 'empty' => '選択してください', )); echo $this->Form->input('誕生日', array( 'type' => 'date', 'dateFormat' => 'YMD', 'monthNames' => false, 'empty' => array('year' => '年', 'month' => '月', 'day' => '日'), ));

    CakePHPのFormHelperのInput Type Dateで年月日のemptyを別々にする - Qiita
  • HTTP/1.1とHTTP/2を比較する ― 第二回 ロリポップさんの検証サイト編 - Webパフォーマンスについて

    ロリポップさんで、HTTP/1.1とHTTP/2の比較サイトを立ち上げられていたので、計測して比較しました。 lolipop.jp 計測対象サイト http1-1-contents.com http2-contents.com 計測条件 日の帯域保証型(100Mbps)光回線を使用 NTT KDDI 計測ブラウザ … Chrome53 計測頻度 … 15分に1回 計測期間 … 4月12日~5月9日の29日間 計測ツール … Catchpoint Catchpointを知らない方のために説明しますと、CatchpointはWebサイトのパフォーマンスを24時間365日定常監視・計測するためのサービスを提供している企業です。 Googleの品質保証担当Vice PresidentだったMedhi Daoudiが2010年に立ち上げた企業で、現在、GoogleMicrosoftなどのテクノロ

    HTTP/1.1とHTTP/2を比較する ― 第二回 ロリポップさんの検証サイト編 - Webパフォーマンスについて
  • 「好きで長時間働くのがなぜ悪い!」という人に産業医から伝えたいこと | ハイクラス転職ならdoda X(デューダエックス)

    産業医科大学医学部医学科卒業。専門は産業医学実務。産業医実務研修センター、ジョンソン・エンド・ジョンソン統括産業医を経て、現在医療法人社団同友会 春日クリニック 産業保健部門 産業医 。現在日系大手企業、外資系企業、ベンチャー企業、独立行政法人など約30社の産業医業務に従事 「電波がバリ3」のハイパフォーマーは疲れなくても当然 ー長時間労働問題がしきりに取り沙汰されています。大室さんはどのように感じていらっしゃいますか。 バブルのころ、「24時間戦えますか」と栄養ドリンクのCMが一世を風靡しましたが、そんなキャッチコピーがコンプライアンスを通った時代だったということですよね。ほんの30年前でさえそうだったのですから、時代の移り変わりによって常識が変わっていくことが示唆されているということです。 今、私たちは当たり前のように満員電車に揺られ、終電間際に帰宅していますが、その常識は30年後の人

    「好きで長時間働くのがなぜ悪い!」という人に産業医から伝えたいこと | ハイクラス転職ならdoda X(デューダエックス)
  • 2017年の「はてなブックマーク年間ランキング」トップ100 わずか5日間でランクインした記事も - はてなニュース

    はてなブックマークのブックマーク数が多い順にエントリーを紹介する「はてなブックマーク年間ランキング」の2017年版を発表します。今年人気を集めたエントリーには、どういった傾向が見られたのでしょうか。上位トップ100エントリーをピックアップしました。(集計期間:2016年12月11日~2017年12月10日) 2017年 はてなブックマーク年間ランキング(2016年12月11日~2017年12月10日) 順位 タイトル 1位 誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック | TomoyukiArasuna.com 2位 まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 .. 3位 スゴの中の人が選んだ、1万円で“一生モノの教養”を身につけるための5冊 - マネ会 4位 東京大学より、英語学習・無料オンラインコース「English Aca

    2017年の「はてなブックマーク年間ランキング」トップ100 わずか5日間でランクインした記事も - はてなニュース
  • Webサイトの表示速度高速化の考え方| PerfData

    確実な高速化に必要な基原則を知る 2017年3月7日 著者: 竹洞 陽一郎 「Webパフォーマンス改善」「Webサイト表示速度高速化」と検索すれば、色々な記事が見つかります。 その中の幾つかを、実際に試された事がある方もいらっしゃるでしょう。 「やってみたけど、速くならない」 高速化できなかった場合、その原因を知りたいと思いませんか? 今回は、高速化を確実に成功させるための、高速化の考え方、勘所を解説します。 高速化とは計算量を減らす事 Webサイトの高速化手法は、色々なものが紹介されています。 その具体的な方法は、一旦脇に置いて、抽象化して考えてみましょう。 Webサイトの高速化とは、質的には、計算量を減らす事なのです。 私達がWebサイトをPCやスマートフォン、タブレットなどで閲覧するとき、それらの端末のCPUは計算をしています。 端末が動作するというのは、「何かを計算している」と

    Webサイトの表示速度高速化の考え方| PerfData
  • HTTP/2が速いという幻想 - Webパフォーマンスについて

    難しい話じゃないです。 皆さん、ご自分でChrome Developer Toolで簡単に確認できますから、やってみて下さい。 このブログでも、過去に統計分析をした結果は掲載したんですが、「盲信」はそうそう簡単には消えないようでして… takehora.hatenadiary.jp takehora.hatenadiary.jp 以下の図は、Chrome 63.0.3239.108での結果です。 CDNにFastlyでもAWS CloudFrontでも、どのCDNを使って実験して頂いても結構です。 CDNを使わずに、Webサーバ単体でも結構です。 同様の結果になります。 どちらもHTTPS通信です。 どちらも同じオリジン、同じファイル構成です。 HTTP/1.1は、Keep-Alive設定が入っています。 HTTP/1.1での配信 … Load Event 70ms HTTP/2での配信

    HTTP/2が速いという幻想 - Webパフォーマンスについて
  • ライバルは文房具。原研哉氏が率いるデザイン会社がシンプルすぎるエディタ「stone」をつくったワケ | CAREER HACK

    それはもう「テキストエディタ」と別物といっていい。価格は3000円。書き手の目線、余白、グリッド…細部にこだわり、無駄を排除。『stone』は書く心地よさのみを追求し、App Storeでも1位*を獲得した。つくったのは日デザインセンターの面々。あらゆるプロダクトに活きる、心地よさのデザインとは? (*)... 2017年12月2週目時点 心地よさにこだわり抜いたエディタ「stone」 日を代表するグラフィックデザイナー、原研哉さん率いる日デザインセンター(NDC)が、とてもユニークな自社プロダクトをリリースした。それが『stone』だ。 広義でいえばテキストエディタの類だが、あまりにもシンプルなつくり。アプリを起動し、映し出されるのは真っ白な画面。言われなければエディタだとわからないかもしれない。 「僕らが意識したのは、触感であったり、気持ちよさなんです」 今回お話を伺ったのは、企

    ライバルは文房具。原研哉氏が率いるデザイン会社がシンプルすぎるエディタ「stone」をつくったワケ | CAREER HACK
  • 【窓の杜大賞2017】【結果発表】今年はWindows 10の不満を解消してくれるソフトが大賞に

    【窓の杜大賞2017】【結果発表】今年はWindows 10の不満を解消してくれるソフトが大賞に
  • まとめよう、あつまろう - Togetter

    ブラックホールの撮影に関する記者会見で『この研究成果は一般社会に何か影響があるものですか?』の質問→返答がキレッキレ..

    まとめよう、あつまろう - Togetter
    kathew
    kathew 2017/12/27
    ああいうのって大抵利益還元のキャンペーン=宣伝のための支出なんじゃないの。商売っ気を出してる時点でダメ
  • 各社CDN料金まとめ(国内向け) - Qiita

    自分用のメモ。 料金を公開しているところのみです。AkamaiさんとかCDNetworksさんとかは、料金非公開というか、契約次第であってないようなものなので対象外です。定額制のところも対象外。あと、社内の稟議とか決済通せそうなところだけにしています。 ※全てGB単価です データ量 Amazon CloudFront 日 Azure Content Delivery Network Standard ゾーン2 NTT Com Cloudn CDN IIJ GIO コンテンツアクセラレーション KeyCDN Asia fastly Asia-Pacific IDC Frontier コンテンツキャッシュ

    各社CDN料金まとめ(国内向け) - Qiita
  • ちんぺい on Twitter: "@kathewka 通常は継承する必要はありません。 Config/email.php 中 EmailConfig の設定で 'transport' =&gt; 'Debug' に設定するとメールは送信されなくなります。内容を確認したい… https://t.co/SUNdFqJQCv"

  • ポモドーロタイマー付きのOSSな国産Todoアプリ・「Pentazemin」

    Pentazeminはポモドーロタイマー付きのTodoアプリです。日の方が開発されたアプリでオープンソースとして公開されています。今やるべきことへフォーカスし集中することを助けるためのタスク消化を支援するアプリ、との事で、備わっている機能もタスクに集中するためのものを基とした設計になっている印象です。相変わらずのTodoアプリ難民なので使ってみようかと思います。ライセンスはMITとの事。 Pentazemin

    ポモドーロタイマー付きのOSSな国産Todoアプリ・「Pentazemin」
  • Decorative WebGL Backgrounds | Codrops

    A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library. Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the Thre

    Decorative WebGL Backgrounds | Codrops
    kathew
    kathew 2017/12/27
    超クール。素敵や…
  • 日本らしさを表現!CSSで文字の縦書きに挑戦!

    2017年8月24日 CSSの書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基なので、縦書きを取り入れることで日らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました!今回はそんな縦書き表現に注目したいと思います! ↑私が10年以上利用している会計ソフト! 縦書きにするには 縦書きを設定するのはとっても簡単!縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左(Right to Left)という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl(上から下、右から左=

    日本らしさを表現!CSSで文字の縦書きに挑戦!
    kathew
    kathew 2017/12/27
    知ってても使う機会がないプロパティだったけど、こうして見るととても素敵。使いたい
  • レスポンシブ対応!縦に半分割しているWebサイトの作り方

    2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 縦に半分割しているWebサイトを作ってみよう! Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回

    レスポンシブ対応!縦に半分割しているWebサイトの作り方
  • 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

    2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…!今回はそんなborder-radiusの基的な使い方と、応用表現を紹介します! ↑私が10年以上利用している会計ソフト! 無難で王道!正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で

    今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!
    kathew
    kathew 2017/12/27
    アイデア。「ふにゃんと曲がった歪みライン」すげえええ
  • 1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

    2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です!今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト! 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

    1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
    kathew
    kathew 2017/12/27
    画像の縦横に関するあらゆるニーズに応えてくれる。IE用のポリフィルもある。完璧か
  • Webクリエイターボックスの2017年を振り返る

    2017年12月27日 Web関連記事, お知らせ 今年も残りあとわずか!一年間お世話になりました!Webクリエイターボックスも間もなく8周年です!毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね? :3 ↑私が10年以上利用している会計ソフト! 2017年ハイライト 今年あった出来事をまとめました。今年もイベントにちょこちょこ参加して、勉強会等で登壇しています。次はあなたの街に出現…するかも……よ? 6月30日 Webクリエイターボックス、常時SSLに対応 7月20日 Webデザインギャラリー開始 9月27日 INTERVIEW A GO GO #009に出演 10月14日 CSS Nite in HIR

    Webクリエイターボックスの2017年を振り返る