タグ

tipsとCSSに関するsonkのブックマーク (8)

  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
  • CSS3アニメーションの基本

    CSS3アニメーションの基:脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(1)(1/3 ページ) エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ!」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。

    CSS3アニメーションの基本
  • スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ

    スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • quusookagaku.com - quusookagaku リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    quusookagaku.com - quusookagaku リソースおよび情報
  • TEXTdrop|翻訳・オンラインカジノ 日本円のプログラミング

    Text Drop 翻訳、プログラミング、写真、カメラなどについて書いてます。スタイルガイド/コーディング規約やチートシートなど、ちょっと便利なものを翻訳しています。 TEXTdropでは、C++プログラマーも利用できるパワフルな機能を搭載。C++のコードを書く際に行う手順や避けておきたい工程などを詳しく説明しています。コードスタイルラインの日語版では、日語訳やJ P Yへの換金もサポート。話題性があるオンラインカジノ 日円変換や入金の際のバグにも対応しています。統一性のあるコードを書くためのポイントや規約の種類を参考にする事ができます。

  • 知ってるとちょっと役に立つCSSのTipsまとめ

    ちょっとのつもりでCSSサンプルコードチマチマ書いて記事化してたら10件以上たまってました。 基的に私はWeb屋さんではないので結構いい加減なコーディングしてたりもしますが、WEBサイト制作ではよく使いそうなプロパティについて使い方を説明してますのでなにかと参考にしていただければ。 こういった記事は基的に「知らない人向け」に書いて(だからこそ役に立つ)ますので、不必要な部分はあえて端折ったりしている一方で必要なところはやや冗長と思われても出来るだけ詳しく書いてるつもりです。あくまで初学者向け。 というわけで当ブログCSSネタまとめ2013年2月版ということで。 1.長文テキストを段組 CSSで文書の段組表現を行うcolumnプロパティの使い方 一連の長~い文章を1つのボックス内で段組するにはどうすればよいでしょうか?というお話。columnは地味というかあんまり知られてないプロパティっ

    知ってるとちょっと役に立つCSSのTipsまとめ
  • CSSの知識をもっと深める30+2の小技テクニック集|Webpark

    的なことやちょっと変わった意外な使い方などCSSに関する小技テクニックをたくさん紹介していきます。知っていることも多いかと思いますが、新しい発見もあるかもしれませんので復習を兼ねてぜひご覧ください。

    CSSの知識をもっと深める30+2の小技テクニック集|Webpark
  • ブログが作りたい!+FC2ブログの作り方+

    「ピラティス」で心と身体を整えよう! 突然ですが問題です。次の3人に共通することと言えば、何でしょう? お分かりになるでしょうか? 渡辺満里奈さん(1970年11月生、タレント) 米倉涼子さん(1975年8月生、女優) クルム伊達公子さん(1970年9月生、テニスプレーヤー) 3人とも美しい? 芯が強そう? おしゃれ? たしかにそれもあるかもしれませんね。じつは、ご存知のかたもいらっしゃることと思いますが、この御三方は「ピラティス」と深い関わりをもった方々なのです。 ※:私の記憶違いでなければ、米倉さんと伊達さんはピラティスのインストラクターの資格を持っていらっしゃるはずです。 さて、そこで今回は、「なぜこの3人はいつまでもしなやかで美しく、均整のとれたスタイルを保っていられるのか?」と疑問をもっていらっしゃる方々のために、ピラティスをご紹介させていただきます。 そろそろ健康に不安を感じは

  • 1