中級編では、ランディングページと呼ばれる、サイトを訪問したユーザーが一番最初に目にするWEBページを作っていきます。WEBデザインの応用知識を身につけ、よりモダンなWEBページを作ってい...
Progate(プロゲート) | Learn to code, learn to be creative.
中級編では、ランディングページと呼ばれる、サイトを訪問したユーザーが一番最初に目にするWEBページを作っていきます。WEBデザインの応用知識を身につけ、よりモダンなWEBページを作ってい...
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
ドラッグ&ドロップでレスポンシブサイト！TwitterBootstrapBuilder Jetstrapがすごい！
ITかあさんです。もう私のことは忘れてしまいましたか、無理もありません。ここまでブログ放置したのは開設以来初めてで、独立してからめっちゃくちゃ忙しい数ヶ月をようやく乗り越え、やっとブログに向き合う時間が出来ました。放置した数ヶ月分の知識を吐き出していきたいと思います。 TwitterBootstrapは便利だよね 元WEBデザイナのくせに今や一切デザインしたくないITかあさんとしては、下手にデザイン考えるくらいならTwitterBootstrapを始めとしたおしゃれなCSSフレームワークを使ってデザイン及びコーディング時間を削減して、プログラミングに時間を費やしたいです。 ドラッグ&ドロップでTwitterBootstrapのサイトが作れる！ TwitterBootstrapは便利だしおしゃれなんですが、それ相応のTwitterBootstrapの知識も必要ですが、Jetstrapは多少の
日本のWebサイトの404ページデザインいろいろ+α - かちびと.net
気になって探したのですが、ググッても 9割は海外のデザインだったので、日本 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ
リンクの色 | Webデザイン講座オシャレチップス
リンクはリンクだとわかるような色にしないと、訪問者は気付かず、クリックしてもらえなくなります。また一度訪問したリンクの色と区別しないと、訪問者はどこまで読んだのかが分からず、戸惑ってしまいます。 ユーザビリティだけじゃ解決できないリンクの色 リンクの色はユーザビリティを高めるために、とても効果的な方法です。(参考：リンクの色と装飾)なぜ、このサイトが一度もリンクの色を変更しないのかというと、それは面倒くさいからではなく、リンクだとわかりやすくしているからです。 リンクをリンクだとわかりやすくするためには、参考ページにも書かれている通り、青色＋下線が一番わかりやすい装飾方法です。 けれども、サイトの背景にどうしても青色を使ってしまっていて、ページ全体の印象ががうるさくなると、ユーザビリティ上の問題だけでは片づけられなくなります。そこで覚えておくといいのが配色の知識です。 リンクの色を考える
white-space：CSSプロパティの使い方とサンプルコード集 - ウェブランサー
white-spaceプロパティの説明 white-spaceは、要素内のホワイトスペースの扱い方を指定します。ホワイトスペースとは、空白を表す文字のことです。半角スペースやタブ、改行などが該当します。 このプロパティには、大きく分けて2つの機能があります。1つは、連続するホワイトスペースを詰めるか残すのかの制御。2つ目は、ホワイトスペースを含む文字列が自動折り返しの地点に達した場合の制御です。 例えば、ソースコードの中に半角スペースやタブが連続して書かれていた場合に、それを切り詰めて表示することができます。あるいは、一行のテキストが要素の端まで到達した時に、自動的に折り返すか、それとも<br>で改行されるまで折り返さないかを定義できます。 連続する改行をそのままブラウザに表示させるには、HTMLの<pre>タグで囲んで下さい。 white-spaceに指定できる値 normal 連続する
スタイルシート［CSS］/テキスト・フォント/改行・スペース・タブの扱いを指定する - TAG index
表示モードが互換モードの場合は、IEでは pre の指定が機能しません。（標準モードでは機能します） normal （標準） 連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されます。 幅いっぱいのところで、自動的な折り返しが行われます。 nowrap （自動的な折り返しを禁止する） 連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されます。 自動的な折り返しは行われません。領域の幅を超えたテキストは、はみ出して（または横スクロールで）表示されます。 pre （記述した通りの形で表示する） 連続する半角スペース、改行、タブは、記述した通りの形で表示されます。 自動的な折り返しは行われません。領域の幅を超えたテキストは、はみ出して（または横スクロールで）表示されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
