2014-11-01から1ヶ月間の記事一覧
斜めに撮った写真をPhotoshopの「ものさしツール」と「ゆがみ」の機能を使って、正面から撮ったように修正します。このお菓子の箱は上から撮られたので、上は大きく、下は小さくなっています。 均等になるよう修正して正面から撮ったようにしていきます。1.…
illustoratorでライブペイントツールを使って線で囲まれた領域を塗りつぶす方法を紹介します。私はillustirator CC(最新アップデート2014年10月)を使っているのですが、ライブペイントツールがどこにあるのか見つけるのに苦労したためどこにあるかも詳しくか…
illustoratorで四角の一辺だけを曲線にする方法を紹介します。1.長方形ツールで四角を描く。2.アンカーポイントツールを選択する。3.曲線にしたい面をドラッグ。4.ハンドルを調整して完成！
横幅いっぱいに等間隔で、画像とコメントを並べる方法を紹介します。margin-rightで画像同士の余白を作ると、一番右端に余分な余白ができてカラム落ちしてしまいます。 一番右端の余計なmarginを取る方法を忘れないようにメモしておきます。 <html> <head> <meta charset="utf-8"> <title>無題ドキュ</title></meta></head></html>…
CSS spriteで横のナビゲーションを作成します。画像はこれを使います。高さ80px、幅600pxです。 hoverすると色が変わります。 <html> <head> <meta charset="utf-8"> <title>css spriteでボタン作成</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div id="nav"> <ul> <li id="html"><a href="#"><em>html</em></a></li> <li id="css">…</li></ul></div></body></html>
CSS spriteで縦のナビゲーションを作成します。画像はこれを使います。高さ160px、幅300pxです。 hoverすると矢印が表示されます。 <html> <head> <meta charset="utf-8"> <title>css spriteでボタン作成</title> <link rel="stylesheet" href="css/style.css" media="screen, print"> </head> <body> <div id="nav"> <ul> <li id="HTML"><a href="#"><em>HTML</em></a></li></ul></div></body></html>
擬似クラスを使った横並びのナビゲーションの作り方を紹介します。 -「li」ではなく、「li a」にborderを指定する -ul は、レイアウト幅を指定 -li は、widthとfloatを指定 -li a は、display: block と border-rightを指定 <html> <head> <meta charset="utf-8"> <title>横並びのナビゲーション</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div id="nav"> <ul></ul></div></body></html>…
擬似クラスを使った、縦並びのナビゲーションの作り方を紹介します。 hoverで背景と文字の色が変わります。 <html> <head> <meta charset="utf-8"> <title>縦並びメニュー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="nav"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a><…</li></ul></div></body></html>
floatプロパティを使ったレイアウトを紹介します。 2カラムのレイアウトです。 <html> <head> <meta charset="utf-8"> <title>floatプロパティを使ったレイアウト</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div id="container"> <div id="header">#header</div> <div id="nav">#nav</div> <div id="wrapper"> </div></div></body></html>
学校でやった1カラムレイアウトのページのソースを載せます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header"> <h1>石垣島観光ガイド</h1> <p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置し…</p></div></div></body></html>
