文章を省略表示する８つのCSSスタイル(webkit） « 大阪のアンドロイド/iOS･ Webアプリ開発会社 ノーティス
モバイルサイトは画面の大きさも限られており、できるだけ多くの情報を表示するために、文章を一部だけ表示して、一覧表示したいことがあるでしょう。 文章の量によりレイアウトが乱れてしまうことを避けたい場合にも有効です。 文章を省略することや、省略されている文章があることを示す記号をエリプシス（ellipsis）といい、三点リーダーで表します。 Javascriptを利用する方法や、CSSのafter疑似要素を利用する方法などもありますが、CSS3だけで出来る方法を段階的にご紹介します。 なお、サンプルはiOS Safari(webkit)でしか動作確認していませんので、ご了承ください。 サンプルリストアイテム 以下のようなサムネイル画像とタイトル、説明文があるシンプルなリストアイテムを定義します。 このままだと、左のサムネイルの高さをはみだして説明文があふれています。 スタイルシート /* *
見やすいコードでストレスなくコーディング。きれいなコードの書き方 | SOKUTAKU
コードを書くとき、あなたはどんなところに気を付けていますか？ インデントをしっかり行うこと、コメントを記入することなど、さまざまな注意点が考えられますね。 しかし中には、特に何も考えずにコードを書いている、という方もいらっしゃるかもしれません。そんな方のためにも今回は「きれいなコードの書き方」をご紹介します！ はじめに きれいなコードを書きたいという方は、下記の2つに気を付けてみましょう。 a. 統一性 b. 無駄なくシンプルに 統一性 統一性のあるコードを書くには、まず、コードフォーマットのガイドラインを作成することです。ガイドラインでは、以下の4点を決めておきます。 1. 改行の入れ方 2. インデントの入れ方 3. コメントの入れ方 4. スタイルプロパティの順番 この4点をガイドライン化しておくことで、統一性のある、きれいで見やすいコードになります。 まず、実際にガイドラインを反映
キーワードは汎用性！美しく、かつ効率的に作業がサクサク進むCSS記述テクニック5選！#css｜CodeIQ MAGAZINE
コードは美しくあるべき。技術者なら誰もが有する美学ではないでしょうか。 美しいコードは見やすく、機能性にも優れているもの。そして高い機能性を実現するためのキーワードはズバリ、汎用性です！今回の記事では汎用性にスポットを当て、美しくかつ効率的に作業がサクサク進むCSS作成テクニック5選をご紹介いたします。 by hibikiYzk 見えない部分まで美しく CSSは普段それほど人の目に触れないだけに、動けばいいやと細かいことはあまり気にせず記述することも多いものです。しかしCSSも立派なコード。コードは美しくあるべきの美学を突き詰めたいのが技術者というものでしょう。 さて、それでは美しいCSSとは一体どんなものなのでしょうか？インデントや改行を整えることが真っ先に思い当たるかもしれません。確かに見た目が美しいCSSは可読性も高く、素晴らしいものでしょう。しかし美しいCSSが美しい理由はそれだけ
Bootstrap 3 徹底解説！
いよいよ公開されたBootstrap3。このサイトでは、Bootstrap3を徹底的に解説していきます。ついに登場した「Bootstrap 3」。このサイトでは、Bootstrap3を徹底的に解説していこうと思います。 Bootstrap 公式サイト(英語) Ver. 3.0.3 が最新版のようです(2014/01/02 現在) お問い合わせはコチラ Menu はじめに Bootstrap とは？ Bootstrap3 導入の仕方 基本のHTMLコード CSS グリッドシステム タイポグラフィ(見出し、段落、文字サイズなど) コードの表示 テーブル(表) フォーム ボタン ヘルパークラス レスポンシブWebデザインで使えるコード Components アイコン ドロップダウン Coming Soon ... About どうもこんにちは、SofPyon(そふぴょん)です。最近、Bootst
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
『スマートフォンUIのアニメーションについて』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 2012年6月にサービスを開始したスマートフォン向けソーシャルゲーム ULTIMATE RACERアルティメットレーサー）でデベロッパーをしている横田と申します。ULTIMATE RACERの開発時に、画面内のアニメーションをjQueryのanimate処理からcssアニメーションに切り替えた経緯について、自分なりの考察ともにご紹介したいと思います 対象としてはデザイナー、マークアップエンジニアでJSやcssでアニメーションの実装を始めたばかりの方が最適だと思います。 また本稿はjQueryのバージョン1.7.1を使用した場合を想定して記述しています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture
Codeply
フォームの活用・装飾 (HTML,CSS,JavaScript) [ホームページ作成] All About
Components · Twitter Bootstrap