サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
redline.hippy.jp
サンプルページ まずはサンプルから。 内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。 >>REDLINE MAGAZINE | レスポンシブ対応テーブルサンプル ネタ元のCODEPENページ。 >>A Pen by Captain Anonymous ソース 自分とこのサンプルからソース部分を。まずはhtmlソース。 <table> <thead> <tr> <th>イベント名</th> <th>開催日</th> <th>場所</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td data-label="イベント名">なんたらイベント</td> <td data-label="日時">2015/04/08(水) </td> <td data-label="場所">大阪府大阪市どこどこ</td> <td data
メニューをスキップして本文へ 旧ブログナビ (open/close)
Fireworks 拡張アレコレ追加メモ Fireworks用にいろんなサイトで配布されているスタイルやパターンなどなど、いろんな素敵なものを追加するためのメモです。自分で作ったものを登録しておく方法の説明は今回は省略してます。 各素材等はmxp形式で配布されているものも多いので、その場合はExtension Managerでインストールしてください。下記はそうでない場合についてのお話です。 また、私の使用しているバージョンはCS4(Win用)なので、それに基づいてのメモとなります。バージョンやOS違いの場合は自分の環境に置き換えて確認してください。 スタイルを追加する スタイルパネルのオプションメニューで「スタイルライブラリを読み込み」を選択、スタイルライブラリの名前と場所を選択します。 「スタイルを読み込む」と「スタイルライブラリを読み込み」の違いは、前者の場合は現在のドキュメントに対
Fireworks コレ、5分で作ります。その２ ※このエントリはFireworks CS4を元に書いています。 前回はペンツールでパスを書いてなんやかんやしたんですが、今回はFireworksを始めたら一番最初にコレを覚えであろう長方形ツールをメインで使ってコレを５分くらいで仕上げる方法です。 デザイナさんも、デザイナさんじゃない方も、Fireworks をほとんど使った事ないわーという方にも、一度5分だけでも時間を使ってもらえたらなーという主旨も含めて書いてます。実際にやってみてもらって、「うはｗｗ Fireworks ってこんなに簡単な手順でよく見かけるこういうモノ作れたんだ」とか思ってもらえると嬉しいです。 今回の完成形 今回も前回同様、見出し画像の背景に使えそうな画像を作ります。 今回も素材集等、Fireworks の機能以外のものは使いません。 土台を用意 今回は２色のグラデー
Fireworks コレ、5分で作ります。その１ ※このエントリはFireworks CS4を元に書いています。 Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。 今回の完成形 見出しの背景画像によくありそうなこういう画像をパパっと作ります。 今回は素材集等、Fireworks の機能以外のものは使いません。 土台を用意 まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。４色決めてスライダーを調節。外側には1pxの線も加えます。 ここでのサンプルのサイズはW 470 * H 40 としました。 こういう見出し用の背景画像でよく左側
Fireworks ちょいネタ集 ※このエントリはFireworks CS4を元に書いています。 バージョン違いの場合は内容が異なるかもしれません。 大好きなFireworksの「地味だけどコレ知ってると効率いいよ！」という小ネタ集です。このネタが有名な話なのかそうでないのか分からないのですが、私自身最初知らなかったけど、気付いてからは効率上がったぜという話なので、もし知らないユーザーさんがいたら是非活用して欲しいなーと思って書いてます。 整列パネル 間隔に数値を入れて等間隔にする CS4ではスマートガイドがあるので、動かしたいオブジェクトを任意の位置へパパっと正確に移動させることができます。任意のオブジェクトを別のオブジェクトの上下左右のどこかに揃えたいなんて場合はそれで済ませる事も多いですが、等間隔に配置したい時は整列パネルの『間隔』使いますよね。 この『間隔』には２種類の間隔をとる方
最近のコメント PHP オブジェクト指向の勉強 └ Red - 2010.01.08 └ hogepage - 2010.01.21 └ Red - 2010.01.22 └ - 2011.11.27 └ houseiii - 2011.11.27 Fireworks トリミング画像を一括書出 CS4編 └ Iper - 2009.06.27 └ Red - 2009.06.27 └ mala - 2011.11.17 └ Red - 2011.11.18 jQueryでボックスを上下左右中央に簡単配置 └ ミラクル - 2009.03.15 └ Red - 2009.03.15 └ entZ - 2011.10.22 └ Red - 2011.10.24 overflow を使用したボックス背景のこと └ - 2007.12.13 └ Red - 2007.12.13 └ - 2007.
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
DW用 CSS3対応セレクタコードヒント 2010.04.04追記 このエントリ書いて寝て起きたら修正版が出てた！仕事速い！このエントリの下の方で属性セレクタがなんたらかんたら…と書いてる部分に対して、修正してくださってます。 CSSセレクターコードヒント修正 - dwlog.net （「 [ 」 を入れたら属性セレクタが出てくるようになったバージョン） が、しかし、今度は「：」を押しても反応がなくなったので作者さんのブログにコメント送ってみたところなう。(2010.04.04 10:58) 2010.04.04 12:19 さらに追記 自己解決 上に書いた「：」を入れても反応しないの件、Configuration/CodeHints/css_selector.xmlの50行目辺りに<menu pattern=":" DOCTYPES="CSS">に対する閉じタグ</menu>を追加したら
近況とか。CSS,PHP雑記の巻。 しばらく更新を怠ってたので、なんか書こうかなーと。 最近のもろもろ。雑記。日記。チラシの裏とも言う。 CSS関連 雑記 IE三兄弟にモヤモヤしてた。 検証ブラウザにIE8を含まなくちゃならなくなってから、IE6.7.8のIE三兄弟の対応にイライラすることも多々。「MSブラウザ、1つ増えたら1つ消えろや」と声を大にして言いたい。兄弟みんなが微妙に違うっていうケースにも遭遇してハックで凌いでみたり。よくないよね。メンテナンス性悪いなー、汚いなー、そもそもそうしなくちゃならないのって根本的にデザイン or 組み方がおかしいからだろー、とか自分で思いながらもそうせざるを得ない状況で悔し涙を流したり。そんでもってもうIE9の話とか出てきてるし。 IE8、ガッタンゴットンスパイラル これはだいぶ前の話だけど、IE8で思い出した。昔作ったサイトをIE8で見直したらho
Firefox 検索バーに好きなの追加 Firefoxの検索バーから直接PHPのマニュアルを検索できるプラグインを 発見したので勢いで入れてみました。 sks - PHPマニュアル検索プラグイン チョーー便利！知りたい関数でググっても常にマニュアルが検索結果の一番上にきてくれるわけではないので、これはマジで便利です。ハッピー。 検索バーが気になって、便利なものを探してたらこういうのがあった！！ Add to Search Bar :: Add-ons for Firefox このアドオンを入れておくと、「検索」があるサイトのフォーム内で右クリックすると･･･簡単にFirefoxの検索バーに追加できてしまうというすぐれもの。 例えばこのサイトの右上の検索ボックスの部分で右クリックすると･･･ マジで簡単に追加でけた！ これで自分が過去に書いたエントリを探すのも、わざわざサイトを表示してから検
PHP修行 MVC復習/改善の巻 この前書いた「PHP宿題 MVC の勉強」のエントリのコメントでたくさんアドバイス頂いて、いろいろ改善してだいぶマシになったっぽいので復習日誌。 まず元々のMVCとか関係ないソース MVCを意識しないでダダダーと書いた元々のソースはこんな感じ。（前回のエントリと同じ内容だけど、名前を入力して送信ボタンを押すと「○○さん、こんにちわ。」という文が表示されるだけの内容） <form action="<?=$_SERVER["PHP_SELF"]?>" method="post"> <p><input type="text" name="name" /></p> <p><input type="submit" name="submit" value="送信" /></p> </form> <?php $name = isset($_POST["name"]) ?
PHP修行 「setter/getter」を知るの巻 2010.02.17追記 PHPでは「カプセル化」でググる 2010.02.17追記 オブジェクト、getter/setterについての解説 この前書いたMVC勉強のコメントにて添削をして頂いてる最中なのですが、その中でまたもや新たなキーワードが出てきまして･･･。添削して頂いてる最中ですが、分からないコトが出てきたので、先にそっちの勉強して出直してきます。先生、すみません。しばしお待ちを･･･。そんでもって、分からなかったのがこの一文。 setterで値セット、getterで値取り出し。setter,getterを使うことで複数人で開発時に"誰かが勝手なルールで"$nameの値を変更してしまうことを防げる。 ちょっと待って。「setter」「getter」は初耳。教えて！google先生(n'∀')η (n ▼ω▼ ) ＜ sette
素敵★ノンプログラマのためのPHP入門 この前「PHPを勉強する事についてデザイナが思う事。」っていうエントリを書いたのですが、たくさん見てくれてありがとうございますです。Twitterでも「何かあったら聞いてね」的なメッセージを頂けてとても幸せな気持ちになりました。ああいうの書くの恥ずかしかったけど公開してよかったｗ どこからアクセスされているのか、リンク元を見るのが大好きなので、いろいろ見てたんですが、Twitter経由のアクセスがすげーーｗｗｗとか思ってました。Twitter恐るべしです。まじで。そんでもって、このつぶやきを発見したのですよ。 この記事で思いつきましたが、USTREAMでノンプログラマのためのPHPオンライン講座とか開催したら、参加してくれる人いるかな？＞http://redline.hippy.jp/lab/php/php_9.php Followしている方ではなか
PHPを勉強する事についてデザイナが思う事。 先日、こちらのエントリを拝見して･･･ デザイナーがwebサービスを10週間で作れるようになる方法。または私は如何にしてPHPを愛するようになったか。 - ウェブ狂の詩 なんかいいなぁ･･･って。PHPを今勉強している自分としては、こういうお話大好きです。 激しく同意→「デザイナーはphpを覚えると楽しいよ！」 自分はまだ何かwebサービスが作れるとか、そんな高度なレベルではない初心者ですけど、とりあえず今PHPの勉強するのがすごく楽しいです。 本業はデザインやコーディングがメインで、実務でPHPと言われれば他のプログラマさんが作ったシステムを設置・デザインをカスタマイズする程度。自分で1から何かを使って何か大きな事をするという機会にはまだ遭遇してないんですが（最近ちょこっとしたスクリプトは実務で自分で用意させてもらったりして、それはそれで感動
PHP宿題 MVC の勉強 頂いた宿題勉強日誌。今日は「MVC」について。(MVC - Google 検索) フレームワークを利用する前にきっちり理解しておくといい内容とのこと。 実は前にSmartyを使ったことがあって、デザインとロジックを分ける主旨についてはイメージできるのだけれど、MVCと言われると「C」の役割がいまいち分からない。（MとCの境目がイマイチ分からない） MVCについて検索してるとフレームワークのお話に行き着く事が多くてなかなか初心者向けの簡単な説明が見つからないのだけれど、いろいろ調べた結果を自分なりに解釈すると、 表示担当がView 入力された内容についてModelに処理をお願いしたり、Viewに表示をお願いしたり、橋渡し的な役割をするのがController データの処理がModel（こっちでは入力されたデータの受取とか処理後の結果を直接Viewに渡したりはしない
CSS テキストリンクもボタンっぽくポチっとする 最近CSS関連の情報ってCSS3のお話が多いんだけど、今日は初歩的なところに戻って昔よくあったみたいな小ネタ。 こちらのページにテキストリンクもボタンリンクみたいにクリックしたらヘコませようぜっていうお話がありました。 >>Make All Links Feel Subtly More Button-Like | CSS-Tricks テキストリンクって、hover時のスタイルに関しては毎回どうしよっかって迷うけど、個人的にはactiveのタイミングでのスタイルはあまり気にしてなかったかも、と思いました。なんかこういうのちょこっと手を入れるだけで印象が変わりますね。まぁ「ほんの一瞬」なので気付かない人も多いかもしれないけれど。 上記ページのコメントの部分にポチっとヘコむ時に少し暗い色にしたらどう？ってお話もあってなるほどなーと思ったので、そ
FeedBannerパラメータで、はてブ分散の件 PHPの勉強、頑張ろうと思って、はてブのPHPタグのついたエントリのフィードを追いかけてるんですよ。んでね、昨日PHP関連のエントリ書いたらそれがブクマして頂けたみたいなんだけど、朝いつも通りPHPタグのフィードチェックしてたらなぜか2つあるんですよ、昨日のうちのエントリが。 で、そういえば少し前になんかそんなに話をどっかで見た！と思って必死に思い出したらshin1x1さんのブログだーと気付いた。 ↓なぜか2つある。 >>同じエントリへのはてブがバラバラに付く | Shin x blog 見事なまでに的を得たタイトル。そうそうそうそう。いつの間にかURLにパラメータがついてるなってのは気になってたんですよ。が、まぁとりあえず放置で･･･とか思ってた。でもやっぱなんか気持ち悪いからなんとかしたい。shin1x1さんのブログではWordpres
PHP オブジェクト指向の勉強 相方の知り合いにPHPに強い方がいらっしゃって、相方がその方に私がPHPを勉強してるって話をしたら「んじゃ、オブジェクト指向の勉強した方がいいよ」とアドバイス頂いたのでさっそく勉強してみる。 実のところ「オブジェクト指向」っていうの、今までも何度も何度も本読んだり、サイト見たりして自分でサンプルに書かれてるソース手打ちして実験したりもしてたんだけど、なんか分かったような分からんような･･･な状態だったんですよね。何が分からないのかと聞かれるとそれもまた分からないんだけど、なんだろう、概念みたいなものが自分の理解であってんのかどうかわかんない + 使いどころはどこ？ + 難しそうで怖いという先入観。まぁ、とりあえずおさらいしてみる。 手続き型とオブジェクト指向 処理を1つ1つ流れに沿って動作させるのが「手続き型」っていう方法。私がPHPに興味を持ち始めた頃「こ
PHP 添付ファイル付メール送信 勉強メモ ブログで「今年こそはちゃんとPHP勉強するよ」宣言したのが効いているのかまだ諦めずに続いてます。PHPの勉強。脱三日坊主。やったぜ。 ようやく実務でもちょこちょこ自分で1からPHPの何かを作らせてもらえるようになって、調子に乗ってたんですが、「添付ファイル付きのメールを送る」という事態に対して、まったく仕組みがわからなかったんだぜ。 メールの仕組みをおさらい 分かってるようで分かってなかったメールの仕組みをもっかいおさらい。 メールにかけられた呪文「MIME～前編」 メールにかけられた呪文「MIME～後編」 めっちゃ詳しく説明されてる。全力で印刷した。読んだ。とりあえず前半を読んでMIMEってやつの仕組みをしっかり理解しておかないといけない、と初心者ながらに悟った。 ちょうど上のリンク先の後編は添付ファイルを送るときの仕組みが書かれていたので、そ
Photoshopブラシ「まとめ」の「まとめ」 2009.11.22 2件追加しました。 2010.02.07 5件追加しました。 先日Photoshop用ブラシをFireworksで使うためのエントリを書いたので、その肝心のブラシまとめ記事のまとめ。ちょっと自分でもこういう系のエントリをブクマしすぎて把握できなくなってきたのでメモ的に。 勢いでまとめたのでリンクミスとかあったらすいません＞＜ 今まで自分がブクマとかしたブラシまとめ・紹介ページ とりあえず適当にジャンル分けしてみた。 光系・キラキラ系 光が超カッコいいPhotoshopのブラシ色々まとめ:phpspot開発日誌 きらめく光のPhotoshopブラシ200選 | CREAMU 45の光を表現するphotoshopブラシ集[記事紹介]*ホームページを作る人のネタ帳 光線を描くためのPhotoshopブラシ250+ | CREA
Photoshop用ブラシをFireworksで。 いろんなサイトでPhotoshopの素敵なフリーのブラシ素材が配付されてて、そんな配付サイトの紹介エントリを目撃するたびに「これFireworksでそのまま使えたらいいのになぁ」なんて思います。まぁそのままブラシとしてFireworks上で使うことはできないのですが、Photoshopの素敵ブラシを使用する機会は多いのでFireworks使いの自分がどう付き合ってるのかっていうエントリです。 とりあえず前提として、Fireworks上でそのままブラシとして使うことはできない（多分）ということで、感覚的にはスタンプ画像みたいな感じで使ってます。とにもかくにも、まずはどうにかして使いたいブラシをFireworks上に移植にする事からですよね。Fireworks用にスタンプ画像的なものを用意するいくつかの方法から。 Photoshopからそのま
CSS 画像の一部を使う3つの方法 こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも！とか思ったのでメモがてらにエントリ。 3 Easy and Fast CSS Techniques for Faux Image Cropping | Css Globe ちなみに上記エントリでは、これらの方法を「Faux Image Cropping」って呼んでます。私の拙い英語力ではCropって「作物」としか記憶してなくて一瞬何のこっちゃと思ったんですが、辞書引いてみると「刈る」とかいう意味もあるんですね。なるほどなるほど。 ネガティブマージンを利用する方法 まず１つ目はネガティブマージンを利用する方法。 必要条件 親要素に「overflow:hidden;」を指定 一部分を利用する画像に対してのネガティブマージンの指定 >>ネガティ
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
PHP 画像にロゴを入れる 追記:090702 はてブのコメントでこのエントリの別案タイトルを頂きました。その名も「PHPのGDライブラリをつかったウォーターマークの入れ方！」（ryuzi_kambeさん、ありがとうございます）こういうのってウォーターマークっていうんだなーと。そういえばなんか聞いたことありました（多分）。普段は「透かし」とか言ってたよ･･･。 ブログを利用してご自身で日々の情報やら画像やらを更新してくださってるクライアントさんから「アップする写真にうちのロゴを入れたいんだけど」というお願いがきた。（画像パクられたくない的な感じ）画像加工のソフト使えばーとか思ったけど、最近放置気味だったPHPの勉強再開のいいタイミングかなーということで、PHPを利用してできないかやってみた。 やりたい事 画像ファイルの右下辺りにロゴを入れたい。 後で「この写真のロゴの入ってない元データを無
Fireworks トリミング画像を一括書出 CS4編 バシャログ。さんのFireworksネタが大好きでいつも拝見して勉強させて頂いてます。先日こんなエントリがあったので、自分でも試してみました。サムネイル用等に複数の画像ファイルをFireworksでトリミングする際、効率よく楽にファイル書き出しする方法のお話。 【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。 【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください2 | バシャログ。 バシャログ。さんではバージョンがCS3っぽいのですが、じぶんは今CS4を利用してるので、そのバージョンでのお話。 新規作成～カンバスサイズの設定～画像の読み込み 上記記事同様、複数の画像ファイルを一気に1つのFWページ内で編集するという前提で、まず「ファイル」>「新規
次のページ
このページを最初にブックマークしてみませんか？
『RedLine Magazine』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3Dlivedoor)
