初心者も分かる！レスポンシブ・デザインの作り方レスポンシブサイトのHTML、CSSの作成方法を、初心者にも分かるように説明。サンプルコード、テクニックなど。
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
レスポンシブデザインの基礎と制作時の注意点を解説
ferret編集部：この記事は2015年11月2日の記事を再編集しています。 ここ数年で定着してきた「レスポンシブデザイン」。 Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。 iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。 では従来のモバイル対応ページとはなにが異なるのでしょうか？ スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。 レスポンシブデザインの定義 レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。 従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎に
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]
コーディングする際に、何気なく重宝するコードがtableです。 そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。 今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。 コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。 コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっ
![意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca6debb0b5ba0d5e0ad9cd8ecd16e993b6da81a8/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F2250%2Fog_image%2Fdefault-e58901a600c33a043330366875957445.jpg)
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | 株式会社プレスマン
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。 どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 ※IE以外のブラウザは、2014年7月4日現在の最新版にて確認を行っています。 段組み CSS3の「multi-column」を使用すると、float等による段組みとは異なり、Illustratorのテキスト流し込みのような自然な段組みレイアウトが可能です。 multi-columnによる段組みの表示例： 吾輩は猫である。名前はまだ
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック
レッド・イエロー・ブルーの三枚のパネルが重なっており、それをホバーするとそのパネルを扇状に開くスタイルシートのデモを紹介します。 アクションの度に、ぷるっと反動するのが細かい！ Calendar and Clock 実装はけっこう複雑ですが、このインタラクションはかっこいいですね。 日付や時刻の取得、不透明度の変更にJavaScriptを使用していますが、ホバーのアニメーションはスタイルシートで実装されています。 HTML 3つのパネルはdiv要素で、1枚目はノーマル時のカレンダーとホバー時の年と分と日、2枚目はホバー時の時と曜日、3枚目はホバー時の秒と月が要素として配置されています。 <div class="signboard outer"> <div class="signboard front inner anim04c"> <li class="year anim04c"> <sp
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
LIGデザイナーオススメの便利なWEBサービス・ツール＆サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーチームマネージャーのひろです。 最近、息子のアンパンマンのハマり具合に困惑しています。 アンパンマンが、画面に現れるやいなや大興奮。 軽い近所迷惑状態です(@_@;) クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね（笑） さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です！Bookmark間違いなしです！！ デザインするときに役立つWEBサービス５選 960 Grid System 横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。 http://960.gs/ Gridulator グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。 PNGを書き出せるのでとても便利です！ http://gridulato
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法
去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。 スマホでも問題なく見れたのですが、小さくて見にくいので、スマホで見た場合に1カラムになるなど若干スマホに対応しました。 その際にリンクであることを表す矢印をCSSだけで作りました。スマホはマウスを乗せるという行為がないので、リンクであるということがすぐに分かるようにするのは大切ですね。 Webフォントでもいいのですが、矢印１つのためにWebフォントを読み込むのはパフォーマンス的にどうなのかと思うのでCSSにしました。 他のサイトでもよく紹介されていますが、とても便利なので解説します。 サンプルを用意していますのでご覧ください。 では解説していきます。 HTML まず、HTMLです。 <ul id="menu01"> <li><a href="#
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ
http://www.hp-stylelink.com/news/2013/10/20131001.php
