新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ
未経験からWebデザイナーに転職して、2年目に突入しました。 1年間チャレンジしてきて、数々の失敗をしましたし、注意も沢山して頂きました。まだまだ勉強が足りないなぁと思う次第です。 新人でなくなってしまうので、指摘されたこととその反省、2年目の目標を書き残しておきたいと思います。 おそらく皆様から見ると、当たり前すぎて書く程でないものも沢山あるでしょう…。 「無知の知」ということで、私も1年後には、そのような気持ちで読み返せるよう、しっかり勉強したいです。 関連記事 コーディングが苦手なWebデザイナーにおすすめしている独学方法 - IT系女子ログ 実務経験3年すぎた現役Webデザイナーのリアル【コーディングスキル編】 - IT系女子ログ コーディング環境 スライス スライスする前にコーディングの目安をつける デザインがズレていると感じたら必ずデザイナーに確認する スライスの名称に使用する
![新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d5ae2b3c18cdfce1c52a18e478f9b90463e0122/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftosssaurus%2F20150321%2F20150321135745.jpg)
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
初めてHTML5でコーディングする時のまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、はやちです。 今回は初めてHTML5を触る人のために色々とまとめてみました。 新要素のタグなどご紹介します。 まずはじめに <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <!--IEなど対応していないブラウザへの対応▼--> <!--[if lte IE 9]> <script src="js/html5.js" type="text/javascript"></script> <![endif]--> <title>初めてHTML5でコーディングする時のまとめ</title> <link href="css/html5reset-1.6.1.css" rel="stylesheet" type="text/css" media="all" /> </head> HTML5特有の
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi ver1.21 / htmllint.pm ver3.30 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ダイアルアップはつらいので、ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタ
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
知らなかった…CSSのborderで斜めに線を引く方法:rynote
なんと画像を使わずにCSSのborderだけで、上のような吹き出しボックスが実現できてしまうようです！ 技術的には、border同士の重なりで斜め線を生み出して実現しているようですね。 ▼具体的なコードは以下のようになります CSS&HTML blockquote { margin: 0 0 50px 0; padding: 0;} blockquote#one { width: 250px; background: #e3e3e3; padding: 25px; position: relative;} /* 吹き出しの部分 */ blockquote#one .arrow { width: 0; height: 0; line-height: 0; border-top: 40px solid #e3e3e3; borde
[css] @importを使うべきでない理由
実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。 自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。 StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。 しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。 使うべきでないポイント @importは、大きく分けて2つの観点で「使うべきでない」とされています。 ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/developer/20090908/26.html?rss
http://2step-css.com/
HTMLクイックリファレンス%26utm_content%3DGoogle%2520Reader)
css-lecture.com
http://www.designwalker.com/2009/01/table.html