【HTML+CSS練習】サンプルサイトで学ぶコーディング練習
1冊でスキルが身につく！ Amazonで発売中 書籍特設サイト 出版ブログ 【HTML / CSS】コーディング練習課題 ＿入門編 プロフィールサイト フォトサイト フォトサイト2 レシピサイト／トップページ レシピサイト／レシピページ ブランドサイト（ジュエリー） ＿初級編 ポートフォリオサイト ストアサイト（書店） ECサイト コーポレートサイト（Web制作） ストアサイト（和菓子） ＿中級編 ブログサイト ストアサイト（カフェ） ストアサイト（インテリア） ランディングページ コーポレートサイト（ハウスメーカー） ＿上級編 メディアサイト ギャラリーサイト ＿実践編（Codejump Pro） 実務をモデルにしたコーディング案件 ＿番外編（HTML/CSS） 疑似要素の練習 positionの練習 行数が異なる画像の横並びの練習 画像を斜めに表示する練習 ドロップダウンメニューの練習
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
【初級編】企業サイトのコーディング練習 | 未経験からWebデザイナーへ！【2024年版】
無料コーディング練習所【初級編】の学習ページです。 小規模な企業サイトを作ってみましょう。下層ページが２ページあります。 「デザインデータ」と「完成版コーディングデータ」を無料でダウンロード可能です。 デザインデータ（Figma） デザインデータ（XD） 完成版コーディングデータ（ZIP/1.2MB） 実際のコーディング例はこちらです。わからない箇所は解答例として参考にしてみてください。 コーディング例 依頼ねこ（ディレクター）からの伝言 フォントはGoogleフォントで欧文は「Roboto」、日本語は「Noto Sans JP」にしてねにゃご。ロゴはSVGを使ってにゃご。「ニュース」の日付はtimeタグを使ってにゃご。「サービス」のアイコンは画像じゃなくてMaterial iconにゃご。あとCSS設計はBEMでお願いにゃご。スマホの時はグローバルナビはハンバーガメニューでお願いにゃご。
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
Attributes - jQuery 日本語リファレンス
Attributes/API/jQuery Attr: attr(name) 最初の要素の指定属性値を返す。要素がその属性を持たない場合、戻り値はundefined。 attr(properties) ハッシュを渡して、全ての要素に属性を設定する。 attr(key,value) キーと値を渡して、全ての要素に属性を設定する。 attr(key,fn) キーと関数を渡し、関数の戻り値を値として、全ての要素に属性を設定する。 removeAttr(name) 指定属性を持つ要素から、属性を削除する Class: addClass(class) CSSクラスを要素に追加する。空白区切りで複数指定も可能。 removeClass(class) CSSクラスを要素から削除する。空白区切りで複数指定も可能。 toggleClass(class) 要素に対し、指定CSSクラスがあれば削除し、無ければ追
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳
[jQuery] [HTML] えっ！？ <script>にも読み込み順序とかあんの？ - Qiita
今日jQueryを初めた人の記事です。 あしからず。。。 ##経緯 最近Webアプリケーションの構築にドハマりしていて、JSONを返すだけの面白くないAPIづくりは一旦おいておいて、インターフェイス作りもやろうということでHTML + CSSを猛勉強している次第です。 いや、別に仕事で使うとかじゃなくて、趣味でなんですけどね。 Node.jsは使っている人なので、Javascriptはあらかたわかっているのですが、今日からみんな大好きjQueryを使いはじめることにしました。 で、いきなり3行しかないjavascriptのコードにハマりまくりました、ええ、それはもう盛大に。 ##問題のコード 今までバリデーションは全てPHPでやってエラーを返していましたが、そりゃ画面側でリアルタイムにやれるならやりたいということでPOST前検診（変な言い方・・・）をjavascriptさんに担当してもらお
![[jQuery] [HTML] えっ！？ <script>にも読み込み順序とかあんの？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/331d605db42fa2758f826ad1b02c77d138756b07/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNzM3OTElMkZwcm9maWxlLWltYWdlcyUyRjE2MDg4MTQxMDM_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9OTI4YTZjMjYzMDU1MDdmZDJkNWZlN2EzNjQ3Y2Y3ZDc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Db86d69cefa171a20e87a309359fd6f9c%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCalF1ZXJ5JTVEJTIwJTVCSFRNTCU1RCUyMCVFMyU4MSU4OCVFMyU4MSVBMyVFRiVCQyU4MSVFRiVCQyU5RiUyMCUzQ3NjcmlwdCUzRSVFMyU4MSVBQiVFMyU4MiU4MiVFOCVBQSVBRCVFMyU4MSVCRiVFOCVCRSVCQyVFMyU4MSVCRiVFOSVBMCU4NiVFNSVCQSU4RiVFMyU4MSVBOCVFMyU4MSU4QiVFMyU4MSU4MiVFMyU4MiU5MyVFMyU4MSVBRSVFRiVCQyU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTJiZmU3ZDg5ZTRkMTEwOTA3NTEzN2E2YjZjYjYyMDk3%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBva2tuJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZDRjZDE5ZjRhZTQ4YjQzMjJjNmZhNThmYWMwMTlhNDY%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D86101d25ba95e7515f19957b8d40cb93)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - SHIROMAG