html

ウェブ制作

教科書には載っていないコーディングする人に知っていて欲しい14のこと

はる フロントエンジニアのはるです。 今回は、コーディングをする人で入門者を脱却するために私が思う気をつけて欲しいことを紹介します。 プルリクチェックをする機会も多く、コーディングを始めたばかりの人たちにこれは知っていて欲しいなと、思うこと...
ウェブ制作

aタグでGoogleカレンダーに予定を登録ボタンの作成方法

Googleカレンダーに予定を追加するボタンをGoogleカレンダーAPIを使わずに、aタグに特定のURLとパラメーターの設定で作る方法を紹介したと思います。 aタグで作る予定を登録ボタンの作り方 ベースとなるURL http://www....
ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その7-CCSの共通ファイル化)

前回まで、マークアップしたHTMLのindex.htmlに対してstyleタグを使って、CSSを記述してきました。 今回は、links.htmlに対してもCSSを適応して装飾していきたいと思います。しかし、現在の書き方だとindex.htm...
ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その5-ページの追加)

はる こんにちは。 現役フロントエンジニアのはるです! リンクを使い遷移について学びましょう。 今回は、Webページを増やしリンクを使いページ遷移をさせます。リンクの基本的な使い方を学びながら、リストタグ使いさまざまなリストの使い方を学びま...
ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その4-マークアップ)

はる こんにちは。 現役フロントエンジニアのはるです! HTMLの勉強をどんどん進めていきましょう! 今回は、HTMLのマークアップをやっていきましょう!さまざまなタグができてます。最初は覚えられなくても何回も使ってゆっくり覚えていきましょ...
ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その3-Webページの情報設定)

はる こんにちは。 今日も、HTMLの勉強していきましょう! Webページの情報の設定してみましょう。 前回は、HTMLの雛形部分の説明をしました。そちらを読んでいない方はまず前の記事を読んでくださいね! 今回は、SEOにも影響する最も重要...
ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その2-HTMLの雛形)

はる こんにちは。現役フロントエンドエンジニアのはるです!はじめてのHTMLを書いていきましょう! 前回、このチュートリアルで作成するWebサイトについてとHTMLの基礎知識を説明しました。ぜひ、完成するWebサイトはどんなものか確認してか...
ウェブ制作

【HTML・CSS入門】プロフィールページを作りながらはじめてホームページ制作(その1- 基礎知識編)

はる こんにちは。アイドルが大好き!現役フロントエンドエンジニアのはるです!プロフィールページを作りながら、HTML・CSSをチュートリアル形式で説明していきます。 以前、これからHTML・CSSを勉強始めようと思っている方に「まず何を用意...
ウェブ制作

はじめの一歩!HTML・CSS入門者向けのWeb開発環境を用意しよう。

はる こんにちは。推しにガチ恋アイドルオタクで現役フロントエンドエンジニアのはるです!この記事では、HTML・CSSをはじめる入門者向けのはじめの一歩として用意するべき開発環境について紹介します。 この記事では、HTML・CSS・JavaS...
ウェブ制作

metaタグのviewportを理解するために簡単な言葉でまとめてみた

レスポンシブ・リキッドレイアウトのサイトを作るにあたって、 <meta name="viewport" content="width=device-width, initial-scale=1.0"> この設定をやっていれば問題なく作れます...
ウェブ制作

ページ表示時にYouTubeのiframe埋め込みを自動再生させる方法

はる Youtubeのiframe埋め込みして、自動で再生させたい時の設定方法と、できる条件についてまとめました。特定条件なら自動再生させることができるので紹介します! ページ表示に、iframe埋め込まれたYouTube動画を再生させる方...
ウェブ制作

hamlをインストールから応用まで遊んだのでメモ

なぜこんなことやるかというと、導入しようと思ってinstallコマンドを入力したらうまくインストールできなかったの僕みたいな超入門者用にまとめます。 hamlインストール方法 コマンドラインから行いますコマンドで以下のことを実行してください...