HTMLやCSSを知らなくても簡単にWebサイトが作成できるMac用Webエディタ「Blocs」がリリース。
Mac App Storeには現在申請中だそうですが、NormさんのWebサイト”Ui Store“では既に$49.99で販売が始まっており、トライアル版もダウンロード可能です。 使い方 使い方は非常に単純で、ユーザーはページを作成し、決められたBlocを編集していくだけです。まず、Blocを追加し、 次にBlocのスタイルを選択します。BlocはBricという要素に分かれており、各Bricは画像や動画、テキスト、リンク、見出し、フォーラム、ミュージックなどに変更可能です。 また、Bric要素の編集はサイドメニューから行います。 Bricの編集が終わったら、新たにページを増やすために右上の[+]ボタンか、メニューバーの [Page] > [New] からページを追加します。流れはメニューバーにある順番[File] > [Page] > [Bloc] > [Bric] で行えばわかりやすいと
独学でWebデザイナーの必須スキルを身につける方法 - DESIGNMAP
この記事は2010年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」（2015年3月） 大まかな身につけるステップだが、まず、基本スキル（Illustrator、Photoshop、HTML、CSS、デザインルール）を学んでいき、プラスアルファでスキルを積んでいくとよい。 本の選び方のコツ、チュートリアル形式の本からはじめよう 独学で本を選ぶ時は完全なチュートリアル形式（ひとつのウェブページをゼロからつくっていく形式が理想）になっている本かどうかを確認しよう。できれば本屋にいってチュートリアル形式かどうかを確認したほうがよいだろう。手順にそって本に従いながら時間をつくって勉強していこう。実はこの形式の本は作るのがめんどうなので数は少ない。 リファレンス形式
padding－スタイルシートリファレンス
スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample1 {background-color: #f8dce0; padding: 10px;} p.sample2 {background-color: #f8dce0; margin: 30px; padding: 10px;} p.sample3 {background-color: #f8dce0; padding: 10px 20px;} p.sample4 {background-color: #f8dce0; padding: 10px 20px 30px;} p.sample5 {background-color: #f8dce0; padding: 10px 20px 30px 40px;} HTMLソース <html> <head> <link rel="stylesheet" href="sa
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
見出しの装飾
見出しを枠線で装飾しよう ホームページは、見出しが正しく記述されていると訪問者にとって快適に閲覧することができます。見出しを見てどんな内容が記述されているのか、だいたい検討がつきます。見出しを定義するタグには<h1>〜<h6>があります。このタグに囲まれた部分は太字で、前後に空白が作られます。<h1>は一番上位の大きな見出しでページ内のタイトルを指定するのが一般的です。数字が大きくなるとレベルも下がります。 正しく見出しを記述しておけば検索エンジンにもとても有効になります。このページでは、HTMLだけでは表現できないいろいろな装飾をスタイルシートを使って<h1>に取り入れ、アクセントのある見出しを作ります。 スタイルシートでのボックスについて スタイルシートで h1 に装飾を指定する前に、スタイルシートでのボックス（箱）について知っていると分かりやすいと思います。今回は下の図にある青い枠線
絶対と相対パス
絶対パスと相対パス せんせい、画像や他のページへリンクしたいんですけど、うまく表示されないんですよ。画像の変わりに「×」って出たり、ページを開くと「not found」って表示されてしまいます。 「×」や「not found」となってしまう場合は、ページ・画像が指定した場所にないか、指定のパスが間違ってるのだよ。 パスですか？ <img src ="./***/***.gif">のことですよね？ そのとおり。ついでだから絶対パスと相対パスについて勉強しとこうか。パスの知識はホームページを作る時に必ず必要になる。画像やページの指定だけじゃなくて、CGI やJavascriptなんかを使う時にも必要。 絶対パス？？相対パス？？ どちらも画像やファイルの場所を指定するパスの書き方だ。最初は分かりにくいから↓の図を見てくれ。住所を例にして説明しよう。 ↑の場所に、それぞれ住んでいたとする。道を歩い
[CSS] テキストの文字サイズ・行間確認用
CSSで行間（ line-height ）と文字サイズの確認用ツールです。画面右の項目を変更してご利用ください。 このページでは、段落（P要素）まわりのCSSで重要だと思われる文字サイズ、行間、左右マージン、段落間隔（P要素の下マージン）を実際に変更し、確認できます。 CSSでのレイアウトデザインにおいて、最も重要な基本事項といえば文字の可読性です。最近ではブログの普及もあって、極端に読みにくいページは少なくなりましたが、WEBを作る人としては押さえておきたいところです。 以下、サンプル文章代わりの雑文です。 海外で小さい文字のサイトってありますよね。でね、そのサイトが妙にイカしたデザインに見えたりだとか。実際、ぱっと見は綺麗です。文字が小さくなるにつれて文章ではなくて模様だとかパターンの塊に見えるためだと思うのですが、そういったサイトの文字サイズを日本語に適用するとちょっとまずい。 例え
パニック・ジャパン - Coda - Mac OS X 用 シングルウインドウ Web 構築環境
Codaは終売しました。 サポートやプラグインのご入手などはライブラリをご参照ください。 他社製のCodaはこちら。 ...まったく新しい、Macにネイティブなウェブコードエディタの誕生です!
スタイルシートリファレンス（目的別）
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
超初心者のためのホームページ作成講座 - HTML - CSS - Mozilla Composer
@attrip » 初心者にオススメのhtml css勉強方法
HTML入門
HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど