CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
ギズモードのデザイナーが語る！ エイプリルフールの裏側
先日のエイプリルフールは楽しみましたか？ 毎年ネット上でたくさんのサイトでがウソをついたり、悪ノリしたりするので、毎年楽しみにしてる方も多いのでないでしょうか。今年のギズモードはトップページが左右反転文字になって、読みにくい、やりすぎ！ と大好評（？）でした。 また各記事ページには、あのアザラシ君に常駐していただき、ビックリした、かわいい、こわいｗなどこちらも大盛況でした。 さて、そんなギズモードへの反応を楽しみながら見させてもらってたんですが、｢左右反転の仕組みどうなってるの？｣という声を多くいただいたので、今回ちょっとだけご紹介したいと思います。 実は、サイトのデザインを構成するCSSファイルの調整だけで左右反転が可能なんです。 内容は下記のとおり。 body{ -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform:
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
cssのちょっと小粋なテクニック13個 - かちびと.net
小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、ｃｓｓとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。 ざっとしか見ていませんが、多分jsは使ってないと思います。 Film strip gallery with information text ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。 Film strip gallery with information text Super animation – just for the fu
知っておきたい使えるCSSテクニック25 – creamu
Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ
ソースが公開されているcss小技11エントリーまとめ
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
