[B! webdesign][HTML] YUKI14のブックマーク

YUKI14 id:YUKI14

webdesignとHTMLに関するYUKI14のブックマーク (19)

レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile︵ウェブモバイル︶は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。運営歴はかれこれ10年以上です。私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。今のメイン機はGooglePixelとiPhone15ProMAXです。昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。UQモバイル公式グッズをたくさん手に入れる機会がありました。東京新宿にあるLINE株式会社に招待して貰っ
YUKI14 2014/06/17
Responsive

Web制作

webデザイン

レスポンシブ

デザイン

webdesign

スマートフォン

web

html
リンク
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみるこのリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
YUKI14 2012/03/28
webデザイン

design

webdesign

css

html
リンク
Components · Twitter Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2
YUKI14 2012/03/05
CSS

Development

twitter

html

web

design

webdesign
リンク
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも﹁webデザインってどうやるのー？﹂とか﹁私もやってみたいんだけど…﹂とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by‥fweez まずはじめにとりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素応用してwebページを作ってみるまずはじめに一口にwebデザインといっても色々なことがあると思うのですが大
YUKI14 2012/02/14
html

web

webdesign

Webデザイン

css

web制作

デザイン
リンク
犯してはいけないHTMLタグの過ち10個
︻追記︼ HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。︻追記︼ HTML5では﹁Images whose contents are not known(どのような内容かわからない画像)﹂に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
YUKI14 2011/04/20
html

PHP

CSS

webデザイン

web

webdesign

web制作
リンク
HTML5+CSS3 入門
Webを記述する言語の標準の現状昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか：ウェブの歴史 [Page 2] よ
YUKI14 2010/10/04
XHTML

html

web

webdesign

html5

web制作

webデザイン

css3
リンク
http://www.designwalker.com/2009/01/table.html
YUKI14 2010/09/04
table

webデザイン

まとめ

webdesign

html

css

web制作
リンク
http://www.designwalker.com/2010/06/html5-template.html
YUKI14 2010/06/08
*あとで読む

html

html5

css3

web制作

webdesign

webデザイン
リンク
CSSでマルチカラムレイアウト
はじめに本連載では、﹁クロスブラウザに対応したデザインテクニック﹂をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト︵段組レイアウト︶を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した﹁floatプロパティ﹂および﹁positionプロパティ﹂を利用した、﹁フロート型﹂と﹁ポジショニング型﹂のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。対象読者XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。必要な環境︵X︶HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
YUKI14 2010/03/20
CSS

*あとで読む

webデザイン

webdesign

html

web制作
リンク
iPhone向けサイト構築基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、﹁iPhoneとツイッターで会社は儲かる﹂の出版記念と、巷で話題の﹁基礎文法最速マスター﹂ブームに便乗して、iPhone︵iPod Touch︶向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記‥ iPhone向けサイト制作の書籍を執筆しました！既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介とコードの解説をしています。 iPhone向けサイト制作の入門書に最適です。﹁HTML5＋CSS3で作る魅せるiPhoneサイト﹂基礎編対象ブラウザはMobileSafariですレンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張︵CSS︶があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
YUKI14 2010/02/15
*あとで読む

iPhone

基礎文法最速マスター

tips

webデザイン

webdesign

CSS

html

web制作
リンク
直感でWebサイトを作成できる6つのフリーWebサービス
気になって調べたのでメモします。 HTMLやCSSの知識を必要とせず、ドラッグ&ドロップで作成するなど直感操作でWebサイトを作成できるフリーのオンラインサイトビルダーをいくつかご紹介致します。基本的に、作成したサイトはそのサービスのサブドメインまたは独自ドメインを登録して運営します。使用して気が付いた点をメモしておきますが全ての情報ではありません。 yola ネタ帳さんの記事︵有料ソフトとデザイン作業を無力化させる30のブックマークまとめ︶で知ったサービス。直感で操作、独自ドメイン︵yulaで取得、年19$程度︶の利用も可能。日本語も文字化けしません。 yola Moonfruitドラッグ&ドロップで作成。HTMLもCSSの知識も不要。日本語は使えませんが、上記のように、画像や特殊なテキスト部分も変更できる。 Moonfruit weebly独自ドメインの利用も可能。メール
YUKI14 2010/01/28
サービス

web

html

CSS

webdesign

WEB制作
リンク
ハイクオリティサイトのワイヤーフレーム分析 (1) 他サイトのワイヤーフレームから学べること
ワイヤーフレームとは﹁ページの大まかな見取り図﹂のことであり、この部分にはこのコンテンツ、というページ構成を示したものである。Web制作の案件では、比較的上流の工程でワイヤーフレームづくりを行い、その後にビジュアルデザインやインタフェース制作、(X)HTML+CSSページへの落とし込みの作業に入る。コンテンツそれぞれをどこに配置するかという判断、いわゆる﹁情報アーキテクチャ﹂は、限られたスペースを有効活用するのに重要なだけでなく、ユーザービリティ(使いやすさ)やファインダビリティ(発見しやすさ)にも大きく関わってくる。ユーザー中心デザイン(User-Centered Design: UCD)という言葉を借りなくとも、Webサイトはユーザーに使ってもらってはじめて意味があるのであって、運営者とユーザー双方の満足が、車の両輪のようにサイトを動かし、発展させるのである。特にトップページのワイ
YUKI14 2009/12/10
web

言葉

情報

html

CSS

Web制作

デザイン

design

webdesign

ユーザビリティ
リンク
[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu
Styled Menuから、IE6/7, Firefox, Opera, Safari, Chromeに対応した、フリーのナビゲーションを紹介します。 Styled Menu ナビゲーションはリスト要素で実装されており、ラベルを日本語に変更するなどカスタマイズも可能です。
YUKI14 2009/11/17
ナビゲーション

カスタマイズ

webデザイン

まとめ

design

webdesign

CSS

html

ui

web制作
リンク
CSSベースの超クールなナビゲーション集:phpspot開発日誌
CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine Navigation menus have to be intuitive, precise and easy-to-use. CSSベースの超クールなナビゲーション集。どんなサイトにでも必ず必要になってくるのがメニューナビゲーションです。秀逸なデザインのナビゲーションを参考にすることで、よいページデザインが作れそうです。 53種類ほどのクールなナビゲーションが紹介されているので、これは知っておいて損はないでしょう。他のナビゲーションも見る
YUKI14 2009/11/17
ナビゲーション

web

webデザイン

design

デザイン

Web制作

webdesign

css

html

ui
リンク
https://vanillate.org/blog/wp-content/uploads/minecraftskin_02.jpg
YUKI14 2009/10/12
デザイン

CSS

design

HTML

web

webデザイン

webdesign

Web制作

仕事

*あとで読む
リンク
[CSS]角丸を使用しないで、四隅をすっきりみせるスタイルシート | コリス
divで実装したパネルの四隅を1px欠けにして、角をすっきりみせるスタイルシートをonderhond.comから紹介します。
YUKI14 2009/10/10
チュートリアル

CSS

design

HTML

tips

web

webデザイン

webdesign

Web制作
リンク
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ喜安亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします︵編集部︶最も多く使われているのに……、いや、だからこそ多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE︵Internet Explore︶のバージョン6です。 IE 6は、発売開始当初のWindowsXPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
YUKI14 2009/10/09
まとめ

browser

CSS

HTML

tips

web

webデザイン

webdesign

Web制作
リンク
商用無料のXHTML / CSSテンプレート配布サイト – creamu
かなりすごいサイトを見つけました。ChocoTemplatesというサイトで、商用無料のXHTML / CSSテンプレートを配布配布しています。 Free CSS Templates Every Week! ChocoTemplates.com provides professionally designed xhtml/css templates for free. The templates are ready-to-use and can be downloaded instantly. Make sure to visit us frequently, as we will add new FREE xhtml/css template every week. フリーのCSSテンプレートを、毎週配信！ ChocoTemplates.comは、プロ並のデザインのXHTML / CSS
YUKI14 2009/10/08
テンプレート

デザイン

フリー

フリー素材

CSS

HTML

template

webdesign

Web制作

XHTML
リンク
ハイクオリティなフリーHTML/CSSテンプレート集「99 High-Quality Free (X)HTML/CSS Templates」 | DesignDevelop
TOP > WebDesign > ハイクオリティなフリーHTML/CSSテンプレート集「99 High-Quality Free (X)HTML/CSS Templates」 WEBサイトの制作をより簡単にそして精度の高いものにしてくれるテンプレート。現在様々なフリーで使えるテンプレートがリリースされており、かなりクオリティの高いもの存在します。今日はそんなハイクオリティなフリーHTML/CSSテンプレートを集めたエントリー「99 High-Quality Free (X)HTML/CSS Templates」を紹介したいと思います。 Download　-　Live Demo 様々なタイプの高品質なHTML/CSSが収録されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。詳しくは以下 ■O’No! Typography – Downlo
YUKI14 2009/10/02
*あとで読む

CSS

テンプレート

design

web

webデザイン

webdesign

HTML

ウェブ

XHTML
リンク
1