MarsEditで一部CSSが読み込まれない件 | 経験知
※本ページはプロモーションが含まれています 作成:2015/02/06 更新:2017/02/21 リアルタイムプレビューができるMac用のブログエディタのMarsEditですが、リアルタイムプレビューに一部CSSが反映されていないことに気付きました。 CSSが反映されない場合に試してもらいたい方法と、一部読み込まないCSSがありましたので紹介します。 ※プレビューを自分のブログと同じデザインにする方法は「MarsEditのプレビューを簡単に自分のブログのデザインにする方法」で。 こちらの記事も要チェック！ MarsEdit4が出たので試してみたらガッカリだった件MarsEditでショートカットキーを使いHTMLタグを一発で挿入する方法MarsEditでmeta.phpを変更せずにAll in One SEO Packのフィールドを追加する方法MarsEditで画像挿入時にimgタグの属性
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis
新卒入社2年目で、フロントエンドエンジニアをしています。阿部です。 いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。 「IE対策」、「キャッシュ対策」、「高速化」、「ソーシャルメディア要素」、「スマートフォン要素」の5つに分けて、広く浅くですがご紹介します。 IE対策 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> IEで閲覧している場合、Google Chrome Frameで表示します。 Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。 Google Chrome Frame（GCF）とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインで
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」:phpspot開発日誌
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。１つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル
画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 Simple buttons with light stripes (pure CSS) デモページ [ad#ad-2] かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 <a class="bt-blue fx-stripes" href="#"><span>Blue button</span></a> <a class="bt-grey fx-stripes" href="#"><span>Grey button</span></a> CSS：ストライプ ストライプのベースとなるスタイルシートです。 .fx-stripes:before { content:
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌
6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイイボタンを作るチュートリアル シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 CSSでクールなボタンを作るまとめ CSSでボタンを綺麗にスタイルするサンプル集
[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
『WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ iPhoneやiPadのアプリを作りたいけど、iPhoneアプリ初心者なので 作るにはObjective-Cを覚えたり登録したりお金かかったりとか iPhoneアプリの作成にはハードルがちょっと高い。 そこで、今までのWebの知識を活かして、Webアプリにしようと 思って試してみた。 基本的な知識を理解しなければいけないので、超簡単なWebアプリを作成してみた。 だた、写真を100枚表示するだけ。 Webアプリと呼べるのだろうか？ 今回は、基本的な知識を知りたかったのと分かりやすいので Webアプリと呼ぶことにします。 完成したものはこちら！iPhon
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
DOMAIN ERROR
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で作ったラムネ菓子っぽい雰囲気のボタン「BonBon Buttons」
フッターを固定にしたサンプル | CSS Lecture