Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

タグ

2017年3月13日のブックマーク (2件)

  • JavaScript開発はこれ1つでOK!超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開! - paiza開発日誌

     どうも、まさとらん(@0310lan)です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です! バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML /CSS /JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基的な使い方! それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう! まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード

    JavaScript開発はこれ1つでOK!超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開! - paiza開発日誌
    • 1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

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

      1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
      sumithsonian
      sumithsonian2017/03/13非公開
      さらにレスポンシブでも縦横比を維持するCSSを編み出しているのだが、いつか公開してみたい。(編み出したといっても既出CSSの組み合わせやけど)

        お知らせ

        公式Twitter

        • @HatenaBookmark

          リリース、障害情報などのサービスのお知らせ

        • @hatebu

          最新の人気エントリーの配信

        処理を実行中です

        キーボードショートカット一覧

        j次のブックマーク

        k前のブックマーク

        lあとで読む

        eコメント一覧を開く

        oページを開く

        はてなブックマーク

        公式Twitter

        はてなのサービス

        • App Storeからダウンロード
        • Google Playで手に入れよう
        Copyright © 2005-2025Hatena. All Rights Reserved.
        設定を変更しましたx

        [8]ページ先頭

        ©2009-2025 Movatter.jp