More than 1 year has passed since last update.

【初心者向け】WEB制作・開発で困った時に役に立つ記事、365本まとめ

Last updated at 2023-10-11Posted at 2020-10-03

どうも7noteです。WEB制作・開発初心者のためのお役立ち記事365本のまとめ

※更新履歴
2020/10/4 100本達成
2021/3/3 250本達成
2021/4/21 300本達成
2021/6/25 365本達成

WEB制作初心者向けに毎日投稿を続けて、365本更新達成しました！
私の記事を読んでくださった方、ありがとうございます。

そして、2021/6/25をもて1年間毎日更新を無事達成することができました。

自分でもなんの記事書いたか管理が大変だったので、***「いっそQiitaにまとめ記事として投稿してしまおう」***と思ったのが今回の記事になります。

始めたての頃は1人で多くの問題にぶち当たっていかなければいけないので、そんな人のサポートが少しでもできれば幸いです。

また記事が溜まったらここにも追加する予定です！

**~ Qiitaで毎日投稿中!! ~**
【初心者向け】WEB制作のちょいテク詰め合わせ

HTML・CSSの基本

HTMLの基本

・【初心者でもわかる】olとulの違いと使い分けの仕方
・ WEBサイトで大切な3つのパスの違いについて解説（絶対パス、相対パス、ルートパス）
・【初心者向けじゃない記事】ブロック要素でもインライン要素でもなくセクショニングルート要素
・【初心者でもわかる】HTML（HTML5）で閉じタグがいらない要素の一覧
・【初心者でもわかる】親子関係が予め決まっている要素一覧
・【初心者向け】検証：HTMLのブロック要素に効かないCSSはあるのか
・【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法
・【初心者でもわかる】tableのtr要素に効かないCSS
・【初心者でもわかる】機種依存・環境依存文字の表示方法
・ smallタグの正しい使い道を考える
・【初心者でもわかる】HTML・CSSの[改行][文字送り][非改行]のマニュアル
・【理系＆WEBオタク向け】数式や化学式で使えそうなHTML手法5選
・【初心者でもわかる】aタグで「現在のページ」・「現在のルートページ」・「非遷移」の設定方法
・【初心者でもわかる】「<header>」と「<div id="header">」の違いを解説
・【初心者でもわかる】2021年決定版、コピペで使えるheadタグのひな形
・【初心者向け】404ページは絶対に作っておこう
・【初心者向け】HTMLのタグ一覧を覚えておきたい重要度別に分けてみた
・【初心者でもわかる】aタグによく使う属性たち一覧

CSSの基本

問題解決

tips（お役立ち・豆知識系）

大きいパーツ（ヘッダーとかテーブルとかボタンとか）作成

小さいパーツ（矢印とか三角）作成

ボタン系

・【初心者でもわかる】ちょっと浮くボタンの作り方と、押した風のボタンの作り方
・【初心者でもわかる】CSSでボタン風のチェックボックス作る方法
・【初心者でもわかる】プラグイン不使用！オリジナルのSNSシェアボタンの作り方
・【初心者でも簡単】CSSで再生ボタンを作る
・【初心者でもわかる】+で作る、開閉ボタンの作り方（2パターン）

CSSのちょいテク

中央寄せ

・【初心者でもわかる】インライン要素とブロック要素でそれぞれの中央寄せの方法と、中央寄せする時の考え方の違い
・【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法
・【初心者でもわかる】gridを使った中央揃えの方法と、flexboxを使った中央揃えの方法

レスポンシブテクニック

javascript

javascriptの基本

・【超初心者向け】javascriptとjQueryの違いは何？5分で解説。
・【初心者でもわかる】PCとスマホでjavascriptを切り換える2つの方法（画面サイズ・デバイス）

jQuery

フォーム系

・【初心者でもわかる】同じ属性値（nameやvalue）を持つチェックボックスも連動してチェックさせたり外したりする方法
・【初心者でもわかる】タグを外から動かす2つの方法
・【初心者でもわかる】セレクトボックスをselect要素を使わず、CSSとjsで再現する方法
・ formタグは1つのまま、1つの要素クリックで複数の関連するnameだけを送信（post）させる方法
・テキスト入力中の点滅するカーソルに好きなCSSを当てる方法
・【初心者でもわかる】セレクトボックスの選択で、リンク先を変更する方法
・【初心者でもわかる】親子関係をもつチェックボックスで、チェックを連動させる方法
・【初心者でもわかる】ラジオボタンの選択で項目を出し分ける方法
・【初心者でもわかる】iosの端末でフォーム系のタグのCSSをリセットする方法&代替CSS案

お気に入り機能

・ javascriptのLocalStorage を使ってお気に入り機能を自作してみた ①準備編
・ javascriptのLocalStorage を使ってお気に入り機能を自作してみた ②実装編-基盤作り-
・ javascriptのLocalStorage を使ってお気に入り機能を自作してみた ③実装編-組み込み-

ちょっとしたスクリプト

・【初心者でもわかる】ワンクリックでテキストをコピーできるボタンの作り方
・【初心者でもわかる】右クリックを禁止させる方法
・【初心者でもわかる】スクロールの途中でバナー広告画像を表示する方法
・【初心者でもわかる】ポップアップウィンドウの作り方

jsの問題解決

・【初心者でもわかる】hover時のCSSをhtmlのタグに直接書く方法
・ pickadate.jsで特定の日付を無効にできない不具合？
・「lazyload 対応」スムーズスクロールの書き方

PHP

Wordpress

・ get_the_terms()を使って、公開された記事が登録されているタームの一覧を取得する方法
・プラグインなし！Wordpress管理画面の投稿一覧からワード検索でカスタムフィールドを含める方法
・Wordpressの画像だけのページを検索されないようにする
・【初心者でもわかる】RSSの配信方法と、jQueryでのRSS取得方法のいろは
・ Wordpressで自作のコンポーネントを作って変数付きで呼び出す方法
・カスタムフィールドのインストールから出力方法のまとめ
・クラシックエディタ卒業からのはじめてのGutenberg（グーテンベルグ）の使い方
・Wordpressでよく使うifでの条件分岐

便利系

・～全パターン～【php用】47都道府県の配列（連想配列）
・連想配列の最初のキーを取得するためにarray_key_first()を使おうと思ったらphp7から追加された要素で使えなかったから、php5でも使える方法にしてみた

・ phpで現在の「年」「月」「日」「時」「分」「秒」を取得する方法（0なしバージョンあり）
・【初心者でもわかる】パラメータ付きのURLをシェアする方法（PHP・JS）

開発サポート

時短・効率化

・【初心者必見】ブラウザショートカットを駆使して、効率よくWEB開発を行おう！（win&mac両方対応）
・【初心者向け（中級者以上も挑戦！）】目指せブラインドタッチの神。タイピング練習ができるサイト6選
・レスポンシブ化時のCSS時短ツールを自作

便利ツール

・【初心者向け】1pxのズレもなくコーディングするための便利ツール
・【初心者におすすめ】WEB開発で重宝しているWEBサービス＆拡張機能たち5選
・【初心者向け】画像の加工や圧縮などに便利なWEBツール4選
・【初心者向け】結局どのデバイスがどのブラウザに対応しているかわからん人へ。フォントメーカーを紹介
・【初心者にオススメ】縦長のサイトでもスクショして1枚の画像にできる拡張機能「FireShot」が便利！
・【初心者向け】CSSを圧縮して軽量化できるオンラインツールを紹介

知っているとワンラックアップ！

・【初心者でもわかる】コピーライトは必須じゃない・・・だと？2020年最新の書き方をおさらい
・【初心者でもわかる】ファビコン（タブにあるアイコン）の簡単な作り方・設定方法
・【初心者でもわかる】簡単！ HTMLのタグをそのままテキスト（文字）として表示する方法
・【初心者でもわかる】別タブで開く時（外部リンク）だけ自動でマークを付ける方法
・【初心者でもわかる】webサイトのショートカットアイコン（スマホ用アイコン）の設定方法（iPhone側のショートカットの作り方も！）
・高い品質のWEBサイトを構築する上で、気を付けるべき「言葉使いのポイント」
・日本語フォントでもOK！？自動カーニング（字間調整）できるCSSがすごい！
・【初心者は気を付けて】Chromeの検証ツールはあくまで検証用、必ずデバイスで確認！
・「http://からhttps://へ強制リダイレクトを設定する方法」と「常時SSLのメリット・デメリット」
・【初心者でもわかる】オフレフトの書き方を解説
・【初心者でもわかる】HTMLのコメントをコメントアウトする裏技
・【初心者向け】id名・class名で使えない文字
・【初心者でもわかる】マウス操作だけで動きをつけたり見た目が変わるHTML、CSSたち
・【初心者向け】ノンデザイナーでも、一手間加えるだけでグッと印象が変わるCSS
・【初心者向け】ホームページの背景色に使えそうな色・画像まとめ

ネタ

料理

作ってみた

クイズ

・【初心者向け】画像名の付け方わかるかな？（全5問）

考え方・学習方法

・【初心者でもわかる】デザインからコーディングする時の考え方（実践例あり）
・【初心者でもわかる】cssで使えるショートハンドの書き方と、ショートハンドかロングハンドのどちらを使うべきかについての考察
・【初心者向け】学習サイト（プロゲートやドットインストール等）が講了したら次にすること
・【初心者向け】プログラミングを勉強したい！と思った時、HTMLとCSSから始めるのは適切なのか。
・【これからHTML・CSSを勉強する人向け】フロントエンジニアに必要な心構え
・【初心者向け】矢印(>)の位置でボタンの作り方を変えた方がいい話。
・【初心者向け】コーディングは難しい言葉を複雑に書く作業ではない。いかに綺麗に書けるかと頭を悩ませるものである。
・【初心者向け】上下の余白(margin)、下から取るか？上から取るか？
・コーダーが喜ぶwebデザインを考えた
・【初心者でもわかる】後で書き直しが少なくなるコーディング術〜大切な10のステップ〜
・【初心者向け】テキスト&CSSにするか、画像にするかの線引き

練習・課題

・【コーディング初心者向け練習課題】LINE風のチャットルームを作る

コラム・ポエム

・CSSが嫌いなエンジニアが多い理由を、勝手に考えてみた
・【初心者向け】メモ帳でwebサイトを作るとなぜ作りにくいのかを解説
・なぜエンジニアはコンマ１秒でも早い方法(ショートカット等)が好きなのか考えてみた。
・ Qiitaで毎日投稿150日を迎えての感想や振り返り、そして今後の投稿について。
・毎日投稿約半年（180日）経っての振り返り
・初心者向けにQiitaで1年間毎日投稿した振り返り・感想

その他

・【解決！】windowsアップデートしたら変換・無変換キーで「英数」「かな」の切り換えが消えた人のための再設定方法
・「iPhone・iPad・Macのみ」リンゴマーク・アップルマーク（）の入力方法
・Twitterのログイン画面がバグってる風に見えるけど、バグじゃなくそういうデザインであることを調査してみた
・【初心者でもわかる】効果が似ているHTML・CSSたち
・Twitterでトレンドになっていた「#一番為になったPC知識」まとめ
・【初心者向け】何個知ってる？WEBでつかわれるメニューボタンの名前
・ Qiitaの投稿で装飾したいときによく使うHTMLタグ
・【WEB制作者なら常識?!】初心者でもわかるようにWEBにかかわる法律まとめてみた

142

207

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up