タグ HTML+CSS
人気順 10 users 50 users 100 users 500 users 1000 usersPythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話
2021/10/03
32 users
フロントエンド
MdN
1ヶ月
tl;dr
Next.js
この記事について Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話を共有する。 どういう勉強をしたかのラーニングパスを某所で話したら興味があるというコメントがあったので、自分の振り返りも兼ねて共有することにした。 TL;DR 学習期間は1ヶ月、30時間程度 TypeScript → Next.js → MDNでHTML+CSS → ... 続きを読む
今年こそコーディング（HTML+CSS）を習得しようと思っているあなたにおすすめな書籍を厳選しました！｜竹内直人（コーディングサロン講師）｜note
2019/01/17
70 users
コーディング
Note
要約版
書籍
書籍自体
コーディングを教えていてよく聞かれる質問のひとつに「おすすめの書籍はありますか？」という質問があります。 正直に言うと、書籍自体があまりオススメではないのですが、その辺りの詳細はブログに書きましたので、ご興味がある方はご覧ください。 ※このnoteはブログをより読み易くしたサマリー版（要約版）です。 ・... 続きを読む
初めてネットで募集かけて勉強会やってみたよ！使った資料とかもろもろ公開 | vdeep
2015/11/29
46 users
vdeep
okutani
okutani_t
池袋
資料
こんにちは、okutani(@okutani_t)です。11月22日にネットで募集をかけて、『ブロガー向けHTML+CSSの超基礎』という勉強会を都内(池袋)で開きました。こうやって募集して勉強会を主催するのは人生初。初体験ですね、へへへ。 勉強会を開いた理由は、僕が暇だったブログをカスタマイズしたいブロガーさんの！役に立ちたかったから！です！ もしブロガーさん向けにHTML+CSSの基礎講座的な... 続きを読む
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字... 続きを読む
☆CSSテクニック☆Borderの継ぎ目 - 株式会社CFlatの明後日スタイルのブログ
2014/05/27
45 users
border
PopUp
継ぎ目
head
CSSテクニック
2014-05-27 ☆CSSテクニック☆Borderの継ぎ目 css CSS まず最初に、ありがちな次のようなものを作ってみました。HTMLはだいたいこんな感じ。 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>HTML＋CSS3で作る×ボタン</title> <style> .popup { background-co... 続きを読む
今求められているHTML/CSSの実践テクニックが丁寧に解説された良書 -HTML+CSS デザインレシピ | コリス
2014/03/30
201 users
コリス
良書
本書
中級
デバイス
HTML5+CSS3でデスクトップ、スマフォ、タブレットなど多様なデバイスに対応できるウェブサイトを制作するための今、そしてこれから必要とされる実践的なテクニックが丁寧にわかりやすく解説されたコーダー必携の良本を紹介します。 本書の対象は中級・上級者。実務でHTML/CSSをバリバリ書いている人です。初級者も入門的な内容は一切無いけど、意欲があれば大丈夫！ これからの「標準」を身につける HTML... 続きを読む
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 | HTML5Experts.jp
2013/12/05
137 users
HTML5Experts.jp
changelog
新機能
10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、... 続きを読む
[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション | コリス
2013/03/21
67 users
コリス
Facebook
ローディング
ディレイ
くらげ
昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <d... 続きを読む
Web上でHTML+CSS製のスライドを簡単に作成、公開できるWebサービス・rvl.io - かちびと.net
2012/10/10
57 users
スライド
net
作成
WEB上
WYSIWYG
よく見かけるHTML+CSS3なプレゼン をオンラインで簡単に作成、公開 する事ができるWebサービス、rvl.io のご紹介。編集作業も容易に出来る のでフレームワーク等から作るの も面倒、という方は利用してみては。 WYSIWYGを使ってreveal.jsを使用したスライドをオンラインで作成、公開できる、というWebサービス。キーカーソルで進めたりするアレです。 rvl.io Web上でプレゼ... 続きを読む
html+cssのコーディングの作業スピードが数倍に！「Zen-Coding」の情報まとめ - NAVER まとめ
2012/06/22
475 users
Zen-Coding
NAVER
コーディング
作業スピード
My favorites ▼ | Sign in Your version of Internet Explorer is not supported. Try a browser that contributes to open source, such as Firefox , Google Chrome , or Google Chrome Frame . zen-coding Set o… 続きを読む
編集中のHTML+CSSをリアルタイムに共有できるオンラインサービス -Cssizer | コリス
2012/03/09
83 users
write
コリス
READ
リアルタイム
Read Only
発行されたURLを元に、他の人とリアルタイムに編集中のHTML+CSSを共有できるオンラインサービスを紹介します。 共有の状態は、Read/Write、Read Onlyを選択できます。 Cssizer Cssizerは [...] 続きを読む
CSSフレームワークのその次の話 - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記
2012/03/05
24 users
Facebook
HoryGrail
HolyGrail
Facebookでいろいろ書いてたらそこそこ反響あったのでメモ書き程度にブログに投げておきます CSSフレームワーク、その次の話 Twitter Bootstrapの登場によってCSSフレームワークはこれまで以上に便利なものになったと思う。 でも「Twitter Bootstrap」のようなものはエンジニアが「ダサいUIから脱却するためのもの」からまだ抜け出せていない状況だと思う。HTML+CSS... 続きを読む
入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル | コリス
2012/02/13
44 users
コリス
チュートリアル
デフォルトフォント
手書き風
フォント
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下... 続きを読む
スマホサイト案件の見積もりについて[to-R]
2012/02/09
246 users
単価
to-R
Check Tweet
見積り
見積もり
スマホサイト案件の見積もりについて Check Tweet 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いと... 続きを読む
Webamb | ウェブアンブ » Blog Archive » WordPressでブログを作る手順
2012/01/18
14 users
非効率
僕自身
信頼性
初心者向け
Webamb
もともとはWordPressの初心者向けのマニュアル的なものを記事にしようと思っていたのですが、僕自身がWordPressに触れて間も無いのでどうにも信頼性に欠ける記事になりそうでした。 ただ、このブログを作った手順を公開することで誰かの役に立つかもしれないし、自分自身の確認にもなると思ったので、この記事を書こうと思いました。 間違っていたり、非効率であるかもしれませんがHTML+CSSで静的なW... 続きを読む
画像を一切使わずCSSで描かれた「けいおん！」の澪がマジですごい！ - 裏技shop DD
2011/12/18
422 users
ガールズバンド
CSS
k-on
秋山
けいおん
今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん！」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。 「けいおん！」（K-ON!）は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動... 続きを読む
「Webデザイナーのための jQuery入門」という本を書きました - Takazudo hamalog
2011/12/04
63 users
jQuery入門
Takazudo hamalog
Alt
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 2011年12月7日発売です。もう本屋に並び始めたみたい。 Webデザイナーのための jQuery入門 これは、Webデザイナーとか、HTML+CSSを普段書いてるような人でJavaScriptをほと... 続きを読む
[JS]幅指定の単位にパーセント(%)が使えるコンテンツスライダーのスクリプト -Dynamic Carousel | コリス
2011/08/18
43 users
jquery.js
コリス
width
script src
Dynamic Carouselのデモ デモではページネーションが3タイプ用意されており、それぞれコンテンツのwidthが%で実装されています。 ※ページネーションはHTML+CSSで自由に配置できます。 デモページ：ページネーション左上 Dynamic Carouselの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https... 続きを読む
芸大 - 芸術情報演習デザイン(Web)・Web デザイン演習A 2011 補講：HTMLの今後 – HTML5で何が変わるのか | yoppa org
2011/07/27
26 users
補講
yoppa org
HTML
web
芸大
前回の講評会で、「オンラインポートフォリオを作る」というテーマで一通りのHTML+CSSによるWebページ制作が完了しました。しかし、現在Web制作に関する仕様や技術は大きく変化しつつあります。HTML5という新しいバージョンのHTMLは、「Webページ」から「Webアプリケーション」へと変化しつつある昨今のWebの現状に対応した規格です。今回は将来の展望として、このHTML5によって何か可能とな... 続きを読む
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき） | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話
2011/05/31
633 users
カヤック
KAYAC DESIGNER
Blog
意匠部
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い... 続きを読む
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）：CodeZine
2008/12/08
999 users
CodeZine
ユーザービリティ
ガイドライン策定
運用
はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。 本連載では、Web標準のメリットを最大限に生か... 続きを読む
IT戦記 - マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開）
2007/08/07
317 users
Twitter
IT戦記
CSS
マークアップエンジニア
批判
css はじめにこのエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS では... 続きを読む
Ajaxの長所・短所・実装に関するメモ (暫定版)
2005/10/02
223 users
Ajax
短所
長所
応答
実装
Ajaxについては日本語で読めるAjax関連情報のリンク集等を参照。 以下は、私なりにより分かりやすくなるように考えた結果であって、本来あるべきAjaxの内容をストレートに反映しているか否かは分かりません。 Ajaxとは何か § UIへの応答を含むJavaScriptで記述されたコードを含む HTML+CSSにより記述され Webブラウザに実装されたXMLHttpRequestオブジェクトにより ... 続きを読む