HTMLタグ・スタイルシート・特殊文字等の早見表
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングを始めてはや1年。今でこそ、そこそこできるようになってきた僕ですが、初めの頃はそれはもう悲惨なものでした。 あるときはIEのバグで先輩に助けを求め、またあるときはIEのバグで先輩に助けを求め、そしてまたあるときはIEのバグで先輩に助けを求め・・・。 そんな時代に、CSSハックを使わず、極力自力でバグをつぶすために、僕は先輩の助言を元に「バグで詰まったらまず目を通す11のヒント」なるものをノートにリスト化して書きとめておいたのでした。 バグったらとりあえずこの項目に目を通す。するとGoogle先生に頼らずともなんとかなるようになりました。 今でこそもう使わずともよくなりましたが、コーディングに不慣れな方は、このようなリストを作っておくといいかもしれません。 参考程度に以下、ご覧になってみてくだ
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
オープンなウェブは、開発者に素晴らしい機会をもたらします。これらの技術を最大限に活用するには、それらの使い方を知る必要があります。以下に、ウェブ技術のドキュメントへのリンクがあります。 ウェブ開発者ガイド ウェブ開発者ガイドは、ウェブ技術を実際に使用して、やりたいことや必要なことを実現するために役立つハウツーコンテンツを提供しています。 ウェブ開発者向けチュートリアル HTML、CSS、JavaScript、Web API の学習を段階的に進めるためのチュートリアルです。 アクセシビリティ ウェブサイトを使用する人に何らかの制約があっても、できるだけ多くの人が使用できるようにすることです。 パフォーマンス コンテンツをできるだけ早く利用できるように、操作できるようにすることです。 セキュリティ データ漏洩やデータ盗難、サイドチャンネル攻撃、クロスサイトスクリプティング、コンテンツインジェク
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
htmlとcssは分かるけど、プログラムに関しては素人の私、副長がいかにwebサービスを公開するに至ったかのまとめです。 この日記、もちろん(http://anond.hatelabo.jp/20101203150748)に触発されてます。 もともとwikiで作っていたサイトがあり、それを作り直し今月リリースしました。 2010年10月時点でのスキルセット html:5年くらい。 css:5年くらい。 Javascript(jquery):2年くらい。 IA:3年くらい。 元マークアップエンジニアの現在webディレクターです。 リニューアル前のサイト 海外ドラマの情報サイト pukiwikiで構築 html、css、デザイン全て一人 api利用(yahoo、bing、楽天、amazon、WikipediaAPI)で自動取得できる情報は取得しまくった(全てJavaScript利用) サーバー
#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
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に(主に)縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>~</head>に下記を記述します。 <meta
私の周りで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デザインといっても色々なことがあると思うのですが大
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには? ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く