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サービスをつくるための知識と方法まとめ | らふらく ^^
最近、スマホの普及と共に、プログラミングを学習したい人が増えてきているようです。 私の周りでも、プログラミングに興味があり、webサービスをつくってみたいという人が大勢います。 ということで、プログラミングをやった事がない人（または初級者）のために、 プログラミングで何を学べばいいか、 どうやって勉強したらいいかというノウハウを紹介したいと思います。 何を学ぶべきか プログラミングにはいろんな言語があるため、どの言語をやればいいかわからないという声を耳にします。 そこで、初級者でも学びやすい言語を厳選し紹介したいと思います。 1. 何はともあれ「HTML」 こちらは、Webサービスをつくる上で書かせない言語で、 今見ているページ（見た目の部分）はすべてHTMLで書かれています。 HTMLを学ぶ上では以下のサイトが参考になります。 HTMLの基本 HTML入門 ドットインスト
独学でWebデザイナーの必須スキルを身につける方法 - DESIGNMAP
この記事は2010年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」（2015年3月） 大まかな身につけるステップだが、まず、基本スキル（Illustrator、Photoshop、HTML、CSS、デザインルール）を学んでいき、プラスアルファでスキルを積んでいくとよい。 本の選び方のコツ、チュートリアル形式の本からはじめよう 独学で本を選ぶ時は完全なチュートリアル形式（ひとつのウェブページをゼロからつくっていく形式が理想）になっている本かどうかを確認しよう。できれば本屋にいってチュートリアル形式かどうかを確認したほうがよいだろう。手順にそって本に従いながら時間をつくって勉強していこう。実はこの形式の本は作るのがめんどうなので数は少ない。 リファレンス形式
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルは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 に装飾を指定する前に、スタイルシートでのボックス（箱）について知っていると分かりやすいと思います。今回は下の図にある青い枠線
[CSS] テキストの文字サイズ・行間確認用
CSSで行間（ line-height ）と文字サイズの確認用ツールです。画面右の項目を変更してご利用ください。 このページでは、段落（P要素）まわりのCSSで重要だと思われる文字サイズ、行間、左右マージン、段落間隔（P要素の下マージン）を実際に変更し、確認できます。 CSSでのレイアウトデザインにおいて、最も重要な基本事項といえば文字の可読性です。最近ではブログの普及もあって、極端に読みにくいページは少なくなりましたが、WEBを作る人としては押さえておきたいところです。 以下、サンプル文章代わりの雑文です。 海外で小さい文字のサイトってありますよね。でね、そのサイトが妙にイカしたデザインに見えたりだとか。実際、ぱっと見は綺麗です。文字が小さくなるにつれて文章ではなくて模様だとかパターンの塊に見えるためだと思うのですが、そういったサイトの文字サイズを日本語に適用するとちょっとまずい。 例え
CSSDesk - Online CSS Sandbox
body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; } div { background: #fff; margin: 0 auto; width: 200px; padding: 100px; text-align: center; /* border-radius */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* box-shadow */ -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2
CSSデザインテンプレート
CSSデザインテンプレートでは、HTML+CSSを利用したホームページ用テンプレートを配布しています。このサイトのCSSテンプレートを見るにはレイアウトを、配色を考えている人は配色ツールをご覧ください。 このページの下部でCSSテンプレートの配布サイト・参考サイトへリンクしています。どれも参考になるサイトばかりですのでCSSを学ばれる方は、ぜひ足を運んでみてください。新しい発見がありますように。 ホームページ作成関連ツール 文字サイズ・行間 確認用ツール 配色ツール CSSテンプレート配布サイト CSSのみでレイアウト Webデザインテンプレート集 〓ダブルバキバキ〓ホームページ作成高速化計画 読み物がおもしろい。 てんぷれの天ぷら アフィリエイト用のテンプレートを配布 HTML+CSSテンプレート配布サイト table要素＋CSSでレイアウト WEB MAGIC ホームページフリー素材
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark
HTMLの外部ファイル化
W3C CSS 検証サービス