デザインを体感して学べるデザインブログです。Illustrator（イラレ）やPhotoshop（フォトショ）の使い方やWordPressやSWELLのCSSやJavaScriptカスタマイズやアフィリエイトまで読むだけで楽しめる情報を発信しています。
CSS-EBLOG - (X)HTML+CSS/JavaScript Tips site.
デザインを体感して学べるデザインブログです。Illustrator（イラレ）やPhotoshop（フォトショ）の使い方やWordPressやSWELLのCSSやJavaScriptカスタマイズやアフィリエイトまで読むだけで楽しめる情報を発信しています。
[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック
デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 実装のイメージ：天地均等にクリップ [ad#ad-2] HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src="path/to/your/image.jpg" alt="your image"> </div> CSS 上限の高さを450pxに設定します。 .image-wrap { max-height: 450px; overflow: hidden; max-width: 800px; -webkit-transition: max-width
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
ドコモ光GMOの評判の悪さとデメリットを完全解剖
スマホとのセット割などで人気のドコモ光は、プロバイダが選べるのが特徴です。 今回は数あるプロバイダの中でも特に人気のあるGMOについて、 GMOでドコモ光を登録した人の口コミと評判 GMOをプロバイダに選ぶメリットとデメリット 新規登録方法 などを詳しく解説していきたいと思います。 これからドコモ光を契約する人で、プロバイダ選びに悩んでいる人はぜひチェックしてみてくださいね。 ドコモ光GMOについては以下からどうぞ。 GMOドコモ光公式サイトはこちら【無料】 同じGMOでもwimaxであれば更に安く利用する事も可能です。 GMOとくとくBB公式サイトはこちら【無料】 光回線おすすめ安い比較ランキング。プロバイダ戸建てマンション ドコモ光のプロバイダGMOのガチ口コミと評判を大解析！ まずは、ドコモ光のプロバイダGMOを実際に利用した評判を見てみましょう。 「キャンペーンでお得に使えた！」A
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
cssの情報・まとめ - かちびと.net
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
Googleも採用！CSS3実践テクニック (1/4)
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
Webアクセシビリティを理解し実践するためのポータルサイト『infoaxia(インフォアクシア)』
Accessibility is the Web. 「エー イレブン ワイ」は、Webアクセシビリティの情報提供Webサイト。 ユーザーフレンドリーでみんなが利用できるWebコンテンツづくりをサポートします。
大藤 幹の『Web標準の基礎知識』 第1回／実践ノウハウ ― Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
Web標準って何？ －大藤 幹の『Web標準の基礎知識』 第1回 Web標準の２つの意味 最近になって、「Web標準」という言葉をよく耳にするようになりました。では、「Web標準」とは具体的に何を指す言葉なのかというと、ひとことではなかなか表現することができません。その理由を考えてみると、「Web標準」には大きく２つの意味が込められて使われているからではないかと思います。 Web標準は「Webの標準規格の総称」 1つめの意味としては、英語では「Web Standards」と呼ばれていることからもわかるように、「Webに関する標準規格の総称」であると言うことができます。つまり、W3C（World Wide Web Consortium：中立的な立場からWeb関連の技術仕様やガイドラインなどの策定を行っている国際産業コンソーシアム）が策定・公開しているXHTMLやCSS、ECMA（Europ
[CSS]初心者にも分かりやすいスタイルシートのチュートリアル
スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo 下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。 Step 1. Wireframe – HTML ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="post"> <div class="postheader"> <!--ヘッダ--> </div> <!--コンテンツ--> </div> </textarea>
データ ＆ アナリティクス | アクセンチュア
データ分析から導き出されたインサイト無しにAI（人工知能）の活用は始まりません。私たちは、各業界知識とデータ・アナリティクス技術を駆使しデータドリブン経営を強力に支援します。 データ、アナリティクス、AIは企業にとって競合他社との差別化を図るかつてないほど大きな要因になっています。今日の経営幹部が効率を向上しながら新たな収益源を開拓し、新しいビジネスモデルをタイムリーに構築する方法を模索する中、価値を生み出し成長を続ける企業には「データ活用」という共通項があります。私たちは、無数のデータから企業にとって本当に必要なデータを活用するための方法を知っています。 将来を見据えたオペレーション体制を備えている企業の半数以上（52％）は、すでにデータとアナリティクスを大規模に活用しています。データとAIに関する取り組みをビジネス戦略に沿って実施することで投資利益率を迅速に最大化し、最終的にはAIをビ
cssのテクニックなどを学びたい時に見ておきたい12サイト - かちびと.net
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック | コリス
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。 absolute size キーワードで指定、フォントサイズはUAに依存 ex.)small, medium relative size 親要素に対しての相対指定 ex.)smaller, larger length 正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」 ex.)10pt, 1em percentage 親要素に対してのパーセント(%)指定 ex.)100%, 120% この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。 フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌
カラーチャート/カラーネーム 147色
マウスオーバーをデザインする | DesignWalker
