テキストのカラーをcssで半分ずつ表示してみた – Creator Note
こんにちは、今日は前から試してみたかった、cssで文字のカラーを上下、または左右半分個ずつにする方法に挑戦してみたいと思います。 まずは、実装したものから、 See the Pen テキストのカラーを半分ずつ表示する by sayuri (@giraffeweb) on CodePen.0 HTMLはいたって普通。 半分にしたいテキストが入っているdivもしくはpタグにクラスを設定してください。 //左右にわかれる場合 <div class="right_left"> <p>RIGH&TLEFT</p> </div> //上下に分かれる場合 <div class="top_down"> <p>TOP&DOWN</p> </div> ●左右に分かれる場合 テキストが入っているdivもしくは、bodyなどに背景色を設定します。 左右に半分ずつなので、以下のようにcssに指定。 .right_l
ページ遷移アニメーションに、高速な読み込み！？名前ほど難しくないPjaxを実装しよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、ライダーです。今年4月、新卒フロントエンドエンジニアとして入社しました。 バイクに乗っていたことを理由に、大学入学時からライダーと呼ばれているのですが、最近バイクを売り払い自転車にジョブチェンジしました。 今後もライダーとしてやっていきます。どうぞよろしくお願いします。 さて、最近はシームレスなページ遷移アニメーションを実装しているサイトがとても多く見られますね。中にはネイティブアプリかよ！ って思わせるくらいのシームレスさのものも。そんなシームレスなアニメーションを可能にするためのひとつの手段に、Pjaxというものがあります。 Pjaxとは まずは概要を把握しましょう！ 簡単にいうと、Pjaxとは、ページを遷移させる手法のひとつです。 通常のページ遷移とは違い、AjaxとHistoryAPIの合わせ技による見せかけのページ遷移です。 実例 百聞は一見に如かず。まずは実例をみ
【個人メモ】Bracketsにいれる拡張機能・テーマ・参考リソースなど - Qiita
これまでDreamweaverをメインに使ってきましたが、コードビューがBracketsになったので、慣れるためにも本家のBracketsを真面目に使ってみようと思い、触り始めました。 拡張機能、テーマ、環境設定などの個人メモ。※適宜更新していく予定。 アプリ本体 本家サイト http://brackets.io/ おすすめ拡張機能を語るサイトでは、とりあえずExtensions Ratingをおすすめされるが、1.9でExtension Managerに標準でダウンロード数または最終更新日でソートが出来るようになったので導入は見送り（Extensions Ratingでは他にも追加される項目があるので必要な方は入れてもいいかも）。 Beautify JavaScript、HTML、CSSを見やすいよう整形。対象範囲を選択し、ショートカット（Mac:Cmd+Shift+L, Win:Ctr
コピペを通してマークアップに感動した話 | mkasumi.com
この記事では、私がコピペを通してマークアップに感動した話でもしようと思います。 正直この記事の内容はすごく地味ですし、普段みなさん当たり前の感覚で体験してると思います。それでも、このことがきっかけで私はマークアップを心がけようと思えたので、ちょっとブログにまとめておこうと思いました。 目次 代替テキストはコピペできる table要素は構造を保ったままスプレッドシートにコピペできる ページを用途を考えて、ちょっとマークアップを工夫する まとめ 何気なく、サンプルデータとしてFind Job！の求人情報をコピペしたときに代替テキストもコピーされることに初めて気づきました。この事実を知ってからは、img要素は視覚的には画像だけれど、データとしてはテキストとして扱うようにしています。img要素をp要素でマークアップする人がいて、「なぜ？」と思っていた時期があったのですが、この経験からimg要素に対
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
【スマホサイト】display:table-cellにmarginを指定したい ｜ Tips Note by TAM
スマホサイト制作でこのようなデザインを実装する場合、 テキスト位置の調整を考えると、displayプロパティが便利です。 セル間隔をmarginで調節したいところですが、table-cell に margin は無効です。 そこで、border-collapse で dasplay: table のセル間隔を調整したいと思います。 border-collapse でセルのボーダーを重ねるか間隔を空けるかを、 border-spacing でどれぐらい空けるのか指定できます。単位はpxやem、exなどです。 このプロパティは display: table を指定したクラスに追加します。 ■html <section class="pagelist"> <ul class="tab-area"> <li class="tab-link now radius-large-top"><a href
position:absolute で中央に配置するやり方 - YouKnow.jp
中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。 これで、画面中央に表示されているはずです。 画面中央ではなく、親要素の中央に要素を表示させたい場合には、要素の親要素に、position:static(初期値)以外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。 その親要素を基準にヨコ・タテ中央配置になります。 サンプルではtop.left.right.bottomに0を指定していますが、これらの数値をいじっても問題はありません。 ただし、top.left.right.bottomの初期値はautoになっているため、これを解除するために指定しています。 そのため、topだけに80pxを指定するとタテ・ヨコ画面中央からタテのみ80px下に行く指定することも可能です。 mar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
compassを読み込もうとコンパイルしたらエラーが出る
test