現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI
CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。 Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。 つまるところ、CSSレイアウトに対応したサイト製作ツールといってもいいだろう。 要素ごとにさまざまな属性を直感的に追加していける点が素晴らしい。インターフェースもシンプルで職人ぽいので個人的に好みである。日本語も入力可能だ。 当然ながら作り終えたあとは「Generate Code」コマンドでコードを生成、そのまま使うことができる。 似たようなツールはすでにいくつかあるが、Drawterの完成度はかなり高いのではないだろうか。是非試してみてもらいたい。
サイト制作のためのテンプレートをごっそり自動生成してくれる『Project deply*』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
TempNate - XHTML・CSSテンプレート＆ホームページ作成素材の無料配布
当サイトをご覧いただきありがとうございます。 ホームページテンプレートとは、あらかじめHTML、CSS、画像ファイルが一体になっているホームページの雛形のことです。 １からホームページを作るとなると、独自ドメインを取得して、HTMLファイルを作成して、サーバーをレンタルしてアップロードして作成する必要があります。 少しでもホームページの作成時間を短縮したり、低コストでの運営をご支援したいという思いから、ホームページテンプレート素材を無料で配布しています。 TempNateには３つの特徴があります。 制作コストの軽減＆作業時間の短縮 情報がしっかりと伝わりやすいレイアウト設計。スマホ対応形式や、検索エンジン対策であるSEOレイアウト設計にも配慮しております。 途中で挫折しないようにシンプルでホームページの実現を優先。実際に数千サイト様にご利用いただいており、皆様の声を反映して改良し続けていま
CSS着せ替えテンプレート企画
CDPで用いられているHTML 4.01は最新のバージョンの仕様ではなく、2018年には「Superseded Recommendation（古いもの）」のステータスになっています。 直ちにCDPがブラウザで表示できなくなるということはないですが、 現在CDPを使っている方やこれから導入を考えている方は、より新しい仕様に書き換えての使用を強く推奨します。 2019年6月追記 基礎HTMLをダウンロードしたい方は基礎HTML配布にアクセスしてください なぜこういった形態の配布法をしているのか知るためにはユーザーMENUにアクセスしてください 配布されているCDPを探したい方はCSS配布サイトリンクを利用してください CDPのCSSを自身で作成し配布したい方は制作者MENUにアクセスしてください 疑問点があったり理解を深めたい方はFAQにアクセスしてください このサイトについて CSS着せ替え
コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU
コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッドレイアウトなど、たくさんのCSSレイアウトを配布 » Code Sucks 90のフリーCSSレイアウト » Layout Gala 40のCSSレイアウト » CSS Creator 幅や背景色などを指定してXHTMLソースが生成できる » Whiteboard フリーのワードプレステーマフレームワーク » Yet Another Multi-Column Layout モダンで拡張性のあるレイ
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
第8回 「CSSによるデザインワークと相性のよいHTMLって？」に対する小林的提案
茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務める傍ら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。 いつも良質なエントリでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」というサイトがあります。少し前になりますが，そこで「CSSによるデザインワークと相性のよいHTMLって？」というエントリがありました。そこにはすでにたくさんのことが書かれていますが，今回は僕が実践していることを紹介します。 と，その前に，「CSSによるデザインワークと相性のよいHTML」についてちょっと説明しておきましょう。サイト作成の案件を進めていく過
[Think IT] 【これならわかる！JavaScript/Ajax】Ajaxライブラリ入門 第5回：Ajax開発の未来 (1/3)
もうHTMLやCSSをゼロから書くことはない？ JavaScriptのライブラリは、各ブラウザ間のバグや仕様の違いを吸収することで、開発者の負担を激減することを可能としました。しかし、JavaScriptの仕様の違いと同時にCSSレイアウトのバグや仕様の違いも、Web開発者の大きな悩みの1つでした。そんな中、最近ではCSSのフレームワークも出てきたので、その中でも注目度の高い2つを紹介します。 1つ目は、blueprintcss（http://code.google.com/p/blueprintcss/）です。blueprintcssは柔軟にグリッドの設定ができるCSSフレームワークです。最新バージョンは0.7です。印刷時のCSSも用意されており、印刷時も適切なレイアウトで表示されます。また、非常に細かくグリッドの設定（http://files.bjorkoy.com/blueprint
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
talk.css - 会話形式の吹き出しを作成するCSS
オンラインでグリッドレイアウトが簡単に設計できる -Plumb
youmos.com
http://www.stylish-style.com/gallery/gallery-top.html
[CSS]個人・商用サイトでフリーで利用できるXHTML/CSSのテンプレート -Solucija
Web ページを高速化する
http://youmos.com/reference/set_element_class.html