【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ | バシャログ。
サイトのプロトタイプをデザインするときに、ちょくちょく登場するのがフォームまわりのパーツたちです。ラジオボタン、チェックボックス、セレクトボックス、テキストボックスなどを配置して、初期値にはこんなテキストが入ってて、だけどこっちの初期値はこうで、幅は広めに、だけどこっちは狭めに、とパターンが複数登場したりするとどんどん面倒に。 そこでリッチシンボル化ですよ。 リッチシンボルとは、簡単に言うと、プロパティを編集できるシンボル機能です。 ここではセレクトボックスを例に説明してみます。 1.まずはシンボル化 シンボル化については以前記事を書かせていただいているのでそちらも参考にしていただきつつ、セレクトボックスをシンボル化します。 Fireworks CS3 のシンボル新機能に「9 スライス」というのがあります。9 スライスガイドをこんな感じに設定します。シンボル化できたら、崩れず拡大縮小ができ
【Fireworks】9スライスをこんな風に使ってみました。 | バシャログ。
こんにちは。今年は夏フェスにはいかない!と決めたのに、ラインナップが発表されるとソワソワしているminamiです。 Fireworksネタです。Fireworksには9スライスという便利な機能がありますが、 ちょっと応用してこんな風に使ってみました。 ※作成例はFireworks CS5を使用しています。 9スライスとは、おさらい 9スライスはFireworks CS3から導入された機能で、ベクターシンボルやビットマップシンボルの端の形状を保ったまま、中間だけを伸ばすことができます。 9スライスはシンボルを作成する際に、オプションにチェックを入れることで有効にすることができます。 よく使われると思われるのが、角丸のオブジェクトの拡大縮小です。 上のようなサイトのデザインを作った時、テキストの長さが変わると、角丸の背景部分も伸ばさないといけなくなります。普通に拡大してしまうと角丸の形状が崩れ
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
CSS3備忘録：疑似クラスを使ってtableの最後の縦列をborderで囲む方法
何かの表を作るとき、最後の列に合計の数値を表示することがあると思いますが、 その最後の列を強調するために太めのborderで囲んで欲しいという要望を受けた霙（@xxmiz0rexx）です。 表の向きを横にすればtrで簡単に指定できるのでしょうが、そうもいかない場合があるのですｗ 地道なだけの、ただのCSSの設定ですが、次からコピペしたいので記事にしちゃいます。 html <table> <tr> <th>商品名</th> <th>金額</th> <th>数量</th> <th>Total</th> </tr> <tr><td>石仮面</td><td>500</td><td>2</td><td>1000</td></tr> <tr><td>マンモーニ</td><td>105</td><td>1</td><td>105</td></tr> <tr><td>ニーソ</td><td>30,000<
apple-touch-icon指定が効かない場合に確認すべきこと - Skirnirnismal
iPhoneとAndroidでは以下のような指定をHTMLに書いておくことによりホーム画面にショートカットを作成した時のアイコンイメージを指定できる。 <link rel="apple-touch-icon" href="/img/icon.png"> ところが開発環境などで試しているとこの指定をしているにも関わらず指定したアイコンイメージが使われないことがある。 その場合は開発環境でBASIC認証を使っていないかどうかを確認すると良い。 具体的にはアイコンイメージのURLにBASIC認証がかかっているとNGである。 仮にショートカットを作成する対象画面のURLに同じBASIC認証がかかっていて画面表示の際にIDとパスワードを入力済みであってもNGである。（このせいでハマった） ちなみにAndroidは機種によって挙動が違うようで、BASIC認証がかかっていてもOKな機種があるかもしれない
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
jQueryを使う際の25個Tips | Magicalog
mprove your jQuery – 25 excellent tips ｊQueryを利用する際の25のTipsを見つけたので紹介します。 ちょっと長いですが、かなりいいです。 google jsapiを利用しましょう google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); これを利用すると読み込み時間が高速になります。 チートシートを利用しましょう わからなくなったら、チートシートを利用し、さくっと。 チートシートはこちらがいいかもしれません。 http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/ http://colorcharge.com/jquery/ ライブラリ
せっかく購入したCodaをちゃんと使うために準備したものと覚えておきたいショートカットキー21個のメモ
去年MacBookAIRを購入してから、念願だったMac専用のwebオーサリングツール『Coda』をインストールしたんですが、 DWとの違いにかなり戸惑ってしまいあまり使いこなせていなかった霙（@xxmiz0rexx）です。 使い方さえ覚えてしまえばさらに快適なコーディングライフを送れると思うので、機会を作ってちゃんと覚えてみようと思い記事にしました。 プラグインを入れて快適に使う まずはCodaの環境を整えます。DWではpタグやhタグなどはショートカットキーで挿入していたので、 まったく同じキーではないにしても同じような事ができないかと思い探したところ、Zen-CodingのCoda版プラグインである『TEA for Coda | One Crayon 』を入れれば良いという結論に達しました。 このプラグインを入れておけば、例えばpタグやhタグ、strongタグなどを素早く挿入することが
[CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック
Demo 1 まずは、HTMLから。 HTML img要素をdiv要素で内包したシンプルなHTMLです。 divにclassを付与するのがポイントです。 <div class='stackone'> <img src="image.jpg" /> </div> デモでは下記の画像を使用しました。 Tinkerbell 画像のサイズ：200x130 [ad#ad-2] CSS CSSはステップごとに、説明します。 まずは、margin, paddingをリセットし、bodyの背景カラーをセットします。 * {margin: 0; padding: 0;} body {background: #ccd3d7;} 画像に少しスタイルを加えます。 画像の周りに写真のような縁取りをし、シャドウを加えます。 ※height, widthは画像のサイズに合わせて変更してください。 .stackone {
CSS3を極めたいなら知っておきたい三角形を作る3つの方法
CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って
1日目：難しい漢字にふりがなをつけよう (1/3)
日本語は平仮名、片仮名に加えて複雑な漢字があります。漢字の読み方は思っている以上に難しく「未曾有」を「みぞうゆう」と読んでしまったり「踏襲」を「ふしゅう」と読んでしまう人もいます。人名にいたっては、もう何と読んだらよいのか分からないことも多々ありますから、学校の先生はさぞかし大変だろうと思います。 そこで、jQueryプラグイン講座1日目は、「テキスト中の読みにくい漢字にふりがなをつけるプラグイン」を作ってみましょう。すべての漢字ではなく、“読みにくい漢字だけ”（人名や地名など）にふりがなをつけてくれるプラグインです。これなら、「未曾有」を「みぞうゆう」と読み間違えてしまうことはないでしょう。 プラグインの基本形 プラグインの作成に入る前に、プラグインの基本形について説明します。jQueryでは「$()」によって複数のエレメントが操作対象となるため、プラグインには「複数のエレメント」の情報
swfobject.js がアレな話 - ほむらちゃほむほむ
もばいる全盛感のある世間的には今更，FLASH なんてどうでもいいし，swfobject.js 自体 2009年から更新されてないから，こんな古いものをと言われかねないような話ではあるものの，日本語での言及をあまり見てないし，つい先日もさる通信キャリアがトップページでやらかしてて多分知られてないんだろうなと思ったので書こうと思った次第． swfobject.js とは何か この記事の対象読者にとっては説明するまでもない話とはおもうけど一応前置きとして説明しておくと，swfobject.js は FLASH を web ページに埋め込むための JavaScript のライブラリ．クロスブラウザ対応してたり，面倒な HTML-tag のお作法を覚えなくても良くなったりとでデファクトスタンダードな感じのモノ．2007年とちょい古いがリクルートMTL の SWFObject v2.0 ドキュメント
ホスティング プロバイダとウェブマスターの皆様へ
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
The Ken Q san
Hãy tham gia cùng chúng tôi, có rất nhiều trận đấu hấp dẫn đang chờ đợi bạn đón xem, hãy tham gia để trải nghiệm trang web bóng đá với những thiết kế hiện đại, thân thiện, phù hợp với tất cả mọi người. cakhiatv em trực tiếp bóng đá 24h , với những giải lớn đến nhỏ, như là World Cup, Premier League , Europa League,Champions League ....
XAMPPのセキュリティ設定 - Petit Labs
前回の記事では「XAMPPによるローカルテスト環境の再構築」ということで、「XAMPP Windows版 1.7.4」をインストールしてみました。 XAMPPのインストール先のフォルダをC:\xamppに指定した場合、C:\xampp\htdocsディレクトリにファイルを作成することでローカルホストからアクセスできるようになります。 とはいえ、デフォルト設定のままXAMPPを利用するのはセキュリティ上好ましくないようなので、自分なりにセキュリティ設定をしてみました。XAMPPのセキュリティ欠如については「XAMPP for Windows」に記載されています。 XAMPPの管理画面での設定 XAMPPのコントロールパネルを起動してApacheとMySQLの「Start」ボタンをクリックしてサービスを開始したら、Apacheの「Admin」ボタンをクリック、もしくはWebブラウザから「htt
XAMPP Control PanelでApacheおよびMySQLが正しく再起動できなくなるのを正常にしたい - Windows7 64bit - 問題解決ログ
自宅環境でXAMPPを使えるよう、Windows7 64bitにインストールしたが、パソコンを再起動するとXAMPP Control PanelでApacheおよびMySQLが正しく再起動できなくなる。 原因を探るため何度もXAMPPのインストールを繰り返した結果、問題が見えなくなった。 結論としては、Windows 7のファイアーウォールがApacheおよびMySQLの起動を阻害していた。 わたしの環境では、ファイアーウォールで「ホーム/社内(プライベート)」だけが許可されていて、「パブリック」を許可していなかったため、中途半端な動作になっていた。 ファイアーウォールの状態を変更する 「スタート＞コントロールパネル＞システムとセキュリティ＞Windowsファイアーウォールによるプログラムの許可」を選択 右上「設定の変更」ボタンをクリックした後、「Apache HTTP server」と「
サイトルートパスをローカルプレビュー | skal_blog
サイトルートパスを使うことになったので 自分の覚え書きな感じですが… xamppとDreamweaverを使ってローカルでサイトルートパスをプレビューする方法をご紹介します。 まずはxamppをダウンロード and インストール！ xamppは仮想サーバーをたてられると〜〜〜〜ても便利なフリーソフトです。macもでましたね。 で…xamppの設定とインストールが終わったら… 例えば http://test でブラウザからプレビューしたいときの設定 「xamppの設定」 C:xampp/htdocs の中にtestというフォルダを作ります。 これがrootディレクトリーになります。 C:xampp/apache/conf/extraの http-vhosts.conf ファイルを開く 上のあたりにある ##NameVirtualHost *:80 の##をとる（#は
『ローカル環境で"/"で始まるルートパスを見る方法』
"/"で始まるルートパス。 画像、JS、CSSのファイル参照やリンクを設定する時にこれを使っておけば、相対パスと違ってhtmlファイルの階層が変わっても同じファイルを参照するので修正する手間が省けますし、階層の異なるhtml間で同じ記述を共用できるため、場合によっては便利です。 しかし、これそのままではローカル環境で確認することができません。 作成したhtmlファイルをダブルクリックしてブラウザで表示させても正常にファイルが読み込まれません。 この点は非常に不便です。 ルートパスを使用しているウェブページをローカルで確認するには、Apacheなどのサーバーソフトを導入してlocalhost経由で見なければルートパスが有効になりません。 しかし、localhost経由でも、ドキュメントルートは一つしかないので、複数のサイトを作る時は対応できません。 で、どうすればいいか悩んでいたところ、Ap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3で描かれたシェイプのサンプル集:phpspot開発日誌
windows7 64bitにXAMPP | noisecat Blog