あとで読みたい人は… こんにちは、@cappeeです。 本格的にSass(SCSS)を仕事で使うようになってから早半年。 色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。 これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。 泣くほどコーディングが早くなりますよ。 目次1. フォントサイズ2. テキストシャドウ2.1. 文字に1pxの黒いシャドウ2.2. 文字に1pxの白いシャドウ3. ポジション4. グラデーション4.1. 上下に明→暗4.2. 上下に暗→明4.3. IE8~9に対応する4.4. IE9に対応する5. 背景画像5.1. CSS Spriteの設定5.1.1. 文字の背景に入れる画像と文字を置換する画像5.1.2. アイコンな
2016/03/08 (Tue) CSSだけで画像をトリミングする3つの方法 CMS関連の案件だと縦横比が異なる画像を扱うこと多いと思います。 例えば表示画面などを正方形で表示したい場合、アップされる画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。またアップしたタイミングで画像を加工できるならいいですが、そうでない場合が多く、見た目を揃えるためにCSSで同じサイズにトリミングしちゃいましょう。 CSSだけで3つのやり方があるので時々で使い分けて実装テストしてみてください。 CSSだけで画像をトリミングする方法 overflow: hidden を使う 一番簡単な方法がoverflow: hidden を使ってトリミングする方法です。 text というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、C
2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox(フレックスボックス)。みなさん、使いこなせていますか?今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します! ↑私が10年以上利用している会計ソフト! 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>
日本語 Bahasa Indonesia Dansk deutsch (Deutschland) deutsch (Schweiz) deutsch (Österreich) Eesti keel English Español Español (Latinoamérica) français (Belgique) français (France) français (Suisse) hrvatski italiano (Italia) italiano (Svizzera) latviešu Lietuvių Magyar Malaysia nederlands (België) nederlands (Holland) Norsk polski Português Português (Portugal) Română Slovenčina slovenščina Suomi Sve
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです! ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く