Clik here to view.
🀄上海のクリア可能パターン生成
🀄上海🀄「上海」とは、積み上げられた麻雀牌の山から、左右少なくとも一方に隣接する牌が無く、上に別な牌が積み重なっていない、同じ柄の牌の組を取り除いて行き、すべて取り除いたらクリアというパズルゲームです。基本的には...
View ArticleClik here to view.
HTML付近のあれこれ
HTML付近のあれこれHTMLやCSSなどの勉強していて，「あれ？これどうするんだっけ」と思ったところがあった。そういうものをメモ程度にまとめていく。目次HTMLとCSS1. position2. ol, ul, dl3. px, %, em, rem4. PNG, JPEG5. font-family6. margin, padding7. float8. 命名規則SEO対策1. div,...
View ArticleCSSセレクタの優先順位
はじめにCSSやBootstrapを使用していてよくあるデザインが反映されない問題について、文法間違いやパスの指定など色々な原因がありますが、CSSセレクタの優先順位が関係していることがよくあるのでまとめます。CSSの優先度CSSの記述がうまく反映されないとき、文法の間違いもなく、パスの指定も問題ないという場合はより優先度の高いCSSがどこかに記述されている可能性が高いということです。またBoots...
View Articleコンテンツが下からスクロールで表示されるjQueryプラグイン
コンテンツが人画面に収まりつつ、スクロールすると次のコンテンツが表示されるプラグインです。デモページデモページ...
View Article自分用
bootstrapのサイトにアクセスする。 Bootstrapを、そのまま使用するのなら、CDNをコピーするだけで使える。 style.cssを読み込む、直前の部分に貼り付ける。（link rel="stylesheet" href="css/style.css"） htmlに、決められたタグを入れることでBootstrapが勝手に調整してくれる。body div class="container"...
View ArticleClik here to view.
年末まで毎日webサイトを作り続ける大学生 〜16日目 Ap●le 公式サイトのファーストビューを真似して作ってみる〜
はじめにこんにちは！年末まで毎日webサイトを作っている者です。今日はゆくゆくwebサイト制作でお金をもらうための練習ということで、Ap●leのファーストビューをソースコードを見ずに動きを見て模倣してみました。（fontだけはソースみました)扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。今日は16日目。(2019/11/3)よろしくお願いします。サイトURLht...
View ArticleClik here to view.
flexboxの基本的な使い方
しっかりしたCSSの理解が不足していたので要素の横並びにfloatや管理画面等ではBootstrapのグリッドレイアウトに頼っていたため流行りのflexboxの概要を確認してみた内容の覚え書き。親要素よりも大きい子要素を10個準備親の枠を超えた10個のdivタグを用意してわかりやすくするために色をつけるindex.html<!DOCTYPE...
View ArticleClik here to view.
borderを使用した三角形（吹き出し）の作り方
概要borderによる三角形の作成方法を応用して、次のような吹き出しを作成することができる、ということが分かったので、記録します。borderで三角形を作成する方法borderが幅をもつ要素であることを利用して、三角形を作成することができます。全体のコードは以下の通り。手順１：空要素を設定幅・高さ０の空のボックス要素を設定。この要素の周りにborderで枠線をセットしていきます。手順２：border...
View Article[メモ]border-radiusの使い方
4つの値を渡すことで各角の角丸を指定できる半円を書く時などに使える// border-radius: 左上 右上 右下 左下 border-radius: 10px 10px 0 0;
View ArticleWebプログラミングの勉強を始めて約半年が経ちました
導入はじめまして、石川県在住の大学生です。webプログラミングの勉強を始めて約半年が経過したのでwebプログラミングに興味がある方やwebプログラミングの勉強を始める方に向けてなにかアドバイスを送ることができるのではないかと思いQiitaの記事を書くことにしました。また、webプログラミングについて勉強したことをノート代わりとしても利用していこうと考えています。「もっとこうした方がいい！」「この本や...
View ArticleClik here to view.
【Qiita】記事で画像を横並びにする
言語, 記法: HTML, Markdown画像サイズ： 128×128 px横並びになった画像はスクリーンサイズによって、縦並びになる。本文書き方：空白を入れずに後ろに画像をドラッグ＆ドロップ ![youtube_social_square_red.png](<a...
View ArticlejQueryで複数のスライドダウンコンテンツを実装する
スライドで表示するコンテンツが1つの場合は単純ですが、複数ある場合と閉じるボタンがある場合という条件があるスライドコンテンツの実装方法です。デモデモHTMLindex.html<ulclass="slideContent"><li><h2>見出しテキスト1</h2><divclass="inner"><p>Lorem ipsum...
View ArticleClik here to view.
firebase ポートフォリオサイト作ってみた
firebaseでポートフォリオサイト作ってみた※firebaseで動くのは静的ファイル（js,css,html)のみである初めにfirebaseにログインしプロジェクトを作成する。プロジェクト作成後にアプリを作成を選択しアプリを作る後にホスティングを利用する └ホスティングを利用するにはコマンドでアップするディレクトリにいる必要がある。開発用サーバーのコマンドは firebase...
View ArticleClik here to view.
z-indexがautoと0とで重ね合わせにどんな違いが生じるのかを理解する
CSSのz-indexプロパティは何も指定しないと初期値autoですが、CSS仕様書9.9.1 Specifying the stack level: the 'z-index' propertyによると、autoのときThe stack level of the generated box in the current stacking...
View ArticleClik here to view.
【ASP.NET Core MVC】ASP.NET Core MVCであみだくじを作ってみる 4 (cssの作成)
概要前回：【ASP.NET Core MVC】ASP.NET Core MVCであみだくじを作ってみる 3 (モデルの追加)今回は、cssを使ってビューのレイアウトを作成していきます。コントローラー間でのモデルデータの受け渡しも考えてみます。コントローラー間でモデルを受け渡すASP.NET Core でのセッションとアプリの状態をざっと読み、TempDataを使うことにしました。...
View Article【保存版】Webフロントエンド基礎力（初心者向け）
ブラウザで動くWebページのプログラミング実装をフロントエンドと呼びます。最近はJSON色つけ係と呼ばれてたりしますが、...
View ArticleClik here to view.
Vue.jsでじゃんけんゲーム作りました
はじめにこの記事は以前私が投稿した記事の続編となります。合わせて読んで頂けると嬉しいですVueを扱えるようになりたいけどJavaScript書いたことがなかったので、JavaScriptとVueを同時に勉強する。今回は、前回のコードを改修〜見た目実装までの手順を記載しました！完成品はこちらとなります前回のコードを改修まずは前回のコードの手直しから始めましょう。前回の記事で改修案のコメントをくださった...
View ArticleClik here to view.
float の解除 clearfix
子要素が全てfloatの時の、親要素の高さ通常、親要素の高さは子要素を包む高さとなるが、子要素が全てfloatの時、親要素の高さは0となってしまうという性質がある。float は浮いているという意味で、親要素からみると float の子要素は存在しないように見えるからである。例<!DOCTYPE...
View Articlewebプログラミングってなに？始めるためにまずやること
webプログラミング言語とは？webプログラミング言語は、webサービスにおいて自分のアイデアを形にしたり、みんなに使ってもらったりするための言語です。大きく分けるとフロントエンドとバックエンドの２つに分類することができます。フロントエンドとはフロントエンドとは、ブラウザに働きかけるもので、簡単に言うと「見せる」モノです。ホームページやブログなど目に見える部分を担当する言語です。サイトに装飾や動きを...
View ArticleClik here to view.
HTML CSS 【パンくずリスト】ってなんですか？
パンくずリストとは [メルカリより]https://www.mercari.com/jp/guide/car/transport_guide/こういうのとか [Web Design...
View Article
