無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
Python だけで作る Web アプリケーション第一弾です。HTML/CSS/JSを使わずに、PythonだけでUIを含むWebアプリケーションを作ります。
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~ 2022年デジタル新卒研修 デジタル編成ユニット Yuta IDE
なぜ僕が「SPAはコストが高い」と考えているのか
どうもみなさんこんばんは ちょっと前に「個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね」みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です 彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思います ちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます 追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし（インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います）、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です 前提の話 こういう記事ではコ
はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
技術書ランキングと読書メーター｜Book Hack
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) Dustin Boswell, Trevor Foucher | オライリージャパン | 2012-06-23 コードは理解しやすくなければならない。本書はこの原則を日々のコーディングの様々な場面に当てはめる方法を紹介する。名前の付け方、コメントの書き方など表面上の改善について。コードを動かすための制御フロー、論理式、変数などループとロジックについて。またコードを再構成するための方法。さ…
HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01 モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
フロントエンドエンジニアが「自分はJSON色付け係」と自虐する理由を考察した - パンダのプログラミングブログ
「JSON色付け係」という自虐 フロントエンドエンジニアの間では、「私の仕事は JSON に色を付けることです」という有名な自虐ネタがある。 おそらく初出は以下のツイートなのだろう（*1）。ただ、出典はあまり詳しく調べていない。 初めてこの言葉を見た時、面白い言い回しだなと思った。確かにフロントエンドの仕事にそういう側面はある。 実際、コンテンツの表示がメインのページで作業すると上記のような気持ちになる。この場合、フロントでやることといえばせいぜい日付の表示形式を適切にフォーマットするくらいだ。結局バックエンドからデータが返ってこないとフロントだけでは何もできないと思うこともある。 もちろん、フロントだけで簡潔する手書き風グラフ作成ツール excalidraw のようなものは別だし、フロントで複雑な状態を扱う部分を書いたり、フォームを使ってユーザー入力を受け付け、入力値を検証するバリデーシ
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？HTMLSEOマークアップSEO対策HTMLLivingStandard 本記事の結論は、「とりあえずHTML Living Standardを読め」です。 正直明日からHTMLを勉強したいです！って人には全くオススメできません。 おそらく開始5秒で戦意を喪失することになると思います。 とはいえHTMLの仕様全てが記述されているので「セマンティックにマークアップしたい」って時は「HTML Living Standard」の4章を確認すると良いと思います！
はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
公開日2021-09-06タグHTMLレイアウトや装飾目的で、中身のない div 要素や span 要素、いわゆる「空 div」「空 span」を作ることはままある。しかしそれは仕様として妥当なのだろうか？ 目次 レイアウト目的の空 div の例 装飾目的の空 span の例 HTML にレイアウト目的や装飾目的のための要素はない div と span の仕様から探る フローコンテンツ フレージングコンテンツ コンテンツモデルにおける text "nothing" コンテンツモデル ol, ul, menu 要素 パルパブルコンテンツ カスタムエレメント トランスペアレント ここまでのあらすじ 僕の結論 レイアウト目的の空 div の例 下記は使う場所に応じて幅や高さを任意に設定できる例だ。.Spacer が空 div になっている。 <div class="Hero">...</div>
デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると
Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました cssp {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::be
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SEOに強いHTMLの書き方」についての個人的な見解
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
Python だけで作る Web アプリケーション(フロントエンド編)
SEOのプロ解説！ HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
【2024年最新】Web制作周りを無料で学べる学習サービス集 - Qiita
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
自力でWebサイトを作れるようになるブロックコーディングとは？ HTML/CSSの脱初心者を目指して
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
マークアップを進化させる WAI-ARIA の基本
なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskd
コーディングを助けるためにデザイナーができること① | knowledge / baigie
IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する