2012-05-01から1ヶ月間の記事一覧
役に立ちそうなサイトをいくつか見つけたので、紹介します。 CSS関連が多いです。Web Browser CSS Support http://www.webdevout.net/browser-support-css CSSサポート状況を確認することができるサイトです。CSS-only Filters Summary http://www.communis.…
フリーランス兼会社代表のWebクリエイターの馬場誠さんがこの本を紹介していたので、気になってアマゾンでポチッと購入。「ちゃんとCSSするためのスタイルガイド入門」を紹介していたわけですが、自分はその前の前編に当たる「スタイルシート スタイルブック…
前回の「画像を可変」に似たような感じで、今回はCSSのほうに画像を配置して狭くしたり、広くしたりしてみましょう(。・ω・。)ﾉ HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>画像を可変</title> </head> <body> <div id="layout"> <div id="photo"></div> <p>CSSに画像を配置し…</p></div></body></html>
ブラウザのウィンドウの大きさによって画像を狭くしたり、広くしたりしてみましょう(。・ω・。)ﾉ HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>画像を可変</title> </head> <body> <div id="navbar"> <div class="photo"> </div></div></body></html>
画像にマウスを乗せると、マウスオーバー用の画像に切り替わり、クリックするとアクティブ用の画像に切り替わるように設定してみましょう(。・ω・。)ﾉまずはデフォルト用、マウスオーバー用、アクティブ用の画像を用意し、加工します。 自分はこんな感じに加…
入力フォームにマウスをフォーカスさせると、背景の色が変わるように設定してみましょう(。・ω・。)ﾉ HTMLファイルのほうは、下記の通りに入力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>フォームテクニック</title> </head> <body> <p>名前：<input type="text" name="example"></p> </body> </html>CSSフ…
この前、本格的にサイト制作宣言したものの、全然進んでおりません(´･ω･) ひたすら勉強に逃げております（？）とりあえず、サイト構成を頭の中でしっかり決めてから作りたいですね。 あやふやなままサイト制作に取り掛かろうとすると、中途半端になりそうで…
角丸ボックスを作ってみましょう(。・ω・。)ﾉ CSS3で簡単に作れるみたいですが、画像を用いて作ってみます。まずは角丸部分が欲しいので、グラフィックスソフト（自分はFireworksを使いました）で角丸長方形を描いて、スライス機能を使って4箇所、角丸をスラ…
素材に困ってしまった時は、無料ホームページ素材を利用しましょう(。・ω・。)ﾉフリー素材屋Hoshino http://www.s-hoshino.com/写真素材 足成 http://www.ashinari.com/WEBデザイナーが作った超シンプル素材集 http://sozai.akuseru-design.com/Web-Stylish!…
Webデザインの制作を行う時に参考になりそうなサイトをいくつか載せていきます。 今回はWebデザインのリンク集を紹介します。Webデザイン・Webデザイナーのまとめサイト http://www.designlinkdatabase.net/Web Design Clip http://www.webdesignclip.com/I/…
前回はWebInspectorというソフトも紹介しましたが、サイト上でHTMLファイルやCSSファイルを検証するサービスもあります。Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlW3C Markup Validation Service http://validator.w…
ColorSelector http://jp.fujitsu.com/about/design/ud/assistance/colorselector/ColorSelectorは、背景色と文字色の見やすさを判定するソフトです。画面上に表示されている色をスポイト機能を使って吸い取り、RGB値や16進数を教えてくれます。 「あそこの…
本格的にサイト制作に取り掛かろうと頭の中で構想を練っているわけですが、どんなレイアウトにしようか迷ってます。 ポートフォリオサイトもどんなレイアウトにしようか迷ってます。 こういう時に色んなサイトを見てセンスなどを蓄えるべきなんですが…。まず…
ちょっと乗り遅れた感がありますが、星のカービィ生誕20周年です！！ 20周年ということで、記念絵をイラレで描いてみました。 スマブラXでよく黄色カービィを使用するので、ピンクではなく、黄色にしてみました(･ω･*) 仕上げ（サイズ調整）はフォトショを使…
昨日は9時半から21時まで設営の仕事をしました(´･ω･)主にOA机や椅子などをトラックに運ぶ作業だったんですが、貧弱な自分にとって過酷な仕事でした。 しかも外は暑かったので、余計に辛かったです…。 ポカリスエットを1リットルも飲んでしまった（笑）翌日、…
やっと全部終わりました(。・ω・。)ﾉ 2月24日から5月27日まで学習期間だったんですが、なんとか間に合って良かったです。全て学ぶ必要はないんだけど、中途半端に終わってしまうのは嫌だったので、全て学習しました。 いつか役に立つことを願いましょう(*´ω…
ソースコードをそのままブラウザに表示させる方法を見ていきましょう(。・ω・。)ﾉ 色々な方法があるみたいですが、自分は"<"を"<"として、無効化したほうが良いかな、と思います。 それぞれ開始タグと終了タグの先頭"<"を"<"に差し替えましょう。 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title></meta></head></html>…
Webデザインの制作を行う時に参考になりそうなサイトをいくつか載せていきます。青山フラワーマーケット http://www.aoyamaflowermarket.com/pc/index.php5IDEE http://www.idee.co.jp/銀座コージーコーナー http://www.cozycorner.co.jp/evian http://www.e…
お昼の12時から17時まで皆でカラオケ、18時から20時まで飲み会。 飲み会が終わった後は、1時間くらいゲーセンで遊んで解散。何時か正確に覚えてないけど、22時か23時頃に友人からチョコットランドに誘われる、 ゴッドフィールドを勧めたら大盛況、朝の5時ま…
Fireworksで矢印を作る解説をしていきます(。・ω・。)ﾉ①直線を描く ツールから[ラインツール]を選択し、直線を描きます。長さは適当に。 横に線を描き、[Shift]を押しながら45°単位で直線を描きます。②直線を複製、反転 45°単位で描いた直線を選択し、[Alt]…
ドットインストール http://dotinstall.com/過去にmixiでも紹介したことあるんですが、ココでも紹介します。ドットインストールとは、3分動画でマスターできる初心者向けプログラミング学習サイトです。 「初心者向け」と書いてますが、PCに関して全く分から…
なんとなく、グーグルで「天然の気まぐれ勉強会」と検索したら、ココのブログが検索結果に表示されるようになりました。顔文字の部分がちょっと変だけど、仕方ないのかな？ ポートフォリオサイト「ホリビレ」も検索したら、表示されました。それだけです(´･ω…
WAVEクリエイティブ講座という有料動画講座があるんですが、ようやく8割くらい見終わりました。 残りはPremiere Pro CS5とAdobe After Effectsだけになりました。ただ、Adobeウェブプレミアムの中にPremiere Pro CS5とAdobe After Effectsは含まれていないの…
自分が訓練校に通っていた時に購入した本ですが、授業であんまり使われることはありませんでした。 それからずっと本棚に眠っていたわけですが、あるフリーランスの方がこの本を紹介していたので、再び本棚から取り出して読んでいる最中です。本の内容はDTP…
DanceEvolution（Xbox 360） 『A Geisha's Dream』 振り付けムービー タイトルにはXbox360と書いてありますが、アーケードも稼働してます。この前、初めてアーケードのDanceEvolutionをプレイしてみましたが、非常に難しかった(´･ω･) 難しいけど、振り付けを…
発売日の前日に三省堂で購入しました。衝動買いってやつです(。・ω・。)ワイヤーフレームの設計からデザイン制作、コーディングと進むので、一人で最初から最後までサイト制作を一通り行えるのが良かったです。ステップごとに完成ファイルが用意されているの…
Fireworksでモックアップを作る解説をしていきます(。・ω・。)ﾉ モックアップというのは、実際にHTML言語でサイトを作り上げる前に、動きを試してみることが出来る試作サイトのことです。 流れを大雑把に解説していきます。①ファイルを開く [ファイル]→[開く…
飲み会の帰りです。帰りの電車に乗る前に書いてます。危うくブログを書き忘れるところでした…w土日は丸二日間、勉強に当てようかな、と思います( ´・ω・)
FireworksでアニメーションGIFを作る解説をしていきます(。・ω・。)ﾉ ぶっちゃけ、学習する前はFireworksでアニメーションGIFが作れるとは思っていなかったので、ちょっと驚きでした。 簡単なアニメーションGIFを作りたい時にサクサク作れると思うので、手順…
5分でわかるStumbleUpon http://stumblab.com/5minutes_stumbleupon/ネットで情報集めをしていたら、たまたまStumbleUponというのを見つけました。StumbleUponというのは、ソーシャルブックマークサイトです。 好きなカテゴリからランダムでサイトを表示して…
