Bootstrapでよく使うクラス一覧の記事がめちゃくちゃ捗る
ネットで見つけたbootstrap4の頻出classに関する記事。 https://webnetamemo.com/coding/bootstrap4/201710065870 bootstrapのclassはいちいち覚えていないので、簡単なプロダクトのデザインを変えたい時には助かります。 僕自身は簡単なプロダクトはLaravelで作ることが多いのですが、UIテンプレートがbootstrap4なのでよく使っております。 …
web制作の実案件で僕が受けたフィードバック箇所を重要度でレベル分けして見た
久々にqiita方に書きました。案件でもらったフィードバックなどは、こうやってちょくちょくまとめておきたいと感じますね！！ https://qiita.com/terry_6518/items/3eb87111daaa57ebddd7 …
ヘッダーナビでホバー時のアニメーションを実装する(center)
はじめに ちょうど最近やっているLPで、下記の様なヘッダーナブを作っていました。右側の部分をクリックすると、該当の部分までスクロールする系のナブですね。 動きは、右のメニューにホバー時(マウスが当たった時)に下線が真ん中からヌルッと出てくるパターンです。 実装パート 実装の手順を見ていきます。ソースコードはGitHubのリンクを貼るので、そちらで確認できます。 レイアウトを書き出す 実際にHTMLをコーディングする前に、全体的なレイアウトを把握してあると良いです。 今回ですとこんな感じですね。 レイアウトの組み方が分からない人はこちらの記事に詳しく書いてあるので参考にして下さい。 HTMLを積む HTMLはシンプルですね。レイアウトでくんだ入れ子構造をそのまま反映させてあげます。 cssを当てていく まずは全体像です。 そこそこ量がありますね！ポイントになりそうな::afterや:hoverの部分を解説していきます。 a::after a:hover::after これにて実装完了！！ まとめ …
:focus擬似クラスとは
はじめに :focus擬似クラス。input:focus{ …..}みたいな使われ方をしていますね。 今日は:focus擬似クラスについて簡単に解説していきます。 :focus擬似クラスとは そのクラスにユーザーがフォーカスした際のスタイルを指定できます。フォームなどのインプットタグなどで、入力時だけ背景が変わる場合などが:focus擬似クラスの恩恵を受けている例です。 使用例：入力フォーム こんな感じのよくある入力フォームですね。ここで、入力を始めた時に、その要素の色が変わる様にしていきましょう。 サンプルコード github:https://github.com/gunners6518/blog/tree/master/focus …
Inputタグのplaceholder、disabledの装飾
自分用の備忘録。 フォームでよく使われるInputタグのplaceholderやdisabledの時に装飾方法です。 特に装飾していない状態だとInputタグは以下の様になります。 「現在のメールアドレス」は入力できない様にdisabledを施していますが、色が一緒な為、気が付きにくいです。 また「新しいメールアドレス」はplaceholderの文字が大きすぎる為、窮屈だし、文字色も薄めにしたいです。 以下の画像の様な状態を目指します。 やり方 scssのみ記入します。 この様に擬似要素とすると、Inputタグ内のdisabledやplaceholderにcssが当たります。 以上。 …
業務で使うなら知っていて欲しいHTMLの歴史
はじめに プログラミングを始めると1番最初に出会うだろう言語がHTMLです。 多くの人は半年もプログラミングに携われば、基本的なHTMLダグを覚えて使えるようになると思います しかし、業務でHTMLを使うコーダーやフロントエンドエンジニアは、タグの理解だけでは不十分だと思っています。 本記事では、HTMLを業務で使うなら知っておきたい基礎知識を自分なりにまとめました。主にコーダー、フロントエンドエンジニアとして歴が浅い人を対象に書きましたので、参考になれば幸いです。 またこの記事は分かりやすさという点を重視しているため、細かい技術的な齟齬があるかもしれません。 その際はコメント等で指摘していただけると幸いです。 HTMLの歴史 今皆さんが当たり前のように使っているHTMLはHTML5に区分されます。 HTML4までの概要 今でこそ、HTMLはwebサイトを作成するための言語として認識されていますが、そもそもの役割は文書を書き出すためだけのものでした。 HTML4の段階では「HTMLは文書構造を、CSSはその体制を整えるもの」とされています。 つまりHTML4までには文書用のタグしか用意されていなかった！！！！ という事です。 HTML5の登場 HTML5はwebサイト制作を前提としているため、より使いやすくなりました。 HTML5はwebサイト制作用のタグの追加 webサイト制作を前提としているため、それに即した新しいHTMLタグが出てきました。 …
HTML,CSSでのwebサイト制作の手順とポイント
こちらの記事はqiitaにて書かせていただきましたので、こちらをご覧下さい！ 内容は「html、cssを文法的に学んだ人が実際にweb制作を作る際に意識して欲しい事」を手順に沿って説明しています。 …
scssの使い方・書き方入門
scssとは scssはcssを効率的に書く事のできるメタ言語です。cssの場合、長く複雑な記述をしなければいけない所を、scssを使うとわかりやすくシンプルに書く事ができます scssの使い方 実際にscssを使っていく際に.scssか.sassという拡張子のファイルに保存します。また生のcssと違いhtml内に<style>で記述する事は出来ません。 scssファイルを直接読み事は出来ないので、コンパイルという処理を行なってcssに変換します。ターミナルから行う場合は以下のコマンドにてコンパイルしてくれます。(hoge.scssをhoge.cssにコンパイルしている) コンパイルは他にもGUIを使っても行えます。自分は良く、npmを使って自動で更新される度に反映される状態を作っています。 sassとscssに違い 一言でまとめると「書き方が違います！！」 scssの方がcssに近いので一般的には書きやすいとされています。sassはより短い記述が可能なので、効率的に書き事ができます。 細かい書き方の違いはこちらなど参考にしてください。https://original-game.com/scss-vs-sass/ scssの書き方 ネスト(入れ子)構造 scssでは入れ子構造での書き方が基本になります。 というhtmlに対してscssを書くと以下のようになる。 コンパイル結果のcssはこのようになり、入れ子構造から勝手に親要素を認識してくれます。 scssの様々な書き方 scssにて良く使われる記述をまとめていきます。 divの中にいるclassがhogeを指定する …
