この春からプログラムにチャレンジしよう！と意気込んでいる方もいらっしゃるのではないでしょうか？ 先日、おすすめ本を紹介させていただいたのですが、本を読みながらの学習では、途中でつまづいたり、なかなか長続きしない、といった方もいらっしゃると思います。 そんな時のお手伝いができたら…と、シーブレインでは今回の連載 「10日で覚えるPHPのキソ」を企画いたしました。 どうぞよろしくお願いいたします。 第1回は PHPを勉強する時に、まず最初に覚えておきたい約束事！ についてお話しいたします。 その前に、PHPとは… PHPはプログラミング言語 日本語・ドイツ語・フランス語があるようにPHPも言語の1つです。 プログラミングをするための言語ですね。 プログラミング言語には大きく分けて、インタプリタ型とコンパイラ型があります。 PHPはコンピュータが直接理解可能なコードへの翻訳作業を、プログラムの実

上記の画像のように、見出しのタイトルに更新日などの情報を並べて表示する、というデザインがよくあります。 実現方法は色々ありますが、CSS でどのように実現するのが簡単でしょうか。 例えば、HTML は以下です。 <div id="press-release"> <h2>プレスリリース</h2> <p class="update">2009年03月09日更新</p> <!-- /#press-release --></div> 良く見かけるのは h2 と p をそれぞれ「position:absolute」で左と右に配置するもの、もしくは h2 を「float:left」、p を「float:right」にする方法です。 どちらを使うにせよサンプルの HTML のように h2 と p を div で囲う必要があり、CSS も長くなりがちです。 以下の方法が最も楽チンだったりします。 HTML

横並びのリンクメニューを作成するときに | （区切り）を表現する方法はいくつかあると思いますが、 今回はシンプルなソースで実現する方法を、紹介したいと思います。 HTML は <ul> <li> のみでシンプルに。 <ul> <li><a href="http://c-brains.jp/blog/wsg/">ホーム</a></li> <li><a href="http://c-brains.jp/blog/wsg/about.html">はじめての方へ</a></li> <li><a href="http://c-brains.jp/blog/wsg/contact.html">お問い合わせ</a></li> <li><a href="http://feeds.feedburner.jp/bashalog">RSS Feed</a> </li> </ul> CSS <ul> に widt

HTML をシンプルに保ったままブロック要素を段組みする方法です。 ↑のように写真を横並びで表示したい、というケースはよくあると思います。 まず、上記の HTML ソースがこちら。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></li> </ul> </div><!-- /#photo --> 今回のサンプルでは、ボックスと余白が以下になっています。 全体の横幅（500px）が決まっていて

スキャナで画像を取り込んだり、写真を撮ったりしたときにありがちなのが、画面の傾き。 ここは水平であってほしかった！でも撮りなおすのは正直ダリー… いや効率が悪いですなあってときに便利なのが「ものさしツール」です。 長さを測るだけが能じゃない。 1.まず「ものさしツール」を選択。 2.基準にしたい辺にものさしツールを沿わせます。例として、紙の底辺が水平になるようにしてみます。 3.メニューから「イメージ」→「カンバスの回転」→「角度入力」を選択すると、 ものさしツールの傾きを読み取って、photoshopが自動的に数値を入力してくれています。 「OK」をクリック 4.画像全体が回転し、基準にしたい辺が水平になっています。 これさえ知っておけば、スキャナに向かって神経質に原稿を並べたりする必要はありません。

人生の早い段階で英語をあきらめた私が、PSDTuts さんのチュートリアルをやってみました。 1.背景色を決める グラデーションツールを使って、こんな感じに背景を着色します。 2.背景に宇宙っぽいモヤをかける 新規レイヤーを追加し、描画色を白、背景色を黒に戻してから「フィルタ」→「描画」→「雲模様2」を実行。 さらに「フィルタ」→「スケッチ」→「クロム」をかけて、雲模様をぬらぬらした質感に変換します。 このレイヤーの描写モードをオーバーレイ/不透明度40％にします。 3.ペンツールの軌跡にブラシツールの勢いをプラス ペンツールで何も考えずに好みの曲線を書きます。 ペンツールからブラシツールへ変更し、ブラシの太さを選択します。 描写色は気にしなくても大丈夫。 ふたたびペンツールに持ち替えたら、新規レイヤーを追加して、先ほど書いたパスを右クリックします。 「境界線を描く」メニューを選択します。

ステップ1 「コマンド」メニューから「Bitgenius」＞「MacButton」を選択。 開いたパネルに各パラメータを指定。 ステップ2 完成。 以上です。 むちゃくちゃカンタンです。 いや、ラク過ぎるのもどーかと思いますが、うん、いやホンと。 でも、時間が無いときとか、ねえ… 他にもFireworksのプラグイン、コマンド、スタイルなどが山ほど用意されています。 FIREWORKS ZONE

猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か

シーブレインでは、Webサイトのデザインをもっぱら Fireworks で行っています。 世の中のWeb制作会社の大半は Fireworks を使っているんじゃないかと思いますが、 それゆえに弊害もあるわけです。 Fireworks にはオブジェクトにテクスチャを簡単につける便利な機能が搭載されていて そのテクスチャ数も充実しているのですが、実際使用頻度が高いのは この辺の「垂直線」とか「水平線」「対角線」。 他の制作会社でも Fireworks を使っているとなると、あーこのサイトのこのパーツは 「対角線1」だなあー、みたいな事態に陥ります。 なので、最近は自分でテクスチャを作っちゃったりします。 作り方は案外簡単です。 [1] ちょっと細かい対角線を作ってみます。 こんな感じで作りたいテクスチャを白と黒でつくります。 繰り返し模様になるので、その辺は考えながら。 [2] png や g