CSSだけで画像トリミングできたよ ｜ Tips Note by TAM
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ
checkboxを使ってCSSだけでハンバーガーメニュー | q-Az
CSS だけでハンバーガーメニューを設置する という記事を以前書いたのですが、iPhone など CSS のセレクタで hover が効かないデバイスではメニューが開きませんでした。今回の記事はそれを解消すべく input 要素の checkbox を使う事で、hover ではなく click に反応するようにして iPhone でも CSS だけでメニューが開くようにしてみます。 当然、iPhone 以外の PC ブラウザ、アンドロイドでも問題なく開閉します。 checkbox って？checkbox とは input 要素で選ぶことが出来る種類の1つで、下のデモのようにクリックすることで 〆 マークがついたり消えたりする要素です。アンケートやフォームなどでよく使われれています。 input 要素に共通して言えることですが、label 要素というのを個々に設定することが出来ます。labe
WordpressをDreamweaver化!?できるプラグインがやばい - TetraThemesブログ
WordPressの管理画面をDreamweaverのようなエディター化できる「SiteOriginCSS」がすごいので使ってみました。 WordpressでブログやWeb制作をしていますが、ゼロから作るにしても、既存のテンプレートを使うにしても、スタイルの変更はコードエディターで行うことになります。 SiteOriginCSSを使うと管理画面でスタイルの変更が可能になるので、テンプレートでサイトを構築した後はコードエディター開かずに管理画面上でWeb制作が完結してしまいます。 ということで早速使ってみました。 WordPressをエディター化できる SiteOrigin CSS SiteOriginCSSは無料でダウンロードできるという太っ腹ツール。 このプラグインがすごいのはテンプレート側で特にコードの追加や設定などしなくても簡単に使えるという点です。普通にプラグインとしてインストール
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
jqueryを使わないcssだけで実装するアコーディオンメニュー – VEGLコンテンツ
※高さを内容に合わせたいと言うコメント頂いた為、ちょっぴり編集しました。 アコーディオンメニューとは、クリック（タップ）すると隠れていたメニューが出てくるヤーツです。 スマフォ用のナビゲーションとかにも使われていたりしますね。 今まではこういうメニューはjqueryを使うのがわりと一般的でした。 が、htmlとcssだけでも実装できるのよ、という時代になって来たのでご紹介。 ちなみにクソブラウザ（ワタクシのスマフォ標準ブラウザ）でも動きます。 ひとまずコピペでオッケーです。 チェックボックスを使用したアコーディオンメニュー html <div class="ac_menu"> <label for="nav01">メニュー１</label> <input type="checkbox" id="nav01" class="bellows" /> <ul> <li><a href="">ナビ
Webサイトがスターウォーズの世界になるCSSライブラリ「starwarsintro.css」を使ってみた！ : うえぶはっく
CSSライブラリを読み込んで「専用のクラス」をHTMLに記述するだけで、あっという間にスターウォーズの「イントロ風サイト」が完成する【starwarsintro.css】が公開されているのでご紹介！ 映画のように下から上に流れていくテキストを、プログラミング不要で実現できるのが魅力で、表示させたい箇所のHTMLにクラスを付与するだけというお手軽さです！ 使い方！ まずは公式ページにアクセスして、CSSライブラリをダウンロードしましょう。 もしくは、公式ページで使われているURLからも利用可能です。 http://polarnotion.github.io/starwarsintro/starwarsintro.css そして、新規に「index.html」を作成しましょう！ <!-- index.html --> <!doctype html> <html> <head> <meta ch
【やれんのか】target=”_blank” がついたリンクにのみに適用させる CSS は書くことが出来るのか？ – 和洋風KAI
結論から言えばできます。 以前紹介した、このCSSを応用すれば出来てしまいます。 → すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。 このように書いてみましょう。↓↓ a[target*="_blank"]{ font-weight: bold; } ちなみに、imgタグについたリンクには適用させたくない場合は、こう書きます。 a[target*="_blank"]:not(img){ font-weight: bold; } これを応用すると、rel=nofollowの付いたリンクだけにも適用させることも可能です。 a[rel*="nofollow"]{ font-weight: bold; } 便利ですね。
SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
CSSでInstagramで使われているフィルタ効果を実現する「CSSgram」
どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する「CSSgram」です。 CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。 詳しくは以下 実装方法は非常に簡単で、CSSgramのライブラリをダウンロード後、読み込ませ、Class名にフィルタ名を反映するだけで実現可能です。また、Sassでも実装可能になっています。フィルタの名前も、Instagramのフィルタ名称に揃えているようで、いつも利用している方は、名称だけでピンとくるのではないでしょうか？ 一点注意が必要なのは、対応ブラウザ、CSSFiltersとCSS Blend Modesを利用しており、
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
【第2弾】少しのコードで実装可能な20のCSS小技集
【第2弾】少しのコードで実装可能な20のCSS小技集はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 少しのコードで実装可能な 20 の CSS 小技集 目次画像を丸く表示1 本線のテーブル1 本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズWeb フォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックスiOS でボタンのスタイルをリセット線のオフセット設定HTML・CSS の全
MdN Design｜総合情報サイト
第16回（最終回） 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。本連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 （公開日：2010年4月16日 解説：こもりまさあき） 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2（CSS 2）をサポートしているものがほとんどです（特定のプロパティだけ未サポートも含め）。その一方、現在CSSの次のバージョンにあたるCSSレベル3（CSS
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像のホバーエフェクトが多数収録された「Imagehover.css」:phpspot開発日誌
ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
dt, dd横並びで、通しでborderを入れる - 主に技術的なことを書くブログ
「Back to Basics CSS」を主催として振り返る（スライド一覧＆写真つき） #btbcss
