無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
よこ並びのCSS
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
CSS書くだけでTumblrテーマが作れる「Tumblr Boilerplate」作った - MEMOGRAPHIX
Tumblrテーマ、いちから作ろうとすると大変なので、あらかじめ基本的なHTMLが組まれてあるBoilerplate的なのを作った。 http://sanographix.github.io/tumblr-boilerplate/ これを使うと、CSSを書くだけでTumblrテーマ作れるので、block:Post みたいなテンプレートタグとか覚える必要なくて爆速でテーマ作れる。ZENやApolloをベースにしているので、全投稿タイプに対応している。MITライセンスなのでHTML変えたかったら変えても良いです。 テーマ作りたい人とか、CSSくらいは自分で書きたい人はご利用ください。 Tumblr Boilerplate - A naked boilerplate for tumblr theme development
そのHTML5のタグは合ってますか？間違えやすいタグ15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ <dt>,<df
HTMLをベースにCSSファイルのひな形を作ってくれる「extractCSS」:phpspot開発日誌
extractCSS - Online CSS Extractor HTMLをベースにCSSファイルのひな形を作ってくれる「extractCSS」 サイトのHTMLをコピーして「Extract!」ボタンを押すと、idやclassを抽出してくれ、すべてのCSSセレクタを書き出してくれるツール ザックリとHTMLを記述し、コピペして生成すればCSS作成の手間が軽減されるかも。 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」 CSS3で実現した多数のホバーエフェクト実装CSS「Hover.css」 生のCSSからスタイルガイド用ドキュメントを自動生成できる「Kalei」 CSSアニメーションでページを紙芝居の様に切り替えるデモ
HTML・CSSを初めて学ぶ時に合わせて知っておきたい、特殊記号の読み方集【連載：コピペで使えるIT英語tips】 - エンジニアtype
HTML・CSSを初めて学ぶ時に合わせて知っておきたい、特殊記号の読み方集【連載：コピペで使えるIT英語tips】 2014/01/30公開 ネットサービスやアプリの普及に伴って、Web制作のスキルを身に付けようとしている人が増えている。そういう人が、参考書やネットのノウハウ記事を見始めて最初に面食らうのは、特殊記号や略語の数々だろう。 略語に関して言えば、筆者は「href」をずっと「ハーフ」と読んでいて、間違いに気付いた時に恥ずかしい思いをした経験がある。読者の中にも、同じような経験を持つ人がいるのではないだろうか。 そこで今回は、これからプログラミングやHTML、CSSを勉強しようとしている人向けに、よくプロパティで使われる主な特殊記号や略語の読み方について紹介する。一部には例文も付与しているのでぜひ参考にしてほしい。 プログラミングでよく使う主な特殊記号 <> less than s
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
これなら分かる！WEB制作を無料で「学べる」サイトまとめ
作成：2013/02/4 更新：2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．HTML5 ２．CSS ３．レスポンシブ ４．配色 ５．視線誘導 / 心理学 ６．インターフェース / ユーザビリティ ７．SEO ８．ディレクション ９．アクセス解析 １０．WEBマーケティング １１．コピーライティング １２．ソーシャル １．HTML5 HTML5って何？ HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく
簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ
作成：2013/01/28 更新：2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．フォント ２．画像編集 ３．ロゴ作成 / ネタ ４．配色 ５．HTML5 ６．CSS ７．ブラウザチェック ８．エディター ９．アフィリエイトリンク作成 １０．フォーム作成 １．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
SLOT88 Situs Judi Slot Online Gacor 100% Jackpot Hari ini Hadir sebagai situs judi slot online terbaru, SLOT88 saat ini menjadi salah satu pilihan bagi para penikmat permainan judi online yang ada di seluruh Indonesia. Ini semua karena permainan yang disediakan begitu seru dan mengasyikan, game slot online juga sangat mudah di akses dan dimainkan kapan saja hanya melalui HP berbasis android dan io
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Reference
ボタン作りの手間を削減！CSSボタンデザインジェネレーターまとめ
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ